JavaScript(简称js)

一js 的作用

1 JS可以实现web网页上经常见到的动画效果。

2 JS可以进行简单的人机交互

3 JS 可以在前台页面上实现数据验证【数据验证一般放在后端，更安全】

JS 就是可以用来操作web 标准中的前二者： JS操作HTML 、 JS操作CSS 。

主要功能: 1.各种轮播图, 2,各种Tab菜单栏 3.各种动画交互 4.表单验证

二 js的语法

<script type=”text/javascript”>

    // 在这个标签对中书写 js 代码

</script>

三 JS常见功能

JS是一门编程语言，所以它的里面会存在一起定义好的 ” 人【对象】 “，这些个 ” 人 “的身上都会有一些现成的功能，属性…. 我们把这些功能称之为函数，在我们需要实现某一个功能的时候直接去调用相应的函数即可【 函数名( 参数 ) 】

1 用JS实现提示框(alert)

    在JS中,不会出现覆盖情况,而是延迟执行.

2 用JS实现带输入的提示框(prompt)

prompt() 小括号里面可以设置二个参数，中间用逗号隔开。第一个表示标题，第二个表示输入框中的默认文字。

3 confirm(): 选择框，输入一个标题，用户可以选择确定取消

四JS查找功能

JS 和 HTML本身来说是二种不同的语言，因为想用 JS 操作HTML，所有就定义了一套标准（DOM标准），在这套标准中定义可以在 js 中通过 document这个” [对象] “来操作整个HTML 。

document.getElementById( “id名” );

01 document 表示整个HTML文档。

02 ” . “—-> 表示” 的”的意思，表示后面的功能属于前面的对象。

03 get Element By Id : 通过ID名称来获取某一个元素，具体ID名需要放在引号中。

Console.log( );

这个是一个现代浏览器提供给开发人员用来测试JS代码的地方。它的小括号里可以写任何 JS 中合法的数据。

修改元素样式

每一句话后面都要有分号！.

五 JS变量

变量就是一个容器，在程序语言中会用变量来存放各种各样的数据。

1 变量的定义: 利用关键字 var 变量名;

2 变量的赋值：在JS中 赋值操作就是 “单等” 号，将右边的值赋在左边。 Var username = “值”;

3 变量的使用：定义完变量之后，如需使用只需要将变量名拿过去即可。

六js变量命名规则：

1 不能用数字开头，但是可以用一些特殊字符（ $ ^ !… ）

2 不能用纯数字或者中文进行变量命名

3 不能用关键字（ var for functio if else break…. ）或者保留字( class 、 name )来命名

4 建议使用驼峰命名法同时做到 见名知意

七 js操作HTML

这里的HTML 指的是某一个标签下面的 子标签或者标签中的文字内容。需要借助的属性就是 innerHTML

八 JS 事件操作

JS有一个很大的特点可以通过事件驱动编号：当****事件发生的时候就可以去做****事情。

01 事件源：可以简单的理解为事件发生在哪个元素的身上。

02 事件类型：当前发生的是什么事件（ JS中有很多种事件 ）

03 事件操作：就是当事件发生的时候的我们需要做的事情（ 其实就是一个函数【功能】 ）

oLi.onclick = function(){

    // 在function 的大括号中书写事件发生时要做的事情

}

九 JS常用事件类型

原生JS中的事件都是以 on 开头，表示当***的时候。

01 onclick :表示单击事件

02 ondblclick: 表示双击事件

03 onmouseenter( onmouseover ) :鼠标移上事件

04 onmouseleave( onmouseout ): 鼠标离开

Enter leave 是一对 ，over out 是一对。

十 JS的书写位置

JS和 CSS 类似，可以写在html 文件中、标签里、也可以新建一个外部JS文件

01： 外链的JS就是新建一个**.js 文件，然后需要直接写JS代码，此时不可以再写 script 标签，最后在 html 的页面中通过 script 标签里的 src 属性，引入到当前页。

<script src=”.js（文件路径）” ></script>

script标签一旦具有了 src 属性之后就不能再做为 JS 的执行环境使用。

02： 写在行间的JS 代码已经很少用，并且也只有事件操作才能这样简写

<button onclick=” alert( ‘文字’ ) “></button>

单引和双引在使用的时候可以互相嵌套。但是不能双引套双引 单引套单引

总结：上面的三种JS书写位置，并不存在严格先后执行顺序，它们遵循代码从上向下一行一行执行的标准。先写的先执行，但是行间是最后执行的，因为它里面的事件需要用户触发才会执行。

十一 JS入口函数

如果直接将JS代码写在了 html 结构之前。那么就需要等到当前结构加载完之后才能用JS来操作这些HTML，否则报错为 null 表示没有这些个元素。这时就需要一个属性：

Window.onload = function(){

    // 当页面加载完成之后执行

十二 JS操作标签属性（ 类名 ）

Class也是标签的属性，所以JS 中提供了一个属性来操作它

oTxt.className = ” 新类名 “;

clasName的确可以用来操作标签的类名，但是它是一个覆盖而不是追加的过程，它会将之前的类去掉。

十三 JS数据类型

JS中为了方便管理数据可以将它们分为五种类型

01 字符串型： 只要是被包裹在引号里的都是字符型。用 string 表示

02 数值型： 就是阿拉伯数字 9 0 2 3… 用 number 表示

03 布尔值： 该类型只有二个值，true 和 false 分别表示 真和假 用 boolean表示

04 未定义型： 该类型只有一个值，undefined ,同样也是用 undefined 表示

05 对象型 ： 它是一个复合数据类型，可以由其它基本数据构成。 用 object 表示，里面有一个特殊值 null 表示空对象。

十四 数据类型相关

01 parseInt() ： 可以尝试将非数值转为数值，规则就是从左向右开始遇到第一个不能转为数值的字符截断。

02 parseFloat: 和上面类似，但是一般用来转化小数，只能识别一个小数点。

03 NaN ： not a number 在JS中表示当前值不是一个数字

04 typeof() ：可以检测出某一个变量是哪种数据类型。会返回对类型的单词

05 write() ：可以向页面中写入一些类容，和innerHTML区别在于它不会覆盖之前内容。

十五 函数基础

函数就可以理解为一个可以多次调用达到重复使用的代码块。利用关键字 function 来定义。

Function 自定义函数名称( 参数 ){

    // 1 这个大括号之间的区域称之为函数内部

    // 2 在它里面可以书写的具体功能代码

}

1 function 是一个关键字，浏览器用来解析JS的部分只要看到了 function 就明白这里是要声明一个函数。

2自定义函数名和变量的命名规范类似。

3 小括号里面放置的是函数的参数，可以是一个或者多个，多个之间用逗号隔开。

4定义完一个函数之后如果不调用，那么就没有任何效果

十六 函数的使用

有了函数之后就可以通过 函数名() 小括号的形式直接调用。而且函数还可以设置参数。

Function fn( num1,num2,num3 ){

    Alert( num1+num2 );

}

以上语法就是定义了一个带参数的函数，在定义的时候设置了三个形式上的参数 num1 num2 num3, 然后在函数的内部只使用的了二个 num1 num2

Fn( 10,10 );

在这里调用这个函数，调用的时候传入了二个实际的参数。分别对于 num1 num2 ,这个时候在函数的内部就可以使用他们了。

十七 JS条件判断语句

1 单分支

If( 条件 ){

    条件成立时执行语句

}

 

2 双分支

If( 条件 ){

    条件成立执行

}else{

    条件不成立执行

}

3 多分支

If( 条件1 ){

    条件1成立时执行

}else if( 条件2 ){

    条件2成立时执行

}….else{

    

    所有条件都不成立时执行

}

十八 条件判断语句使用细节

01 在有多个条件需要判断时要将最难满足的条件放在最先写。

02 if 后面的小括号中放置的是条件，条件成立走if大括号，不成立走 else大括号

03 不论小括号里面写的是什么条件，最终都会被传化为布尔型，true 表示真，条件成立 false 表示假条件不成立

04 条件可以是任意JS中存在的数据类型 ，它的表现上可以是完整的表达式，也可以是一个变量，或者一个数值…..

05 真: 非0数字，非空字符串 假：数字0 、空字符串、undefined 、null

十九 运算符

01 数学运算符： + – * / %（取膜）

+ 号在使用的时候如果左右二边有一方为字符串那么整体表示字符串连接

% 号 表示求余数（ 10 % 3===》1 10%5===》 0 ）

02 比较运算符： > < >= <= == ===

== 号只需要左右二边的值相等就可以了。

=== 号需要值和数据类型都必须相同

03 逻辑运算符： ||（或） &&（且） !（非）

|| : 可以用来连接多个条件，只要有一个条件为真则整体返回 true

&&: 可以连接多个条件，只要有一个为假则返回 false

! : 表示取反操作， 不论它的后面写什么数据，在它眼里都是布尔型，然后将此时的布尔值进行取反操作 !false == > true

04 自增写法

a++ —-> a = a+1

a+=2 —–> a= a+2

二十 循环语法

For( 变量初始化; 循环条件; 循环变量自增 ){

    // 循环体：只要循环条件还成立就会不停执行的代码

}

01 变量初始化就是 var 去定义一个变量，同时赋一个值。

02 循环条件一般就是一个比较表达式。

03 自增就利用 ++ 语法，当然也可以让每循环一次就加多个

04 执行的顺序：初始化—判断条件–>成立就执行循环体—>变量自增—>判断条件—->成立—》….. 【 如果某次条件不成立则跳出循环，如果条件永远成立称之为死循环，不要这么做。 】

05 如果在循环的外部去访问循环变量，得到的是最后一次条件不成立时候的变量值。

二十一 数组语法

数组也是一个用来存放数据的容器，只不过这个容器和变量比可以一次存多个值。规则就是相当于给一个大盒子分成了很多个小盒子，然后在每个小盒子中存放相应的数据。同时JS会自动的给这些个小盒子进行编号。编号从0开始。

Var arr = [ 值1,值2，值3……. ];

01 数组可以存放多个值，多个值之间用逗号隔开，最后一个不要加。

02 所存的值可以是任意JS中出现的数据类型。

03 需要用到数组中某一个数据值的时候只需要通过 数组名[编号] 语法

常用的数组属性和方法

01 length ： 可以得到某一个数组的长度值

02 push() : 可以从末尾向数组中添加一个或多个数据，多个之间用逗号隔开

03 pop() : 可以从末尾删除数据，每次只能删一个

二十二 随机数获取

在JS中有一个本来就存在的对象 Math ,它管理了JS中所有的数学相关操作，例如：随机数、四舍五入、圆周率…….其中随机数就是 Math.random() 这个方法可以获取到从0-1之间的随机小数，手册说明这个小数可以取到0但是取不到1 。

获取一个从0-9之间的随机正整数的方法：

Math.parseInt( Math.random()*10 )

二十三 通过标签名获取元素

document.getElementsByTagName( “div” )

上面获取到的结果是一个集合，类似于数组。