一、JavaScript介绍

JavaScript是运行在浏览器端的脚本语言，由浏览器解释执行，简称js
JavaScript能够让网页和用户有交互功能，增加良好的用户体验效果

二、使用方式

1、行内式

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

2、内嵌式

1
2
3

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

3、外链式

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

三、变量和数据类型

1、定义变量

JavaScript 是一种弱类型语言，也就是说不需要指定变量的类型，变量类型由它的值来决定
定义变量格式：var 变量名1=值1,变量名2=值2;

2、JavaScript注释

单行注释：//注释内容
多行注释：/注释内容/

3、数据类型

5 种基本数据类型

1. number ：数字类型
2. string ：字符串类型
3. boolean ：布尔类型
4. undefined ：undefined类型（变量未声明）
5. null ：null类型，表示空对象

1 种复合类型：数组、函数和JavaScript对象

4、变量命名规范

区分大小写
必须是字母、下划线（_）、美元符号（$）、数字
开头不可以使用数字

5、匈牙利命名风格

以变量类型的首字母作为变量开头字母

变量类型	示例
Object（对象）	oDIV
Array（数组）	aItem
String（字符串）	sUser
Integer（整数）	iItem
Boolean（布尔值）	bIsComplete
Float（浮点数）	fPrice
Function（函数）	fnHandle

四、函数定义和调用

1、函数定义

使用关键字 function 定义函数

function 函数名(参数[参数可选]){  
     // 函数的代码实现  
     ...  
 }

2、函数调用

函数名加小括号

1	函数名(参数[参数可选])

五、变量作用域

1、局部变量：在函数内使用的变量，只能在函数内部使用

<script type="text/javascript">
    function myalert()
    {
        // 定义局部变量
        var b = 23;
        ...
    }

</script>

2、全局变量：在函数外定义的变量，可以在不同函数内使用。

<script type="text/javascript">
    // 定义全局变量
    var a = 12;
    function myalert()
    {
      ...
    }
   
</script>

六、条件语句

if 语句：适用于单条件判断
if else 语句：适用于两种条件的判断
if else if else 语句：适用于多条件判断

七、比较运算符

比较运算符	描述
==	等于
===	全等（值和数据类型）
!=	不等于
>	大于
<	小于
>=	大于或等于
<=	小于或等于

八、逻辑运算符

比较运算符	描述
&&	and
\|\|	or
!	not

九、获取标签元素

语法：document.getElementById('标签选择器')

<script type="text/javascript">
    // 页面加载完成执行的函数：windows.onload，当事件触发就会执行设置的函数
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

十、标签元素属性

1、属性的读取

语法：var 变量名 = 标签对象.属性名

大多数属性名在js中的写法与 html 中写法一样

HTML 写法	JS 写法
class	className
style 中带横杠，如font-size	驼峰式，如：style.fontSize

2、属性的设置

语法：标签对象.属性名 = 新属性值

十一、标签元素内容

读取标签元素内容语法：变量名.innerHTML
设置标签元素内容语法：变量名.innerHTML = 元素内容

十二、数组及操作方法

1、数组的定义

语法一：var 数组名称 = new Array(数组内容);
语法二：var 数组名称 = [数组内容];

// 实例化对象方式创建
var aList = new Array(1,2,3);

// 字面量方式创建，推荐使用
var aList2 = [1,2,3,'asd'];

多维数组：指数组的成员也是数组

1	var aList = [[1,2,3],['a','b','c']];

2、数组的操作

获取数组长度：数组名.length
根据下标取值：数组名[下标]
根据下标添加和删除元素：数组名.splice(开始删除的索引,删除的元素个数（可选）,新元素1,新元素 2..)
在最后添加一个元素：数组名.push(数据)
删除最后一个元素：数组名.pop()

十二、循环语句

1、for循环

当条件成立时，while语句会循环执行

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

2、while循环

当条件成立时，while语句会循环执行

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

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

3、do-while循环

不论条件是否成立，都会执行一次do语句

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

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

十三、字符串拼接

字符串拼接使用：+ 运算符
数字和字符串拼接时，会自动进行类型转换（隐式类型转换），把数字类型转成字符串类型进行拼接

十四、定时器

1. 单次定时器

（1）执行函数

函数：setTimeout(func[, delay, param1, param2, ...])
作用：以指定的时间间隔（以毫秒计）调用一次函数的定时器
- 第一个参数 func ：表示定时器要执行的函数名
- 第二个参数 delay：表示时间间隔，默认是0，单位是毫秒
- 第三个参数 param1：表示定时器执行函数的传入参数

<script> 
    function hello(){ 
        alert('hello'); 
    } 

    // 执行一次函数的定时器
    setTimeout(hello, 500);
</script>

（2）对应清除函数

函数：clearTimeout(timeoutID)
- 参数timeoutID：调用 setTimeout 函数时所获得的返回值

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

2. 循环定时器

（1）执行函数

函数：setInterval(func[, delay, param1, param2, ...])
作用：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器
- 第一个参数 func ：表示定时器要执行的函数名
- 第二个参数 delay：表示时间间隔，默认是0，单位是毫秒
- 第三个参数 param1：表示定时器执行函数的传入参数

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

（2）对应清除函数

函数：clearInterval(timeoutID)
- 参数timeoutID：调用 setInterval 函数时所获得的返回值

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

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

</script>

附录-参考资料

W3school-Javascript文档

https://www.w3school.com.cn/js/index.asp

https://www.w3school.com.cn/js/js_htmldom_document.asp