JavaScript

JavaScript

是运行在浏览器端的脚本语言，是由浏览器解释执行的，负责网页和用户的交互。

前端开发三大块：

1. HTML：负责往往也结构
2. css：负责网页页面美化
3. JavaScript：负责网页行为，与用户的交互。

JavaScript的使用方式

1. 行内式

   <input type="button" name="" onclick="alert('ok！');">
   

2. 内嵌式

   <script type="text/javascript">        
       alert('ok！');
   </script>
   

3. 外链式

   首先创建 .js 文件

   src=“文件相对路径”

   <script type="text/javascript" src="js/index.js"></script>
   

JavaScript变量定义和数据类型介绍

1. 定义变量

   JavaScript是一种弱类语言，定义变量需要使用关键字 “var”，一条JavaScript语句应该以“ ；”结尾。

   定义变量名使用：var 变量名 = 值；

   输出变量使用：console.log() / alert()（相当于print）

2. JavaScript注释

   单行注释//

   多行注释/* */

3. 数据类型

   五钟基本数据类型

   1. number数字类型
   2. string字符串类型
   3. boolean 布尔类型 true 或 false
   4. undefined 类型，变量声明未初始化，它的值就是undefined
   5. null类型，表示空对象。
   6. 一种复合型：object 后面学习的数组，函数和JavaScript对象都属于复合类型

4. 匈牙利命名风格

   首字母类型小写缩写 + 变量名

函数定义和调用

1. 函数定义

   使用关键字 function 定义函数。

   格式

   <script type="text/javascript">
       // 函数定义
       function fnAlert(){
           alert('hello!');
       }
   </script>
   

2. 函数调用

   函数名 + （）

3. 定义有参数有返回值的函数

   参数放入小括号

   返回值使用return

变量作用域

1. 全局变量

   函数外使用var 定义

   函数类直接定义

2. 局部变量

   函数内使用var定义的为局部变量

条件语句

if语句

if…else 语句

if…else if…else 语句

1. 比较运算符

   == 等于

   === 全等 （值和类型）

   ！= 不等于

   大于

   小于

   小于等于

   大于等于

2. 逻辑运算符

   && and

   || or

   ！ 取反

获取标签元素

1. 获取标签元素

   decument - getElementById 获取页面上设置了id属性的标签元素

   方法1

   <div id="div1">这是一个div元素</div>
   <script type="text/javascript">
       var oDiv = document.getElementById('div1');
       alert(oDiv);
   </script>
   

   方法2

   <script type="text/javascript">
       window.onload = function(){
           var oDiv = document.getElementById('div1');
       }
   </script>
   

   说明：

   onload是页面所有元素加载完成的事件，给onload设置函数时，当事件触发就会执行设置的函数。

获取标签内容

innerHTML

__innerHTML__可以读取或者设置标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入
        oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
    }
</script>


<div id="div1">这是一个div元素</div>

数组的操作

数组名.push(num)

• 再数组最后添加数据num

数组名.pop()

• 在数组最后删除属性

数组名.split(start,num,element1…elementN)

• start：开始删除元素的索引
• num：删除数组元素的个数
• elementN：在_start_索引位置插入的新元素

此方法会删除从_start_索引开始的_num_个元素，并将_elementN_参数插入到_start_索引位置。

循环语句

1. for循环

var array = [1, 4, 5];

for(var index = 0; index < array.length; index++){
    result = array[index];
    alert(result);
}

2. while循环

var array = [1, 4, 5];        
var index = 0;

while (index < array.length) {
    result = array[index];
    alert(result);
    index++;
}

3. do…while循环

var array = [1, 4, 5];
var index = 0;

do {
    result = array[index];
    alert(result);
    index++;
} while (index < array.length);

说明:

当条件不成立的时候do语句也会执行一次

定时器

js 定时器有两种创建方式：

1. setTimeout(func[, delay, param1, param2, …]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器
2. **setInterval(func[, delay, param1, param2, …]) **：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器
   1. setTimeout函数的参数说明:
      1. 第一个参数 func , 表示定时器要执行的函数名
      2. 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
      3. 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。
   2. setInterval函数的参数说明:
      1. 第一个参数 func , 表示定时器要执行的函数名
      2. 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
      3. 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

清除定时器

• clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
• clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)

clearTimeout函数的参数说明:

• timeoutID 为调用 setTimeout 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout 所设定的定时执行操作。

<script>
    function hello(){
        alert('hello');
        // 清除只执行一次的定时器
        clearTimeout(t1)
    }
    // 执行一次函数的定时器
    t1 = setTimeout(hello, 500);
</script>

clearInterval函数的参数说明:

• timeoutID 为调用 setInterval 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval 所设定的定时执行操作。

<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 重复执行函数的定时器
    var t1 = setInterval(hello, 1000);

    function stop(){
        // 清除反复执行的定时器
        clearInterval(t1); 
    }  

</script> 

<input type="button" value="停止" onclick="stop();">