2021-08-10

Day01–JS笔记

1.认识js：
JavaScript是一种编程语言 它是对网页行为进行编程；
JavaScript就是我们常说的js；
Java和JavaScript的关系：雷锋和雷锋塔的关系；
代码的执行需要js解释器，并不一定是浏览器。
1.JS能增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)
2.js能实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

2.js存在的价值：
一个页面分成三个层：
结构层：HTML
表现层：css 皮囊
行为层：JS 灵魂
1.在用户体验方面、js功不可没；
2.减轻服务器压力：相关的数据验证可以直接在客户端完成，比如手机号验证、密码复杂度验证、邮箱验证等。

3.JS分成三部分：
1.ES：ECMAScript , 简称为ES，称它为语法部分，欧洲计算机制造商协会，制定了一套JS规则，JavaScript 是对这套规则的具体体现;
2.DOM：js高级编程，DocumentObjectModel文档对象模型， 用来操作页面的;
3.BOM：BrowserObjectModel 浏览器对象模型， 用来操作浏览器的;

学前准备

1.如何在HTML页面中引入js：
1.行内----保密（极不推荐）
2.内联----使用script标签里引入js代码
3.外联----使用script标签的src属性引入js文件
内联和外联引入代码如下：

<!-- 内联 -->
    <script>
        console.log("200");
    </script>
    <!-- 外联 -->
    <script src="./js/01-引入js.js"></script>

2.js输出到控制台：
1.每天都要用 主要用于调试，包括进入公司之后：
console.log(“日志”);
2. 一次打印多个数据到控制台：
console.log(‘大聪明’, ‘未知’, ‘21’, [100,200,300],{name:‘大聪明’,age:‘21’,gender:‘male’});
注：前两个非常常用，拿来进行代码调试
3.打印详细信息：
console.dir(new String(‘123’));
注： 第三个常用

以下不常用，了解就行：
console.error(‘打印错误信息’);
console.warn(‘警告信息’);
console.info(‘普通信息’)

3.事件：
事件就是js能够监听到页面上发生的所有的动作
事件三要素：
1.事件源：你操作的动作
2.事件：动作
3.事件处理函数：要做的事情

语法：
事件源.function() {
函数体就是你要做的事情
}
如何拿到页面的标签： document.querySelector(‘选择器[属性=“值”]’)，遇到连接符，去掉连接符，后面的首字母大写。

修改标签的内容：document.querySelector(‘选择器名’).innerHTML
代码如下：

<style>
        .light {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background-color: black;
        }
    </style>
    <div class="light">

    </div>
    <input type="button" value="开关">
    <script>
        // 如何拿到页面的标签 document.querySelector('input[type="button"]')，遇到连接符，去掉连接符，后面的首字母大写
        document.querySelector('input[type="button"]').onclick = function() {
            document.querySelector('.light').style.backgroundColor = '#00f';
            document.querySelector('.light').style.width = '200px';
            document.querySelector('.light').style.height = '200px';

            //修改标签的内容
            document.querySelector('.light').innerHTML = '大聪明';
        }
    </script>

学习js

1.基础语法：
1.JS里面是严格区分大小写的，包括变量、函数名等
2.注释：单行注释（CTRL+/）和多行注释（shift+alt+A ）
3.空格：拿来排版的，对语法没有要求

2.变量及变量的声明
变量是用来缓存数据的
1.使用var（暂时）来声明：variable
2.使用字母、数字、下划线、$来命名，不能使用数字开头，不要使用保留字
3.严格区分大小写
4.命名时一定要见名知意
5.使用的变量必须声明，不然会报错
6.使用=给变量赋值
代码如下：

<script>
        // 见名知意
        var username;
        var userName;
        var user_name;
        var _this;
        var $this;

        var passwdd = '123456';
    </script>

3.变量的类型（JS是弱类型语言，在声明变量的时候不需要指定变量类型）：

3.1基础类型：
1.数字类型：不区分整数、小数、实点数等等，就是number；
（JS不适合进行科学计算，精确度不够）
NaN：Not a Number 不是一个数，但是类型是number；
NaN：和任何值都不相等，包括他自己；
NaN：在和任何数字进行计算时，返回的是NaN；
parseInt：把数字转换成整数。
代码如下：

<script>
        var age = 21;
        console.log(age);
        console.log(typeof(age));

        var num = 22.15;
        console.log(typeof(num));

        // JS不适合科学计算
        var n = 0.2 - 0.1;
        console.log(n);

        var m = 0.3 - 0.2;
        console.log(m);

        var i = 1 * 'abc';//NaN
        console.log(i);
    </script>

2.字符串类型：文本类型
定义：用引号引起来的;
引号：单引号(‘’)、双引号(“”)、反引号(``)；
反引号支持引入变量
定义字符串的时候，使用单引号的情况比较多，是一种习惯
要注意空格和空字符不是一个东西
练习代码：

<script>
        // 定义字符串的时候，使用单引号的情况比较多，是一种习惯
        var username = '大聪明';
        console.log(username);

        // 用引号引起来的就是字符串
        var num = '100';
        console.log(typeof(num));

        var s = ' '//这里是一个空格，不是空字符
        console.log(typeof s);

        var space = '';//空字符  长度是0
        console.log(space);

        var gender1 = "male";
        var gender2 = "female";

        // 如何在单引号里写单引号，在双引号里写双引号 转义：使用反斜杠
        var str = '我是\'大聪明\'';
        console.log(str);

        //反引号  `` 字符模板 （好用  支持可以引入变量）
        var stuname = '大聪明';
        var gender = 'male';
        var $age = 22;
        var mydescript = `我是${stuname}， 性别${gender}，年龄${$age}`;
        console.log(mydescript);

        // 获取字符串的长度  空格和空字符不是一个东西
        var str1 = '50 0 ';
        console.log(str1.length);
    </script>

3.布尔Boolean值：
true
false

<script>
        var b1 = true;
        var b2 = false;
        console.log(b1);
    </script>

4.Undefined：声明的变量没有赋值 undefined typeof 是undefined

5.Null：空 null typeof 是object
Js里面一切皆为对象；
万物皆空 。
代码如下：

<script>
        var b = null;
        console.log(b);
        console.log(typeof b);//null的类型是object

        console.log(null == undefined);//true   值是相等的
        console.log(null === undefined);//false  但是类型是不同的
    </script>

3.2基础类型的特征：
基础变量的值是不可以修改的，改变的是内存的引用地址
例子如下（代码与注释）：

<script>
        var num = 100;//这个100是不能被修改的
        //100占用了内存空间，但是变量不再引用他，会出现浪费内存的情况，js解释器会进行垃圾回收，去检查该内存还有没有被引用，如果不存在引用，有时间就是引用数量为0，就释放内存、GC

        //基础变量的值是不可以修改的，改变的是内存的引用地址
        num = 200;
        console.log(num);
    </script>

3.3引用类型：

1.数组
是一类数据的集合;比如学生姓名、考试成绩等;。
[0，123，4，5];
数组里面的每一个单元我们叫做元素:。
数组本质上是对象，是对象的一种特殊表现；
Arr.length;可以获取数组的长度
数组可分为一维数组、二维数组和多维数组
代码：

<script>
        var arr = ['apple', 'pear', 'banana', 'orange'];
        console.log(arr);
        console.log(arr[3]);
        console.log(typeof arr);//object

        //二维数组
        var arr1 = [[1,2,3],[4,5,6],[7,8,9,[10,12,[13,15]]]];
        console.log(arr1[1][1]);//5
        console.log(arr1[2][3][2][1]);//15
    </script>

2.对象
。
对象用于描述一个事物，JS里面一切皆为对象；
创建对象的方式：
1.var obj1 = new Object();
2.var obj1 = {}
使用点(.)获取属性对应的值，不支持变量
使用[]获取属性对应的值 支持变量 支持表达式
练习代码如下：

<script>
        var obj = {
            name:'大聪明',
            age:18,
            gender:'female'
        };
        //使用点(.)获取属性对应的值
        console.log(obj.name);//不支持变量
        //使用[]获取属性对应的值  支持变量 支持表达式
        console.log(obj[a]);

        var b = 'na';
        console.log(obj[b + 'me']);

        //创建对象的方式
        var obj1 = new Object();//var obj1 = {}
        console.log(obj1);
    </script>

3.JSON格式的数据
本质上就是个对象

<script>
        var result = {
            codde:1,
            error:0,
            data:[{
                title:'望远镜1',
                price:12000,
                sku:80,
                keywords:['天文爱好者', '火星', '精密仪器']
            },{
                title:'望远镜2',
                price:12000,
                sku:80,
                keywords:['天文爱好者', '火星100', '精密仪器']
            },{
                title:'望远镜3',
                price:12000,
                sku:80,
                keywords:['天文爱好者', '火星', '精密仪器']
            }]
        };

        console.log(result.data[1].keywords[1]);//火星100
        console.log(typeof result);
    </script>

4.函数：
函数名后面跟小括号，表示函数的执行；
使用return返回函数的执行结果；
如果没有renturn来返回值，那么他的返回值是undefined；
代码如下：

<script>
        /* sum:函数名
        m,n:形参
        {}里面是函数体 */
        function sum(m,n) {
            return m+n;
        }
        var r = sum(1.,50);
        console.log(r);
        console.log(typeofsum);//function
    </script>

3.4变量类型-类型转换
练习代码及注释如下：

<script>
    //把数字类型转换为字符串
        var a = 100;
        console.log(a);
        console.log(typeof (a.toString()));
        console.log(typeof(a+''));

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

        //字符串转数字
        var str = '100';
        console.log(typeof(Number(str)));//显示的转换
        console.log(typeof (str/1));//隐式转换

        //转换成布尔类型  所有的false情况
        console.log(!!0);
        console.log(!!-0);
        console.log(!!'');
        console.log(!!null);
        console.log(!!undefined);
        console.log(!!NaN);
        console.log(!!false);

        //空数组与空对象指向的是地址
        console.log(!![]);//true
        console.log(!!{});//true
    </script>