JavaScript（一）

一、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); //12
        console.log('123' - '120'); //3
        console.log('12' * 1); //123
    </script>

（3）、转换为布尔型

Boolean()函数

其他类型转成布尔值

Boolean('true')

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

    <script>
        console.log(Boolean('')); //false 
        console.log(Boolean(0)); //false
        console.log(Boolean(NaN)); //false
        console.log(Boolean(null)); //fasle
        console.log(Boolean(undefined)); //false
        console.log(Boolean('123')); //true
        console.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); //false
        console.log(2 <= 5); //true
        console.log(2 = '0'); //赋值
        console.log(2 == '0'); //判断
        console.log(2 === '0'); //全等
    </script>

4、逻辑运算符

    <script>
        console.log(3 > 1 && 1 < 8); //true
        console.log(3 > 1 || 1 < 8); //ture
        console.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:
      //执行语句1
      break;
    case value2: 
      //执行语句2
      break;
  	.......
    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、作用域链

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