JavaScript

1. 基础

1.1 javaScript 的组成

ECMScirpt(js语法规范)、DOM(文档对象模型)、BOM(浏览器对象模型)

1.2 怎么写css

1. 在html的文件中,script的标签中写js代码
2. js代码可以在html的标签中写
3. 在js文件中可以写js代码,但是需要在html页面中引入script的标签中的src="js的路径"
4. 还可以在控制台直接书写js代码

1.3 注释

单行 // 多行

1.4 变量

//声明变量 var
var age = 18;
var age;
age = 18;

控制台打印函数 console.log()

1.5.1 命名规则

1. 由字母、数字、下划线、$符号组成，不能以数字开头
2. 不能是关键字和保留字，例如：for、while。
3. 区分大小写S

1.5.2 命名规范

1. 变量名必须有意义
2. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

1.6.1 基本数据类型：

隐式类型转化 例如：非纯数字字符串转化为数字类型，其值为NaN。

1. number：

   • 整数：默认十进制

     ? 十进制(整数，小数)、十六进制(0x开头：0xa = 10)、八进制(0开头：011 = 9)

   • 浮点数：浮点数都是近似的，保留几位小数即可

     ? 科学计数法 (5e-5 = 5乘以10的-5次方) 无穷大: infinity 无穷小: -infinity

   • NaN: 数字类型 代表非数字值。isNaN() 用于判断是否为NaN。

2. string："string" 或 'string'

   • length属性：字符串长度
   • 字符串拼接直接加号 'string1'+'string2'(数字加字符串，隐式转换为字符串)

3. boolean：true false

4. undifine：声明但未赋值

5. null：表示空

1.6.2 复杂数据类型：

object:

// 声明
var person = new Object();
person.name = "zark";
//声明对象
var person = {};
person.age = 15;
//另一种声明,多个属性用，隔开
var person = {
    hobby : "jump",
    height : 170
};
//json对象
//格式要求:属性和属性值都加引号(number值除外)
var person = {
    "hobby" : "jump",
    "height" : 170
};        

1.7 数据类型转换

//typeof 函数 查看数据类型
var age = 18;
console.log(typeof age);
// 输出number

1. 转化为数字类型 函数Number()、parseInt()、parseFloat()

   • number()规则：

   ? 十六进制转化为十进制
   ? 空内容转化为0
   ? 非纯数字内容转化为NaN

2. 转化为字符串类型 函数toString()、String()(用于undifined和null)

3. 转化为布尔类型 Boolean()

   • 0 NaN '' undefined null会转换成false，其它都会转换成true。

1.8 运算符

++num与num++的区别：

? ++num是优先自增1，再进行其他运算；num++是先进行其他运算，最后自增1 (* ￣︿￣)

优先级：

? 括号>点运算符>一元运算符> 算数运算符 >关系运算符>逻辑运算符 >赋值运算符

2. 流程控制

2.0 顺序结构

默认从上而下顺序执行

2.1 分支结构

弹出输入框 prompt(), 确认返回输入的值(输入默认为字符串)，取消返回null,参数为提示信息

var age = prompt("input age:");

• if判断

if (200 >= age >= 65) {
    console.log("老年");
} else if (age >= 18) {
    console.log("青年");
} else if (age > 0) {
    console.log("未成年");
} else {
    console.log("输入有误");
}

If语句会把后面的值隐式转换成布尔类型

转换为true ： 非空字符串 非0数字 true 任何对象

转换成false ： 空字符串 0 false null undefined

• 三元运算符

表达式1 ? 表达式2 : 表达式3; 相当于if...else...的缩写

var age = prompt("input age:");
//满足条件执行第一条，不满足条件执行第二条
age >= 18 ? console.log("青年") : console.log("未成年");

• switch...case判断

使用严格比较，数据类型和数值都要相同

var day = prompt("input day(1-3):");
switch (Number(day)) {
    case 1:
        console.log("周一");
        break;
    case 2:
        console.log("周二");
        break;
    case 3:
        console.log("周三");
        break;
    default:
        console.log("输入有误");
        break;
}

2.2 循环结构

• while循环

    var a = 1;
    while (a <= 10) {
        console.log(a);
        a++;
    }

• do...while循环

    var b = 1;
    do {
        console.log(b);
        b++;
    } while (b < 10);

• for循环

    for (var c = 1; c < 10; c++) {
        console.log(c);
    }

新的方法：

document.write("abc"); //在body里写入内容

• continue和break

break:立即跳出整个循环，即循环结束

continue:立即跳出当前循环，继续下一次循环

2.3 调试

弹窗 alert()

断点 debugger

控制台打印 console log()