JavaScript

Dom

文档对象模型

操作元素标签把网页变成js对象跟增删改查操作

通过document.getElementById 什么什么的对他们的属性进行修改

Bom

浏览器对象模型

操作浏览器

用js 操作浏览器前进后退操作地址栏这些都是

js有三种写入方法

行内内嵌外部

js的三种输出语句

1.alert（）

浏览器弹出警示框

2.console.log（）

浏览器控制台打印的输出信息

3.prompt（）

浏览器弹出的输入框，用户可以输入

为什么需要变量

因为需要存储数据

什么是变量

变量就是一个容器一个盒子

变量的本质是什么

一块空间用来存储数据

1.变量语法的扩展

1.1更新变量

	var name =  'zs'

		name = 'lisi'

1.2声明多个变量

	var name =  ’zs‘,

			age = 18

1.3 声明多个变量

	//只声明不赋值
	var sex;
	console.log(sex)
	//输出 undefined 声明为赋值
	
	//不声明
	console.log(age)
	//会报错

	//不声明直接赋值使用
	qq=110
	console.log(qq)

2.变量交换

//声明一个item变量	
	var a = 2;
    var b = 3;
    var item ;

    console.log("a="+a)
    console.log("b="+b)

    item = a;
    a = b;
    b = item

    console.log("a="+a)
    console.log("b="+b)

数据类型

简单数据类型

1.Number 数字型

// 最大值
console.log(Number.MAX_VALUE)

// 最小值
console.log(Number.MIN_VALUE)

// 无穷大 Infinity
console.log(Number.MAX_VALUE * 2) 
// 无穷小 -Infinity
console.log(-Number.MAX_VALUE * 2) 
// NaN 不是数字型
console.log('张三'-100);

2.Boolean 布尔型 true 和false

3.String 字符型

3.1数字相加字符拼接

	console.log(15+'13');//1513
    console.log(12+12);//24

4.undefined 声明未定义

	var b 
    console.log(b)// undefined

	var a = nudefined
    console.log (a+1)//NaN 不是数值

5. null 空值

数据类型方法总结

isNaN()

	//isNaN() 判断传进来的是否是数字型 是数字型返回false
	//不是数字型就返回true

	 // false
    console.log(isNaN(12));
    // true
    console.log(isNaN("name"));

length

	const a = "123456"
    console.log(a.length);//6

typeof

    var num = 10;
    console.log(typeof num);//number

    var str = '大哥'
    console.log(typeof str);//string

    var falg = true
    console.log(typeof falg);//boolean

    var undi=undefined
    console.log(typeof undi);//undefined

    var nul = null
    console.log(typeof nul);//object

数据类型转换

1.数字转字符串

// 第一种 x.toString()
    var num = 10
    var  str = num.toString()
    console.log(typeof str);

    // 第二种强制转换 toString(x)
    console.log(toString(num))

    // 第三种隐式转换
    console.log(num+'');

2.字符转数字

    // 第一种 parseInt 取整
    console.log(parseInt('10.99'));
    console.log(parseInt('3.11'));
    console.log(parseInt('123px'));

    // 第二种转换 parseFloat
    console.log(parseFloat('10.99'));
    console.log(parseFloat('3.11'));
    console.log(parseFloat('123px'));


    // 第三种转换 Number
    console.log(Number('233.1'))

    // 第四种转换  - * \
    console.log('13'-1)
    console.log('55'-'32');

3.Boolean转换

    // false
    console.log(Boolean(''));
    console.log(Boolean(0));
    console.log(Boolean(NaN));
    console.log(Boolean(null));
    console.log(Boolean(undefined));

    // true
    console.log(Boolean('大哥'));
    console.log(Boolean(12));

逻辑运算符

1.逻辑中断

// 逻辑中断 假的值有 '' 0 NaN null undefined 
//真的有 '大哥' 12
    // 第一个为假返回第一个
    console.log(0&&123);
    // 第一个为真返回第二个
    console.log(12&&123)
    // 第一个为真返回第一个
    console.log(11||aaa)
    // 第一个为假返回第二个
    console.log(0||11)

流程控制

顺序执行

分支结构

if else

Switch

//值与值相匹配	
switch (值) {
        case 值:
        	执行语句
            break;
        case 值:
        	执行语句
            break
            最后执行
        default:
        	执行语句
            break;
    }

循环执行

for

//外面循环一次  里面要全部执行
for (let i = 1; i < 10; i++) {
        console.log('aaaa');
        for (let j = 1; j < 10; j++) {
            console.log('jjjj');
        }
    }

for循环小结

for可以循环重复代码

for循环可以重复执行不同代码

可以执行加减乘除

双重for循环，外层循环一次内层执行全部

先分析再写代码

while

		

		var  i = 1;
        while (i <100){
            console.log('哈喽')
            i++
        }

三元表达式

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

真就返回第一个假就返回第二个

var time = 9
var result = time < 10 ? '0' +time : time
console.log(result)

单词与讲解

1. parseInt 取整
2. parseFloat取浮点数
3. continue 退出本次循环
4. break 退出整个循环

学习JavaScript第一天