一、JS三种书写位置

1、行内式JS

<input type="button" value="点击" onclick="alert('HelloWorld')">

• 可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick

• 注意单双引号的使用，在HTML中推荐使用双引号，JS中推荐使用单引号

• 可读性差，在HTML中编写JS大量代码时，不方便阅读

• 引号易错，引号多层嵌套匹配时，非常容易混淆

2、内嵌式JS

    <script>alert('HelloWorld');</script>

• 可以将多行JS代码写到<script>标签中

3、外部JS文件

<script src="my.js"></script>

• 利用HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观也方便文件级别的复用

• 引用外部JS文件的script标签中间不可以写代码

• 适合于JS代码量比较大的情况

二、注释

1、单行注释

// 单行注释

2、多行注释

快捷键：alt+shift+a

/* 多行注释 */

三、输入输出语句

alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

1、prompt

    <script>prompt("请输入您的年龄");</script>

2、alert(msg)

    <script>alert("请输入您的年龄");</script>

3、console.log(msg)

    <script>alert("请输入您的年龄");</script>

四、变量

1、变量

变量就是一个装东西的盒子

本质：变量是程序在内存中申请的一块用来存放数据的空间

2、变量的使用

（1）、声明变量

var age:	//声明一个名称为age的变量

• var是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

• age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

（2）、赋值

age=10;		//给age这个变量赋值为0

• =用来把右边的值赋给左边的变量空间中

• 变量值是程序员保存到变量空间里的值

（3）、输出结果

console.log(age)

3、变量语法扩展

（1）、更新变量量

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将是最后一次赋的值为准

    <script>var myname = '原值';console.log(myname);myname = '更新值';console.log(myname);</script>

（2）、同时声明多个变量

中间用英文逗号隔开即可

        var age = 18,address = 'LanZhou',tel = 908787;

（3）、声明变量特殊情况

var age;console.log(age);	只声明不赋值	undefined
console.log(age)	不声明不赋值直接使用	报错
age = 10,console.log(age);	不声明只赋值	1

（4）、变量命名规范

• 由字母(A-Za-z)、数字(0-9)、下划线()、美元符号($)组成,如：usrAge，pum01，_name

• 严格区分大小写。var app;和 var App;是两个变量

• 不能以数字开头。18age 是错误的

• 不能是关键字、保留字。例如：var、for、while

• 变量名必须有意义。

• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

五、数据类型

1、变量的数据类型

JavaScript是动态语言，变量的数据类型是可以变化的

    <script>var a = 10,b = 0.123,c = 'abc';</script>

2、数据类型的分类

• 简单数据类型（string、number、Boolean、underfined、null）

• 杂数据类型（object）

number	数字型，包含整数型和浮点型值	0
Boolean	布尔值类型	false
string	字符串类型	""
undefined	声明变量未赋值	undefined
null	声明变量为空值	null

3、获取检测变量的数据类型

    <script>var a = 10,b = 0.123,c = 'abc';console.log(typeof a);</script>

4、字面量

字面量是源代码中一个固定值的表示法

• 数字字面量：8、9、10

• 字符串字面量：”string“

• 布尔字面量：true、false

5、数据类型转换

（1）、转换为字符串

toString()	转换成字符串	var num=1;alert(num.toString());
String()强制转换	转换成字符串	var num=1;alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1;alert(num+"我是字符串")

• toString()和String()使用方法不一样

    <script>//1、把数字类型转换成字符串类型 toString()var num = 10;var str = num.toString();console.log(str);console.log(typeof str);//2、利用String()console.log(String(num));//3、利用 + 拼接字符串的方法实现拼接效果console.log(num + '');</script>

（2）、转换为数字型

parseInt(string)函数	将string类型转换为整数数值型	parseInt('78')
parseFloat(string)函数	将string类型转换为浮点数值型	parseFloat('78,21')
Number()强制转换函数	将string类型转换为数值型	Number('12')
js隐式转换	利用算术运算隐式转换为数值型	'12'-0

举例：

    <script>var age = prompt('请输入您的年龄');//1、parseInt(变量)可以把字符型转换为数字型 得到的是整数console.log(parseInt(age));console.log(parseInt('3.14')); //取整console.log(parseInt('120px')); //120 会去掉px单位console.log(parseInt('EM120px')); //NAN//2、parseFloat(变量)可以把 字符型的转换为数字型 得到的是小数 浮点数console.log(parseFloat('3.14'));console.log(parseFloat('120PX')); //120 会去掉px单位console.log(parseFloat('EM120PX')); //NAN//3、利用Number(变量)var str = '123';console.log(Number(str));console.log(Number('12'));//利用了算术运算实现隐式转换console.log('12' - 0); //12console.log('123' - '120'); //3console.log('12' * 1); //123</script>

（3）、转换为布尔型

Boolean()函数

其他类型转成布尔值

Boolean('true')

• 代表空、否定的值会被转换为false。比如：''、0、NaN、null、undefined 其余值都会被转换为true

    <script>console.log(Boolean('')); //false console.log(Boolean(0)); //falseconsole.log(Boolean(NaN)); //falseconsole.log(Boolean(null)); //fasleconsole.log(Boolean(undefined)); //falseconsole.log(Boolean('123')); //trueconsole.log(Boolean('abc')); //true</script>

六、运算符

1、算术运算符

• +加

• -减

• *乘

• /除

• %取余

2、递增运算符

    <script>//前置递增运算符var num = 0;console.log(++num);//后置递增运算符var age = 0;console.log(age++);</script>

3、比较运算符

    <script>console.log(3 >= 5); //falseconsole.log(2 <= 5); //trueconsole.log(2 = '0'); //赋值console.log(2 == '0'); //判断console.log(2 === '0'); //全等</script>

4、逻辑运算符

    <script>console.log(3 > 1 && 1 < 8); //trueconsole.log(3 > 1 || 1 < 8); //tureconsole.log(!true); //false</script>

七、流程控制

1、顺序流程控制

顺序流程控制是最简单最基本的流程控制，没有特定的语法结构，程序按照代码的先后顺序依次执行

2、分支流程控制

（1）、if 语句

if(条件表达式){//执行语句
}

（2）、if else 语句

if(条件表达式){//执行语句
} else {//执行语句
} 

（3）、if else if 语句

if(条件表达式1){ //执行语句 
} else if(条件表达式2){ //执行语句 
} else if(条件表达式3){//执行语句
} else {//执行语句
}

（4）、三元表达式

语法：

条件表达式 ？ 表达式1：表达式2

举例：

    <script>var num = 10;var result = num > 5 ? '是的' : '不是';</script>

（5）、switch语句

语法：

switch(表达式){case value1://执行语句1break;case value2: //执行语句2break;.......default://执行最后的语句
}

3、循环流程控制

（1）、for 循环

for (var i = 1；i<=100;i++){console.log('string');
}

（2）、双重for循环

for (var i = 1；i<=100;i++){ console.log('string'); for (var k= 1；k<=100;k++){console.log('abc');}
}

（3）、while循环

while(条件表达式){//循环体
}

（4）、do while循环

do {//循环体
} while (条件表达式)

（5）、continue、break关键字

continue关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次）

break关键字用于立即跳出整个循环（循环结束）

八、数组

1、创建数组

• 利用new创建数组

• 利用数组字面量创建数组

    <script>//1、利用new创建数组var arr = new Array();  //创建空的数组//2、利用数组字面量创建数组var Array = [];     //创建空的数组</script>

2、数组元素的类型

数组中可以存放任意类型的数据

var arrStrus = ['小白',12,true,28.9];

3、获取数组元素

    <script>var Array = []; //创建空的数组var arrStrus = ['小白', 12, true, 28.9];console.log(arrStrus);console.log(arrStrus[2]);</script>

4、遍历数组

通过“数组名[索引号]”的方式一项一项的取出来

    <script>var arrStrus = ['小白', 12, true, 28.9];for (var i = 0; i < 4; i++) {console.log(arrStrus[i]);}
</script>

5、数组长度

    <script>var arrStrus = ['小白', 12, true, 28.9];console.log(arrStrus.length);</script>

6、数组新增元素

    <script>//修改length长度来实现数组扩容var arr = ['小白', 12, true, 28.9];console.log(arr.length);arr.length = 5;console.log(arr.length);//修改索引号来实现数组扩容var arr = ['小白', 12, true, 28.9];arr[4] = 'abc';arr[5] = 'def';console.log(arr);</script>

九、函数

1、函数的声明

  <script>//1、利用函数关键字自定义函数（命名函数）function 函数名() {//函数体 }//2、函数表达式（匿名函数）var 变量名 = function() {};var fun = function() { //fun是变量名不是函数名console.log('函数表达式');}</script>

2、函数的使用

先声明函数后调用函数。语法：

function 函数名() {//函数体
}
//调用函数
函数名()；

3、函数封装

函数封装就是八一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

    <script>function getSum() {var sum = 0;for (var i = 1; i <= 100; i++) {sum += i;}console.log(sum);}getSum();
</script>

4、函数的参数

function 函数名(形参1、 形参2....) {   //在声明函数的小括号内是形参           //函数体        
}        
函数名(实参、 实参2....);   //在函数调用的小括号里是实参

举例：

    <script>function getSum(sum) {for (var i = 1; i <= 100; i++) {sum += i;}console.log(sum);}getSum(0);
</script>

5、函数的返回值

    <script>function getSum(sum) {for (var i = 1; i <= 100; i++) {sum += i;}return sum;}console.log(getSum(0));
</script>

6、arguments的使用

arguments是一个伪数组，可以获取传入的参数数量

<script>function fn() {console.log(arguments);}fn(1, 2, 3);
</script>

十、作用域

1、变量的作用域

全局作用域：整个script标签，或者是一个单独的JS文件

局部作用域：在函数内部就是局部作用域，这个代码只在函数内部起作用

2、全局变量和局部变量

• 全部变量在代码的任何位置都可以使用

• 在全局作用域下var声明的变量是全局变量

• 局部变量只能在该函数内部使用

• 在函数内部var声明的变量是局部变量

<script>//1、全局变量var num = 10;console.log(num);function fn() {console.log(num);}fn();//2、局部变量function fun() {var num1 = 10;num2 = 20;}fun();console.log(num2);
</script>

3、作用域链

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值