day06

今天学了什么

1.JavaScript简介

1.简介

A.诞生的背景
1995年网景公司开发的
开发目的:受制于当时的带宽,做表单验证
97年被提交给ECMA,98年获取ISO认证

B.功能
a.数据处理
b.用户交互
c.服务器端开发

2.JavaScript组成

组成.png

3.JavaScript语法

1.注释
//单行注释
/**/多行注释

2.什么是标示符
变量,函数,属性的名字，或者函数的参数。
标示符的命名规则：
a.由字母,数字，下划线(_)或美元符号($)组成
b.不能以数字开头
c.不能使用关键字，保留字作为标示符

3.1 变量

ECMAScript的变量是松散类型
松散类型:可以用来保存任何类型的数据

什么是变量? 从字面上看，变量是可变的量；
从编程角度讲，JavaScript变量是存储数据值的容器。

如何使用:声明 赋值 取值
//var a;使用var关键字进行声明
//= 使用等于号进取赋值
a.变量可以先声明,再赋值
b.也可以声明的同时赋值

4.数据类型的分类

4.1原始类型:

number,string,boolean,undefined,null

a.number

var a =10,b=20.1;

b.string

用单引号或双引号包裹的叫string类型
var c= “hello world”;
var c = 'good';

c.boolean

只有两个值true或false

d.undefined

var a;
一个变量之声明未赋值就是undefined

e.null

1.null值表示一个空对象
2.如果定义的变量准备在将来用来保存对象,那么最好将改变量初始化null而不是其他值
使用typeof操作符来识别基本类型

4.2 引用数据类型:

array,object,function

a.array

a1.声明变量

var arr = [1,2,3,4]

a2.获取数组的长度

arr.length

a3.读取数组的值(数组的下标从0开始)

arr[index]

a4.向数组的末尾添加值

arr[arr.length]=5;

b.object

b1.声明对象

var chengchao = {
name:”chengchao”,
age:20
}

b2.读取变量的属性

console.log(chengchao.name);

c.function

定义:封装特点功能的代码块

c1.声明函数

function a(){

console.log(“hello world”)      

}

c2.调用函数

a();

5.声明提前

在正式执行脚本之前，将所有var声明的变量，提前预读到(当前作用域的)顶部，集中声明创建。
然后再开始执行程序。
***赋值留在本地。
eg:
console.log(a); //undefined
var a=10;

6.typeof instanceof

var a = 1;
console.log(typeof a) //number
var arr = [1,2,3];
console.log(arr instanceof Object) //true

7.全局变量和局部变量

全局变量:在函数外声明的变量
局部变量:在函数内部声明的变量

8.数据类型的转换

8.1自动转换

不需要程序员干预，js自动完成的类型转换
算数计算中的自动转换：

A.算数计算中，数据都默认转为数字，再计算,不能转为数字则为NaN
Boolean类型：true-->1 false-->0
eg:
var a=1;
var b=true;
var c = "hello world";
console.log(a+b); //2
console.log(a-c); //NaN

B.特殊+运算中，碰到字符串，+就变为字符串拼接
另一个不是字符串的数据，被自动转为字符串
比较运算(>,<,>=,<=,==,!=)中的自动转换：
默认将所有类型转为数字再比较
将两个值做比较-->返回值：true、false

8.2强制转换

8.2.1转number

a.非字符串类型转数字

        Number(x)  
        eg：
        var a ="20";
        console.log(Number(a)) //只能识别这样的字符串 

b. 将字符串转为数字：2个API

parseInt(str):
从第一个字符开始依次读取每个数字,只要碰上第一个非数字字符 就停止,自动跳过开头的空字符

         var width="20px";
         console.log(Number(width)) //NaN
         console.log(parseInt(width)) //20  
         parseFloat(str):用法同parseInt
         比较Number()和parseInt()
         var b=true;
         console.log(Number(b)) //1
         console.log(parseInt(String(b))) //NaN          
         parseFloat(str):用法同parseInt 
         比较Number()和parseInt() 
         var b=true; 
         console.log(Number(b)) //1 
         console.log(parseInt(String(b))) //NaN 

8.2.2转字符串

x.toString();
x不是undefined或null时，才可用
String(x)

8.2.3转boolean

Boolean: Boolean(x)
只有5个值转为false：
"" NaN undefined null 0
其余都转为true

9.运算符和表达式

9.1算术运算

+,-,*,/,%,++,--

9.2比较运算

将两个值做比较
返回值：true、false
,<,>=,<=,==,!=
关系运算中：
a. 默认将所有类型转为数字再比较
特殊情况
A.NaN：NaN不等于，不大于，不小于任何值（包括自己）
NaN和任何数据做!=比较时，始终返回true
isNaN(n):本意是判断一个值是否是NaN

10.3逻辑运算：

将多个关系运算综合起来，得出最终结论，返回值:true、false
&& || !

10.4赋值运算：

+= -= *= /= %=

10.5三目运算

var a=(10>4)?10:4；

11.递增

a++和++a;

1.单独使用a都会加一

>eg:
>var a=10;
.a++ 
>console.log(a); //a

2.在表达式中使用

前加加,a自增后运算
后加加,a先运算后自增

var a=10;
var b;
b=a++;
console.log(b) //10;

12.控制语句

1.条件判断

var age = 20;
if (age >= 18) { // 如果age >= 18为true，则执行if语句块
    alert('成年人');
} else { // 否则执行else语句块
    alert('未成年人');
}

2.多行条件判断

Tip:最大的条件放前面

var age = 3;
if (age >= 18) {
    alert('成年人');
} else if (age >= 6) {
    alert('少年');
} else {
    alert('小孩');
}

3.switch结构

多个if...else连在一起使用的时候，可以转为使用更方便的switch结构。

var x = 1;
    switch (x) {
        case 1:
            console.log('x 等于1');
            break;
        case 2:
            console.log('x 等于2');
            break;
        default:
            console.log('x 等于其他值');
    }

13.循环语句

while(){}
eg:
var a=0;
    while(a<=10){
        //只要a<=10为true就一直循环
        console.log(a);
        a++;
    }
for循环
eg:
 for(var i=0;i<=10;i++){
        console.log(i)
    }

for...in...

var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    alert(key); // 'name', 'age', 'city'
}

13.1 break

达到条件,跳出循环

for(var i=0;i<10;i++){
            if(i==5){
                break;
            }
            console.log(i);  //0,1,2,3,4
}

13.2continue

结束本次循环,继续开始下一次

for(var i=0;i<5;i++){
    if(i==2){
    continue;
    }
    console.log(i);  //0,1,3,4
}