JavaScript day01

JavaScript概述

   1.什么是JS
       是一种专门运行于JS解释器/引擎中的解释型脚本语言
   2.JS发展史
       1.1992年CMM(C--),更名为 ScriptEase
       2.1995年LiveScript,更名为 JavaScript
       3.1996年JScript
       4.1997年网景找到了ECMA(欧洲计算机制造商联合会),网景将JS的核心模块交给了ECMA，从此JS的核心更名为ECMA Script,简称 ES

       JS的组成:
           1.核心 - ECMA Script
               包含了JS中最基本的语法规范
           2.浏览器对象模型 - BOM
               Browser Objict Model
               允许JS操作浏览器
           3.文档对象模型 -DOM
               Document Objict Model
               允许JS操作HTML中的内容

2.JS的使用方式(重点)

   1.浏览器控制台中输入代码并执行(测试时使用)
       console.log("要输出的内容");
   2.JS的使用方式
       1.在元素事件中编写JS代码
           事件:是用户在元素上所激发的一些操作
           onclick:当用户点击元素时要做的操作
           语法:
               <ANY onclick="JS执行代码">
               <button onclick="console.log('点你咋的')">点我试试</button>
       2.将代码嵌入在网页的 <script></script>标记中
           在网页的任意位置处，都可以嵌入一个<script></script>标记
           语法:
               <script>
                   JS可执行代码
               </script>
           注意：
               1.一个网页中允许有若干多对 script
               2.script 标记有顺序之分，先写的先被执行
               3.网页加载时就执行
           document.write("<h1>向网页中输出的一句话</h1>")
       3.在网页中，引入外部的JS文件
           1.创建一个js文件(xxx.js),并编写js代码
           2.在网页上对js文件进行引入
               <script src="js文件路径"></script>
               注意:
                   1.script标记必须成对
                   2.在引入的标记中不允许编写其他的js脚本

<body>
    <!-- 在元素事件中执行JS代码 -->
    <button onclick="console.log('点你咋的');">点我试试</button>
    <!-- 2.通过script标记完成JS代码的编写 -->
    <script>
        document.write("向网页中输出的内容")
        document.write("<h1>带标记的内容</h1>")
    </script>
    <!-- 3.引入外部的js文件 -->
    <script src="01-jsBase.js"></script>
</body>

3.JS的基础语法

   1.JS都是由语句组成的
       1.由运算符，关键字或表达式组成
       2.JS总严格区分大小写
           console.log('xxx');正确的
           Console.log('xxx');错误的 C 不能大写
       3.每条语句必须以 ; 表示结束
   2.注释
       单行: //
       多行: /* */

4.JS中的变量和常量

   1.声明变量
       声明:var 变量名;
       赋值:变量名=值;
       声明并赋值: var 变量名=值
       ex:
           var uname="王小明";
           console.log(uname);
           var uname="隔壁老王",uage=35,ugender;
       注意:
           1.声明变量时，尽量使用var关键字，如果省略，也可以，单容易出问题
           2.声明变量如果未赋值的话，默认值为 undefined
           3.使用未声明过的变量的话，则为语法错误
   2.变量名的命名规范
       1.变量名不能是JS中的关键字或保留关键字
       2.由字符，数字，下划线(_)以及$组成
           var $ = 35;
           var _age = 46;
       3.变量中不能以数字开头
       4.尽量不要重复
       5.尽量要见名知意
       6.如无特殊需求的话，尽量使用小驼峰命名法
           var userName;
           强调：
               不能使用 name 作为变量名
   3.变量的使用
       1.为变量赋值
           只要变量出现在赋值符号的左边，一律是赋值操作
       2.获取变量的值
           只要变量没出现在赋值符号的左边一律是取值
           var age=35; //赋值
           console.log(age); // 取值
           var newAge = age; // newAge:赋值，age:取值
           age = age + 35;
   4.常量
       1.什么是常量
           一经声明就不允许被修改的数据就是常量
       2.语法
           const 常量名=值;
           注意:
               1.常量声明好之后是不允许修改的，所以一定要赋初始值
               2.常量通常采用全大写形式

   练习:
       1.创建一个网页,名称随意
       2.声明一个常量PI,值为3.14
       3.声明一个常量r,表示一个圆的半径，随意赋值
       4.通过PI和r计算该圆的周长，并将结果保存在变量l中
           l=2*PI*r
       5.通过PI和r计算该圆的面积，并将结果保存在变量s中
           s=PI*r*r
       6.输出周长和面积
           半径...的圆的周长为...
           半径...的圆的面积为...
       精度丢失:保留到n位小数
           var 1=3.1415926
           l=l.toFixed(n);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS的使用方式</title>
</head>
<body>
    <script>
        const PI=3.14;
        var r=20;
        var l=2*PI*r;
        // 将l保留到两位
        l=l.toFixed(2);
        var s=PI*r*r;
        console.log("半径为",r,"的圆的周长为：",l);
        console.log("半径为",r,"的圆的面积为：",s);
    </script>
</body>
</html>

5.数据类型

   JS中的数据类型可以分为两大类
   1.基本数据类型
       1.number 类型
           数字类型，可以表示32位的整数以及64位的浮点数
           整数：
               十进制：var num=30;
               八进制：var num=010;
               十六进制：var num=0x21;
               注意：以上数字再打印的时候都是按照十进制值进行打印输出的
           小数：
               小数点技术法：var num = 123.456;
               指数计数法：var num = 1.4e10;
       2.string 类型
           字符串类型
           注意：使用时，必须使用 " " 或 ' ' 引起来
           JS中的字符串由Unicode字符，数字，标点组成
           1.查看字符的Unicode码
               var str = "张三丰";
               var uCide = str.charCodeAt(0).toString(16); //5f20
               var uCide = str.charCodeAt(1).toString(16); //4e09
           2.如何将Unicode码转换成对应的字符
               已知Unicode码:5f20
               var str = "\u5f20";
               console.log(str); //张
           3.中文范围
               "\u4e00" ~ "\u9fa5"
           4.转义字符
               \n: 换行
               \t: 一个制表符
               \": "
               \': '
               \\: \
               document.write("Hello<br/>world"); //换行要用<br/>

       3.boolean 类型
           布尔类型，只用于表示真(true)或假(false)
           注意:boolean类型可以参与到数字运算的，true当成1运算，false当成0去运算
           var r = true + 1; // 2
           var r = 3358 * false; // 0
       4.查看数据类型
           使用 typeof()或typeof查看变量的数据类型
           var str = "Hello Word";
           console.log(typeof(str)); // string
           console.log(typeof str); // string
   2.引用数据类型

6.数据类型转换

   1.隐式转换
       大部分加法运算时，如果数据类型不一致的话可以进行隐式转换
       1.数字 + 字符串 : 将数字转换为字符串
           var num = 15; // number
           var str = "18"; // string
           var r = num + str; // 1518
           var r = "15" + 18 + 15; // "151815"
           var r = 15 + 18 + "15"; // "3315"
       2.数字 + 布尔 : 将布尔类型转换为 number
           var r = 35 + true; // 36
       3.字符串 + 布尔 : 将布尔转换为字符串
           var r = "你好" + true; // 你好true
       4.布尔 + 布尔 :
           两个布尔在一起的任何运算都是将布尔先转换为number再做数值的运算
           var t1 = true;
           var t2 = false;
           var r = t1 + t2; // 1
           var r = t1 * t2; // 0
           console.log(r);
       注意：
           如果 -, *, /, % 两端都是数字格式的字符串的话，是可以按照数字的方式进行运算的
               "35" - "48" : -13
               "35" - "你好" : NaN (Not a Number)
   2.显示转换
       1. toString()
           作用:将任意类型的数据转换成字符串，并返回转换后的结果
           var num = 15; // number
           var r = num.toString();

           var num = 15;
           var r = num + ""; // 转换成字符串
       2.parseInt()
           作用：将任意类型的数据尽量转换成整数，如果实在无法转换的话，则返回 NaN
           ex:
               1. var r = parseInt("13");
                   结果 : 13 (number)
               2. var r = parseInt("13.5");
                   结果 : 13
               3. var r = parseInt("13你好");
                   结果 : 13
               4. var r = parseInt("你好13");
                   结果 : NaN
       3.parseFloat()
           作用:尽量将任意类型的数据转换为小数
           ex:
               1. var r = parseFloat("35.7");
                   r : 35.7
               2. var r = parseFloat("35.7你好");
                   r : 35.7
               3. var r = parseFloat("你好35.7");
                   r : NaN
       4.Number()
           作用:将指定的数据转换成数字，只要包含非法字符的话，结果就为 NaN
           ex:
               1. var r = Number("35.7");
                   r = 35.7
               2. var r = Number("35.7你好");
                   r = NaN
       注意：
           只要是在网页中获取的数据，一律都是字符串类型

   练习:
       1.创建网页完成练习
       2.在网页中弹出一个输入提示框
           var input = [window.]prompt("提示文字");
           input 变量中，保存的就是用户输入的数据
       3.在输入框中输入一个数字
       4.将输入的数据 +10 ,打印计算后的结果
       5.根据步骤4输出的结果，使用typeof查看输入数据的数据类型
       6.将输入的数据转换为数字再 +10 查看结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>
<body>
    <script>
        // 在输入框中输入一个数字
        var input = window.prompt("输入一个数字");
        // 将输入的数据 +10 ,打印计算后的结果
        var r = input + 10;
        console.log(r);
        // 查看数据类型
        console.log(typeof(r))
        console.log(Number(input) + 10)
    </script>
</body>
</html>

7.运算符

   1.算术运算符
       +，-，*，/, %，++(自增)，--(自减)
       + : 加法，拼接
       / : 5 / 2 结果: 2.5
       % : 3 % 5 结果: 3
           场合：
               1.倍数或奇偶性
               2.获取某数字的最后几位
                   var num = 1234;
                   var num = parseInt(num / 10);
                   var shi = num % 10;
                   console.log(shi); // 3
       ++:自增运算符，在自身数据基础上只做+1操作
       --:自增运算符，在自身数据基础上只做-1操作
       语法:
           变量++ 或 ++变量
           变量-- 或 --变量

       ++做后缀: 变量++
           要先使用变量的值，再对变量进行自增
           var num = 5;
           // 先输出num的值，再对num+1
           console.log(num++); // 5
           console.log(num); // 6

           console.log(num++);
           等同于
           console.log(num);
           num +=1;

   ++做前缀:++变量
       先对变量进行自增，再使用变量的值
       var num = 5;
       // 先对num进行+1，再打印输出
       console.log(++num); //6
       console.log(num); //6

           console.log(++num);
           等同于
           num +=1;
           console.log(num);

   练习：
        1.
            var num = 5;
            console.log(num++); // 5(输出5 变为6)
            console.log(++num); // 7(变为7 输出7)
            console.log(++num); // 8(变为8 输出8)
            console.log(num++); // 8(输出8 变为9)
            console.log(num); // 9(输出9)

        2.
            var num = 5;
            var result = num + ++num + num++ + num++ + ++num;
                          5  +  (6)6 +  6(7) + 7(8)  + (8)9 = 33

目录