概述：

　　JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分(通俗的讲就是浏览器)，广泛用于客户端的脚本语言，最早是在（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript 组成:

　　核心（ECMAScript）：ECMAScript 描述了该语言的语法和基本对象；　　文档对象模型（DOM）：DOM 描述了处理网页内容的方法和接口；　　浏览器对象模型（BOM）：BOM 描述了与浏览器进行交互的方法和接口；

<table style="height: 30px; background-color: #afeeee; width: 1266px; ; width: 1266px;" border="0"><tr>
<td>二、代码存在形式和位置</td>

</tr></table>

1、存在形式：

js文件形式和嵌入到html中：

2、JavaScript代码存放位置

HTML的head中
HTML的body代码块底部(推荐)

由于HTML代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

1、变量声明

JavaScript变量声明一般使用var，如果不使用var则表示全局变量，一次性声明多个变量使用逗号隔开。

@H_502_34@

2、区分大小写

与python一样，变量test和变量TEST是不同的。

3、变量命名规则

第一个字符必须是字母、下划线（_）或美元符号（$）
余下的字符可以是下划线、美元符号或任何字母或数字字符
除了上面两条规则，以下关键字不能作为变量名

@H_502_34@

4、注释

单行注释以双斜杠开头（//）多行注释以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）

单行多行 @H_502_34@

分类：

原始类型(5种)：

number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的

对象类型：

数组（arry）
“字典”
时间（date）
......

1、数字（number）

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

转换：

parseInt(..) 将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN

特殊值：

NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。

a=1; b=2.2; @H_502_34@

更多数值计算：

Math.E
常量e，自然对数的底数。

Math.LN10
10的自然对数。

Math.LN2
2的自然对数。

Math.LOG10E
以10为底的e的对数。

Math.LOG2E
以2为底的e的对数。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

静态函数

Math.abs( )
计算绝对值。

Math.acos( )
计算反余弦值。

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。
@H_502_34@
View Code
@H502_34@

2、字符串（string）

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。

name="wd" age=String('jack'); @H_502_34@

常见功能：

获取子序列 obj.slice(start,end) 切片 obj.toLowerCase() 大写 obj.toUpperCase() 小写 obj.split(delimiter,limit) 分割 obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效) obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。 obj.replace(regexp,replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&内容； $`：位于匹配子串左侧的文本； $' @H_502_34@

3、布尔类型

布尔类型仅包含真假，与Python不同的是其首字母小写。

假 @H_502_34@

4、null和undefined

@H_502_34@

1、数组

数组与python中列表类似，常见的方法有：

obj.push(ele) 尾部追加元素
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.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
@H_502_34@

1、算术运算符

赋值 y = 5,以下表格将向你说明算术运算符的使用：

二、赋值运算

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

3、字符串运算

+ 运算符， += 运算符可用于连接字符串。

给定 text1 = "Good ", text2 = "Morning", 及 text3 = "",下面的表格解释了字符串运算符的使用：

4、比较运算

比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等。

给定 x=5,下表展示了比较运算符的使用：

5、条件运算

variable = boolean_expression ?，就把 true_value 赋给变量；如果它是 //示例
var iMax = (a > 3) ? 3 : 4;//输出4
@H_502_34@

6、逻辑运算

逻辑运算符用来确定变量或值之间的逻辑关系。

给定 x=6 and y=3,以下实例演示了逻辑运算符的使用：

7、位运算

位运算符工作于32位的数字上。任何数字操作都将转换为32位。结果会转换为 JavaScript 数字。

1、条件语句

JavaScript中支持两个中条件语句，分别是：if 和 switch

}</span><span style="color: #0000ff;"&gt;else</span> <span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt;(条件){

}</span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt;{

}</span></pre>

@H_502_34@
<div class="cnblogs_code">

 1代码块 1
         2代码块 2
        代码
        与  1 和  2代码
}
<span style="color: #008000;">//<span style="color: #008000;">例子

<span style="color: #0000ff;">switch<span style="color: #000000;">(name){

<span style="color: #0000ff;">case '1'<span style="color: #000000;">:

age = 123<span style="color: #000000;">;

<span style="color: #0000ff;">break<span style="color: #000000;">;

<span style="color: #0000ff;">case '2'<span style="color: #000000;">:

age = 456<span style="color: #000000;">;

<span style="color: #0000ff;">break<span style="color: #000000;">;

<span style="color: #0000ff;">default<span style="color: #000000;"> :

age = 777<span style="color: #000000;">;

}

@H_502_34@

2、循环语句

for语句

names = ["wd","tony","rain"for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}

//第二种
var names = ["wd","rain"];

for(var index in names){
console.log(index);
console.log(names[index]);
}
@H_502_34@

for语句循环数组和字典：

a={"name":"wd","age":22 ( index console.log(a[index]); //列表循环，循环的是index（下标）
var names = ["wd","rain"];
for(var index in names){
console.log(index);
console.log(names[index]);
}
@H_502_34@

while语句

} @H_502_34@

七、函数语法：

函数名(参数1,参数2) { 代码块 } @H_502_34@

分类：

普通函数
匿名函数
自执行函数

1.普通函数

'123' @H_502_34@

2.匿名函数：无函数名

setInterval("wd"500)函数无名字 @H_502_34@

3.自执行函数：创建函数并且自动执行，因为加了括号。

@H_502_34@

4.使用return：与python类似函数中使用return可使函数停止并且得到返回值

@H_502_34@

1、序列化

JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化

2、转义

decodeURI( ) 解码URl中未转义的字符和中文
decodeURIComponent( ) 解码URI组件中的未转义字符
encodeURI( ) 转码URI中的转义字符和中文
encodeURIComponent( ) 转码转义URI组件中的字符和中文
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出

URL="https://www.sogou.com/web?query=马云" new_url="https://www.sogou.com/web?query=%E9%A9%AC%E4%BA%91"new_url=encodeURIComponent(URL)
结果：
"https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3D%E9%A9%AC%E4%BA%91"

var a="wd"
var b=escape(URL)
结果：
"https%3A//www.sogou.com/web%3Fquery%3D%u9A6C%u4E91"
var b=unescape(URL)
结果：
"https://www.sogou.com/web?query=马云"
@H_502_34@

3、eval

JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。

eval()
EvalError 执行字符串中的JavaScript代码

代码块的错误。
错误
自定义错误

代码错误 } @H_502_34@

<tr>
<td>九、javaScript作用域</td>
</tr></table>

JavaScript作用域归纳为以下几点：

1、javaScript采用函数作为作用域（同python）,无块级作用域，let关键字除外。

(1==1 name='wd'输出wd

function fun() {
if(1==1){
var name='wd'
}
}
fun();
console.log(name);#报错

@H_502_34@

2.函数作为一个作用域，如果出现函数嵌套函数，则就会出现作用域链。

    name = "wd" name = "seven" name = "jack"输出jack

如上述代码则出现三个作用域组成的作用域链，如果出现作用域链后，那么寻找变量时候就会出现顺序，对于上述实例：

当执行console.log(name)时，其寻找顺序为根据作用域链从内到外的优先级寻找，如果内层没有就逐步向上找，直到没找到抛出异常。

@H_502_34@

3.JavaScript的作用域在被执行之前已经创建，后续再去执行时只需要按照作用域链去寻找即可。

示例1：

name = "wd" name = "seven"=输出seven上述带代码中作用域链为：全局--》Func函数 --》inner函数当执行res=Func（）时候，执行函数Func，变量name值为seven，此时解释器解释到inner函数，跳过，执行return inner，将inner内存地址赋值res，在执行res（）相当的于执行inner，按照作用域链，先找inner函数得name变量，如果没有，再找Func函数有无name变量，如果没有再去寻找全局有无name变量，所有结果输出seven @H_502_34@

示例二：

name = 'wd'function Func(){
var name = "eric";
function inner(){

    console.log(name);
}
name </span>= 'jack'<span style="color: #000000;"&gt;;
</span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; inner;

}

var res = Func();
res();
// 输出结果： jack
按照示例一分析，解释器从上到下解释，执行函数Func，name变量得值由eric变成jack，最后再去寻找name变量时候，name值为jack，所以输出jack
@H_502_34@

示例三：

name = 'wd'function Func(){
var name = "seven";

</span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; Bar;

}

var res = Func();
res();//输入wd
@H_502_34@

4.JavaScript中变量都是声明提前，即使不为变量赋值也不会报错，默认在不赋值变量得时候解释器会给变量赋值为undefined。

//JavaScript中如果创建值而不赋值，则该值为 undefined，如：
var name;
console.log(name);
// 输出：undefined

//在函数内如果这么写：
function Foo(){
console.log(name);
var name = 'seven';
}

Foo();
// 输出：undefined

//总结：上述代码，不报错而是输出 undefined，其原因是：JavaScript的函数在被执行之前，会将其中的变量全部声明，而不赋值。所以，相当于上述实例中，函数在“预编译”时，已经执行了var name；所以上述代码中输出的是undefined
@H_502_34@

<tr>
<td>十、javascript中的词法分析</td>
</tr></table>

上面说了javascript的作用域，其实我们也可以利用词法分析来验证javascript中的作用域

什么是词法分析？解释：JavaScript代码自上而下执行，但是在js代码执行前，会首先进行词法分析，所以事实上，js运行要分为词法分析和执行两个阶段。

词法分析步骤：

分析形参
分析变量声明
分析函数声明
如果存在函数嵌套，则从外往内进行词法分析

具体步骤如下：

在函数执行前的一瞬间，生产 Active Object（活动对象），下面简称AO；

第一步：

函数接收形式参数，添加到AO的属性，并且这个时候值为undefine,即AO.age=undefine
接收实参，添加到AO的属性，覆盖之前的undefine

第二步：

如果上一步分析参数中AO还没有age属性，则添加AO属性为undefine，即AO.age=undefine
如果AO上面已经有age属性了，则不作任何修改

第三步：函数的声明

分析函数声明！如 function age(){}

如果AO上没有age属性，则把函数赋给AO.age属性
如果AO上有age属性，则会直接覆盖，把函数赋给AO.age属性（）

示例代码：

@H_502_34@

词法分析解释上述分析过程：

第一步：分析形参

　　形式参数：AO.age = undefined　　接受实参，覆盖掉undefined：AO.age = 5

第二步:分析var变量声明

　　由于AO.age已经存在，所以不做任何操作：AO.age=5

第三步：分析函数声明

　　此时函数声明刚好是age，所以覆盖掉之前的age属性，即此时OA.age=function age() {console.log(age)}

代码运行：

　　词法分析完毕后得到AO.age=function age() {console.log(age)},然后运行代码执行函数，第二行代码age输出 ƒ age() { console.log(age); }；

　　第三行代码，22赋值给age，此时age=22，故第四行代码输出22；

　　继续运行到第五行代码发现是函数，不运行，跳过；

　　运行第八行代码，此时age值为22，故输出22；

代码时应注意函数表达式不做任何操作，且只声明变量没赋值时，age仍然等于AO.age。

</tr></table>

在JavaScript中也支持面向对象编程，面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！但JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值，其中的属性或方法都有一个名字，根据这个名字可以访问相映射的值（值可以是基本值/对象/方法）。

1.声明和实例化

person= 代码创建了 Object 类的一个实例，并把它存储到变量 oObject 中，如果构造函数无参数，括号则不是必需的。因此可以采用下面的形式重写上面的一行代码： person = //为对象设置属性(属性可以是值或者方法)
var person= new Object();
person.name="wd";
person.age="22";
person.GetName=function(){
return this.name;
}
var myname=person.name;
console.log(myname)
@H_502_34@

函数将创建的过程封装，大致经历如下步骤：

创建过程经历四步：

创建一个对象
将函数的作用域赋给新对象（因此this指向这个新对象，如：person1）
执行构造函数的代码
返回该对象

方法来实现，可以传递参数，但主要缺点是无法识别对象类型，函数来完成的。

person = ==== person; person1 = createPerson('jack',22,'python'); person1.showName() @H_502_34@

函数的方式创建对象

.name =.age =.job =.getName = = Person('liuyao','age','job' @H_502_34@

采用构造函数（与普通函数一样，只是用它来创建对象），定义对象类型（如：Person）的属性和方法。它与工厂方法区别在于：

没有显式地创建对象
直接将属性和方法赋值给this对象；
没有return语句；

为什么会有原型（prototype 属性）：上面创建对象时候，每次新创建对象的时候每个对象都保留了getName方法，这使得每个对象都有了自己单独的方法，这就意味着会增加内存的开销，为了解决这种方式，从而引入了原型。

使用原型（prototype）创建的方法是共享的，其原理是将对象方法存储在同一个指针地址中。

下面采用函数/原型方式

.color =.doors =.mpg =.drivers = Array("Mike","John"Car.prototype.showColor = function() {
alert(this.color);
};

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

oCar1.drivers.push("Bill");

alert(oCar1.drivers); //输出 "Mike,John,Bill"
alert(oCar2.drivers); //输出 "Mike,John"
@H_502_34@

把对象的所有引用都设置为 null，可以强制性地废除对象。例如：

TIPS：废除对象的所有引用时要当心。如果一个对象有两个或更多引用，则要正确废除该对象，必须将其所有引用都设置为 null。

person = person = null;//废除对象
@H_502_34@

关键字 this 总是指向调用该方法的对象，类似于python中的self，列如：

person = = "wd"= person.GetName(); //输出 "wd"，这里person调用了GetName函数，alert中的this指代person，输出为person.name，当然值输出为“wd”
@H_502_34@

<tr>
<td> 十二、javascript正则以及字符串处理</td>
</tr></table>

1、定义正则表达式

/.../ 用于定义正则表达式
/.../g 表示全局匹配
/.../i 表示不区分大小写
/.../m 表示多行匹配

JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)

pattern = /^Java\w*/ text = "JavaScript is more fun than \nJavaEE or JavaBeans!"=== pattern.exec(text) @H_502_34@

注：定义正则表达式也可以 reg= new RegExp()

2、正则表达式提供的方法

test(string) 检查字符串中是否和正则匹配，返回true或false

n = 'uui99sdf'= /\d+/--->

//只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$
@H_502_34@

exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。

获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。

//非全局模式
// 获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）
var pattern = /\bJava\w*\b/;
var text = "JavaScript is more fun than Java or JavaBeans!";
result = pattern.exec(text)

</span><span style="color: #0000ff;"&gt;var</span> pattern = /\b(Java)\w*\b/<span style="color: #000000;"&gt;;
</span><span style="color: #0000ff;"&gt;var</span> text = "JavaScript is more fun than Java or JavaBeans!"<span style="color: #000000;"&gt;;
result </span>=<span style="color: #000000;"&gt; pattern.exec(text)

//全局模式
// 需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
var pattern = /\bJava\w*\b/g;
var text = "JavaScript is more fun than Java or JavaBeans!";
result = pattern.exec(text)

</span><span style="color: #0000ff;"&gt;var</span> pattern = /\b(Java)\w*\b/<span style="color: #000000;"&gt;g;
</span><span style="color: #0000ff;"&gt;var</span> text = "JavaScript is more fun than Java or JavaBeans!"<span style="color: #000000;"&gt;;
result </span>= pattern.exec(text)</pre>

@H_502_34@

3、其他字符串操作

obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效) obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部 obj.replace(regexp,replacement) 内容；内容； @H_502_34@

1.跑马灯示例：

使用setInterval定时器定时拼接字符串

@H_502_34@ @H_502_34@

2.模态对话框

使用position将页面分层实现

Meta Title 主机名 ip 端口 app230 10.0.0.230 80 app231 10.0.0.231 80 添加" 添加框

</form>
</div>
<script>
function addHost() {
document.getElementById('a1').style.display="block";
document.getElementById('a2').style.display="block";

}
function canCle() {
document.getElementById('a1').style.display="none";
document.getElementById('a2').style.display="none";
}
</script>
</body>
</html>
@H_502_34@
View Code
@H502_34@

3.全选反选取消应用