HTML5学习——第十三天

01-js的基本概念

         js:支持面向对象的跨平台脚本语言

            1.脚本语言: 依赖于其他语言才能执行 - 依赖于html才能执行,js是嵌套在html中脚本功能

            2.跨平台: 可以在不同的平台上运行, windows linux mac ios 安卓

            3.支持面向对象: 使用面向对象的思想进行js代码的编程

   

        js的应用场景:

            1.表单验证: 对用户输入的数据进行验证,验证通过后进行数据的提交

            2.网页特效: 轮播图/放大镜/点击缩放/动画

            3.游戏开发: 2维平面下的小游戏为主, 4399小游戏,贪吃蛇/推箱子/飞机大战.....

            4.物联网: 门禁/摄像头监控/自动售货机....

            5.网页开发/app/小程序...

        js的组成

            ECMAScript   DOM    BOM

            ECMAScript: 语法标准

            DOM: 操作HTML文档

            BOM: 操作浏览器

        js的书写方法:

            内联式

            外联式

            行内式

02-js的输出方式：

js的输出方式

// 1.以弹窗形式输出:alert('文本')
// alert('你好世界')
// 应用场景:登陆成功.失败/删除成功.失败/用户名被占用

// 2.以文本式输出:document.write(123456)
// document.write('你好世界')
// 应用场景: 通常给body添加内容

// 3.可以输入内容的弹窗:prompt('文本')
// prompt('请输入金额:')
// 应用场景: 给表单添加内容,表格添加内容

//4. 询问用户是否确认此操作:confirm('文本') 
// confirm('是否确认此操作');
// 应用场景: 敏感操作:进行支付,确认和取消 删除操作:确认删除,取消删除

// 5.在浏览器的控制台中输出:console.log()
// console.log('你好控制台');
// 应用场景:在开发过程中,调试代码使用,不会影响代码的整体运行效果

// alert('测试')

03-变量:

        

// 变量的概念: 存储数据的容器,处在内存中,一个变量就是在电脑内存空间中存储数据的一个小的内存空间

// var 变量名字

// 变量名的命名规则:字母 数字 下划线 美元符号组成,不能是数字开头,不能是用关键字当做变量名

// = : 赋值符号,作用:把等号右边的数据放到等号左边的变量空间中

// 定义变量: var a  a = 100  简写->  var a = 100

// 可以一次性定义多个变量,变量与变量之间用逗号,隔开

// 定义变量未赋值,返回undefined(空)

// var a
// a = 100
// var b
// b = 200
// var c
// c = a + b

// console.log(c);

// var a = 300
// var b = 200
// var c = a + b
// console.log(c);

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

04-数据类型:

        数字(number): 整数,小数,负数,0  1 3.14 -2 0

        字符串型(string): 用单引号或者双引号包裹的任意字符

        布尔型(boolean): 代表事物的真与假 true(真)  false(假)

        未定义型(undefined): 定义变量未赋值

        对象(object): 一个数据集合体 [1,2,3,4,5] {name:'张三',age:18} null

05-数字类型的数据:

// 1.不同进制之间的数字
/* 
八进制:由八个数字组成,01234567,没有一个单独的数字表示8
十进制:由十个数字组成,0123456789,没有一个单独的数字表示10
十六进制:由0123456789,ABCDEF组成,没有一个单独的数据表示16
*/
// var a = 012
// var a = 0x11
// console.log(a);

// 2.科学计数法
// var num = 3e+5 //3乘以10的5次方
// var num = 3e-5 //3乘以10的-5次方
// console.log(num);

// 3.数值范围
// 运算的最大值
// console.log(Number.MAX_VALUE);
// 运算的最小值
// console.log(Number.MIN_VALUE);
//无穷大 Infinity
// console.log(1 / 0);
//无穷小 -Infinity
// console.log(-1 / 0);



// 1.NaN
// var a = 'abc'
// var b = 123
// var c = a - b
// console.log(c);

/* 
NaN : not a number,表示一个非数字的特殊值

注意事项:
    1.NaN的类型是number类型的,表示一个非数字
    2.NaN不等于任何值,包括NaN自己
    3.通过isNaN判断数据是否为数字,返回false的时候,表示是一个数字,返回true的时候,表示不是一个数字
*/

// var a = 'abc'
// var b = 123
// var c = a - b
// console.log(c == c);
// console.log(typeof c);
// console.log(isNaN(a));//true
// console.log(isNaN(b));//false


// 2.小数
// console.log(0.1 + 0.2);
// console.log(0.2 + 0.3);
// console.log(0.1 + 0.7);
// console.log(0.2 + 0.2);

//解决方法:
//1.根据小数点后面的位置数,乘以对应的整数,最终在除以这个整数
// console.log((0.1*10 + 0.2*10) / 10);
//2.使用toFixed(数字),方法来强制保留小数点后几位
// var a = 0.1 + 0.2
// console.log(a.toFixed(1));

06-字符串类型的数据:

        字符串类型的数据:

            单引号 ''

            双引号 ""

            单引号中可以放双引号,双引号中可以放单引号 . 两者均不可以放置自身

            \:转意符号 - 把引号的特性去除掉变成普通的引号

            ``:

                1.支持换行书写文本内容

                2.支持解析变量的功能

            document.write 可以输出html标签,单独的字符串可以通过+拼接成一个更大的字符串

        输出的内容中有一方是字符串类型的数据 + 运算的时候,另一方会悄悄变成字符串,在进行拼接

07-对象类型的数据：

        对象类型的数据:

            [] : 数组

            {} : 对象

            null : 空

08-运算符：

/* 
1.算数运算

+ - * / %(余数)

*/
// console.log(1 + 2);
// console.log(1 - 2);
// console.log(1 * 2);
// console.log(10 / 2);
// console.log(20 % 3);

/* 


2.关系运算

> < >= <= ==等于 ===全等 !=不等于 !==不全等

==相等:判断符号两边的值是否相等,不看数据的类型

===全等:先判断符号两边数据的类型时候相等,不相等直接返回false,相等的话,继续比较数据是否相等

关系运算的结果之后两种情况, true  false

*/
// console.log(3 > 2);//true
// console.log(3 < 2);//false
// console.log(3 >= 2);//true
// console.log(3 <= 2);//false
// var a = 1
// var b = '1'
// console.log(a == b);//true
// console.log(a != b);//false

// console.log(a === b);//fasle
// console.log(a !== b);//true



/* 
3.赋值运算

+= : 自己先加之后,再赋值给自己
-= : 自己先减之后,再赋值给自己
*= : 自己先乘之后,再赋值给自己
/= : 自己先除之后,再赋值给自己
%= : 自己先求余之后,再赋值给自己

*/

// var a = 5
// a = a + 1
// a += 1

// a = a - 2
// a -= 2

// a = a * 3
// a *= 3

// a = a / 5
// a /= 5

// a = a % 3
// a %= 3

// console.log(a);

9-逻辑运算:

        

/* 
逻辑运算:

    &&(与,并且) 左右两边的结果均为true的时候,最终才是true,否则就是false

    ||(或者) 左右两边只要有一个为true,最终的结果就是true,两边都是false的时候,最终结果才为false

    !(非,取反) 将true处理成false  将false处理成true

*/

// 模特招聘: 要求年龄在18以上 并且 年龄在30以下.  小红:20岁
// var age = 20
// var result = age > 18 && age < 30
// console.log(result);

// 小红打算嫁给小明. 小明:身高在160以上,或者 你有100000块钱的陪嫁. 小红:身高-155 陪嫁-200000
// var height = 155
// var money = 90000
// var result = height > 160 || money > 100000
// console.log(result);


// var height = 155
// var money = 90000
// var result = !(height > 160 || money > 100000)
// console.log(result);

10-自增自减运算:

/*  
++ 自增

当++放在变量后面的时候,先输出,或者先赋值之后,在自增

当++放在变量前面的时候,先自增,在输出或者赋值

当--放在变量后面的时候,先输出,或者先赋值之后,在自减

当--放在变量前面的时候,先自减,在输出或者赋值

注意:自增或者之间运算的时候需要使用变量,不能直接拿数字进行自增或自减

*/

// var a = 1
// a++
// ++a
// console.log(a);

// var a = 1
// console.log(a++);//1
// console.log(a);//2

// var b = 1
// var c = b++
// console.log(c);//1
// console.log(b);//2


// var d = 2
// console.log(++d);
// console.log(d);

// var e = 2
// var f = ++e
// console.log(f);
// console.log(e);

// var a = 1

// console.log(a++ + a++);
// console.log(a);
/* 
            1 此时的a=2  +
            2 此时的a=3
*/

// console.log(a++ + ++a);
// console.log(a);
/* 
            1 此时a=2  +
            3 此时a=3
*/

// console.log(a++ + a++ + ++a);
// console.log(a);
/* 
            1 此时a=2  +
            2 此时a=3  +
            4 此时a=4
*/

// console.log(++a + a++ + ++a + a++);
// console.log(a);
/* 
            2 此时a=2  +
            2 此时a=3  +
            4 此时a=4  +
            4 此时a=5
*/


// var a = 5

// console.log(a--);
// console.log(a);

// var b = 3
// var c = b--
// console.log(c);
// console.log(b);

// console.log(--a);
// console.log(a);

// var d = 2
// var c = --d
// console.log(c);
// console.log(d);

// var a = 5

// console.log(a-- + --a);
// console.log(a);
/* 
            5 此时a=4  +
            3 此时a=3
*/

// console.log(a-- + a-- + --a + --a);
// console.log(a);
/* 
            5 此时a=4  +
            4 此时a=3  +
            2 此时a=2  +
            1 此时a=1
*/

// console.log(a++ + a-- - ++a - --a);
// console.log(a);

/* 
            5 此时a=6  +
            6 此时a=5  -
            6 此时a=6  -
            5 此时a=5
*/

// console.log(3++);