day15--JavaScript语言

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

JavaScript

JavaScript是一门单独的编程语言。浏览器内置JavaScript的解释器。

独立的语言，浏览器具有js解释器。

存在与HTML中，在HTML中写JavaScript，存在形式是<script></script>

JavaScript的存在形式

- Head中(第一种存在形式，HTML代码的head中）

//javascript代码

alert(123);

</script>

//javascript代码

alert(123);

</script>

- 保存在文件中，<script src="js文件路径"></script> （第二种存在形式，js文件里面，使用src引用到HTML中)

由于我们总是先让用户看到内容，才让网页动起来，所以JavaScript的代码，放在</body>标签最后面

下面来看两段HTML代码，如下：

（1）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js.js"></script>
</head>
<body>
<h1>限制性JavaScript的文件，然后才会执行HTML代码JS是让页面动起来</h1>
</body>
</html>

此段代码，打开之后，先加载的是<script>中的代码，加载完毕之后，才会加载<HTML>代码，这样肯定是不好的，因为用户经常是先看到内容，然后网页自动加载，这样才有更好的体验，因此<script>的代码要放在<body>标签的后面，如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>限制性JavaScript的文件，然后才会执行HTML代码JS是让页面动起来</h3>
<h3>先加载HTML内容</h3>
<h3>JS代码写在<body>内部的最下面</h3>
<script src="http://wwww"></script>
</body>
</html>

PS：JavaScript文件防止在<body>标签内部的最下方。

注释：单行注释 // 多行注释：/* */

变量：

python:

name="alex"

JavaScript

name = "alex" #声明全局变量

var name = "eric" #局部变量，写JavaScript尽量都先声明局部变量

基本数据类型：(https://www.cnblogs.com/wupeiqi/articles/5602773.html)

数字

1、数字（Number）

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

转换：

parseint() 将某值转换为Int，数字，不成功则NaN

parseFloat() 将某值转换为float类型，不成功则NaN

特殊值：

NaN：非数字。可使用 isNaN(num) 来判断。

Infinity：无穷大。可使用 isFinite(num) 来判断。

写JS代码：

- HTML文件中编写

- 临时，浏览器的终端，console

字符串

a = "alex"

a.charAt(索引位置)

a.substring(起始位置,结束位置)

a.length 获取当前字符串的长度

a.concat() 字符串拼接 >:a = "alex"; >:a.concat("sb") >:"alexsb"

obj.indexof(substring,start) 获取自序列的位置索引

obj.lastIndexof(substring,start) 从后面获取子序列位置

obj.slice(start,end) 切片

列表（数组）

obj = [11,22,33,44]

obj.length

obl.push() 尾部追加元素

obj.pop() 尾部获取一个元素

obj.unshift(ele) 头部插入元素

obj.shift() 头部移除元素

obj.splice(start,deleteCount,value)插入，删除或替换数组的元素

obj.splice(n,0,val) 指定位置插入元素

obj.splice(n,1,val) 指定位置替换元素

obj.splice(n,1) 指定位置删除元素

obj.join(sep) 将数组元素链接起来构建一个字符串 >:obj=[11, 666, 999, 44], >:obj.join("-") >:"11-666-999-44"

obj.concat(va1,va2....) 连接数组

obj.sort() 排序

字典

obj = {"k1":"v1","k2":"v2"}

obj["k1"] 获取字典里面元素的值

dic = {"k1":"v1","k2":"v2"}
{k1: "v1", k2: "v2"}
dic
{k1: "v1", k2: "v2"}
typeof(dic)
"object"
for(var item in dic){console.log(item);} #循环的只是键（即索引）
VM4738: k1
VM4738: k2

布尔类型

true

false

条件语句

if(条件) {

}else if(条件) else {}

比较符号	含义
==	比较值相等
！=	不想等（值不想等）
===	比较值和类型都相等
！===	不等于
\|\|	或
&&	且

for循环

1、循环时，循环的元素是索引

a = [11,22,33,44]

for(var item in a){

console.log(item);

}

a = [11,22,33,44]

for(var item in a){

console.log(a[item]);

}

for(var i=0;i<10;i++){}

循环列表

for(var i=0;i<a.length;i=i+1){} 循环列表的方法

定时器：

setInterval("要执行的代码",时间间隔) -- 一直间隔执行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//创建一个定时器
//setInterval("alert(123);",5000);
//上面setInterval是设置一个定时器，没5秒出现一个弹框
function f1(){
console.log("百度招人好牛逼，都把广告弄到浏览器上面了，只有程序员才会打开console这个浏览器的地方")
}
setInterval("f1();",)
</script>
</body>
</html>

setInterval("string/function",时间),setInterval是设置间隔时间，执行前面的程序，string/函数,Interval是间隔

alert() 在浏览器打印消息

console.log()：在console处打印。

>:tag = document.getElementById("i1"); #从网页中所有HTML中查找Id等于("i1")的标签
>:content = tag.innerText #获取标签内部的内容

函数

function 函数名(参数1,参数2) {

}

Dom操作（https://www.cnblogs.com/wupeiqi/articles/5643298.html）

1、找到标签

document.getElementById("id值") id是唯一的，在HTML中

document.getElementsByTagName("div") 获取多个元素，数组形式（列表）

document.getElementsByClassName("c1") 获取多个元素，通过class属性的值（列表）

a、直接查找

方法	作用
document.getElementById	`根据ID获取一个标签`
document.getElementsByName	根据name属性获取标签集合
document.getElementsByClassName	`根据class属性获取标签集合`
document.getElementsByTagName	根据标签名获取标签集合

b、间接查找

获取标签	作用
parentElement	//父亲点标签元素
children	//所有子标签
firstElementChild	//第一个子标签元素
lastElementChild	//最后一个子标签元素
nextElementSibling	//下一个兄弟标签元素
previousElementSibling	//上一个兄弟标签元素

获取节点	作用
parentNode	//父节点
childNodes	//所有子节点
firstNode	//第一个子节点
lastChild	//最后一个子节点
nextSibling	`//` `下一个兄弟节点`
previousSibling	//上一个兄弟节点

2、操作标签

a.InnerText

获取标签中的文本内容

标签.innerText

对标签内部的文本进行重新赋值

标签.innerText = ""

b.className

tag.className=》直接整体做操作

tag.classList 获取class标签集合

tag.classList.add("样式名") 添加指定样式

tag.classList.remove("样式名") 删除指定样式

ps:

function func(){

}

</script>

下面HTML代码是一个弹框点击出现和消失的实现，如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.c1{
position:fixed;
left:;
top:;
right:;
bottom:;
background-color:black;
opacity:0.6;
z-index:;
}
.c2{
width:500px;
height:400px;
background-color:white;
position:fixed;
left:%;
top:%;
margin-left:-250px;
margin-top:-200px;
z-index:;
}
</style>
</head>
<body style="margin:0;">
<div>
<input type="button" value="添加" onclick="showModel();"/>
<table>
<thead>
<tr>
<th>
主机名
</th>
<th>
端口
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td></td>
</tr>
<tr>
<td>1.1.1.2</td>
<td></td>
</tr>
<tr>
<td>1.1.1.3</td>
<td></td>
</tr>
</tbody>
</table>
</div>

<div id="i1" class="c1 hide"></div>
 
<div id="i2" class="c2 hide">
<p><input type="text" /></p>
<p><input type="text"/></p>
<p>
<input type="button" value="取消" onclick="hideModel();"/>
<input type="button" value="确定" />
</p>
</div>

<script>
function showModel(){
document.getElementById("i1").classList.remove("hide")
document.getElementById("i2").classList.remove("hide")
}
function hideModel(){
document.getElementById("i1").classList.add('hide')
document.getElementById("i2").classList.add('hide')
}
</script>
</body>
</html>