Javascript基础（一）之JavaScript(JS) 概述、JS 基础语法、变量和常量(重点) 、数据类型

我不是女神ヾ 2022-07-11 07:47 229阅读 0赞

1、JS 概述  
1、什么是JS  
JS：Javascript，是一种运行于JS解释器/引擎中的解释型脚本语言

JS解释器/引擎：
            JS的运行环境，有以下两种
            1、独立安装的JS解释器(NodeJS)
            2、嵌入在浏览器内核中的JS解释器
        解释型：
            编译型：运行程序前，会先将其编译，并且能够检查语法错误
            解释型：直接将代码交给解释器运行，无需编译
    
    
        PC，平板，手机，机顶盒全部支持JS
    2、JS的发展史
        1、1992年时，开发了一款脚本语言 - ScriptEase,可以嵌入在网页中的脚本语言
        2、1995年，Netscape(网景)为Navigator2.0 浏览器设计了一款脚本语言LiveScript,更名为 JavaScript
        3、1996年，Microsoft在IE3.0中发布了一款JavaScript的克隆版本，称为 JScript
        4、1997年，JavaScript1.1 提交给了 ECMA(欧洲计算机制造商协会)，各个厂家合力推出 ECMA-262的标准,并且将核心定义为ECMAScript
    3、JS的组成
        完整的JS是由三部分组成：
            1、JS核心(ECMAScript)
            2、文档对象模型(DOM,Document Object Model)
                W3C定义的规范,允许Javascript能够与网页进行交互
            3、浏览器对象模型(Browser Object Model)
                允许JavaScript能够与浏览器进行交互
    4、JS的特点
        1、JS编写简单
        2、无需编译
        3、弱类型语言
            由数据 决定 数据类型
        4、面向对象
    5、JS用途
        1、面向客户端的JS
            1、客户端的数据计算
            2、表单输入的验证
            3、事件的触发和处理
            4、网页特效制作
            5、服务器的异步数据提交(AJAX)
        2、面向服务器端的JS
            1、分布式运算
            2、实时服务器
            3、窗口应用
            4、网络应用

2、JS 基础语法  
1、使用JS  
1、浏览器内核  
内核主要负责页面的渲染  
内核主要由两部分组成  
1、内容排版引擎  
解析HTML/CSS  
2、脚本解释引擎  
解释JS

浏览器    内核     排版引擎      解释引擎
            IE        Trident     -          Chakra
            Firefox   Gecko       -          Monkey系列
            Safari    Webkit    Webcore      Nitro
            Chrome    Webkit    Webcore      V8
            Opera     Presto      -          Carakan
            Opera     Webkit    Webcore      V8
            (2013~)   
        2、搭建JS运行环境
            1、独立安装的JS解释器
                要求：安装NodeJS
                开始-> 搜索输入 cmd
                操作：向控制台中输出一句话
                console.log("你好世界!");
                console.log('Hello World');
            2、嵌入在浏览器内核中的JS解释器
                1、直接在浏览器Console中输入脚本并执行
                2、将JS脚本嵌入在HTML页面中执行
                    1、通过 html 元素事件
                     onclick 事件 ：在鼠标单击时要执行的操作
                     <button onclick="JS脚本"></button>
                     <div onclick="JS脚本"></div>
                     ...
                     <ANY 事件名称="JS脚本"></ANY>
                    2、在<script>标记中 编写JS脚本
                        <script>
                            document.write("<h1>Hello</h1>");
                        </script>
    
                    3、使用外部脚本文件，编写JS脚本
                        1、创建脚本文件
                            ***.js
                            编写JS脚本
                        2、在使用的页面中引入JS文件
                            <script src="文件URL"></script>
        3、JS调试
            代码出现问题，结束本块运行，但不会影响后续块
    2、语法规范
        1、语句-会被JS解释器所执行的代码
            由表达式、关键字、运算符组成
            严格区分大小写(重要)
            每条语句都由 ; 表示结束
            中英文符号：
                1、, 和 ，
                2、. 和 。
                3、; 和 ；
                4、: 和 ：
                5、" 和 “
                6、() 和 （）
        2、注释
            单行注释：只能注释一行内容
                语法：//
            多行数值：一次性注释多行内容
                语法：/* */

3、变量 和 常量  
1、变量  
1、什么是变量  
内存：保存程序运行过程中所需要用到的”数据”  
空间：  
位 ：bit 8bit = 1byte  
字节：byte 1024byte = 1kb  
千字节：kb 1024kb = 1mb  
兆字节：mb 1024mb = 1gb  
G : gb 1024gb = 1tb  
T : tb

变量：表示的就是内存中的一段存储空间
                    生活中：
                        1、宾馆的房间
                        2、超市储藏箱
                变量值：保存在变量中的数据
                变量名：标识数据在内存中的名字
    
        2、变量的声明
            到内存中 声明一段空间，并且起个别名再保存数据
            语法：
                1、声明变量
                    var 变量名; 
                2、为变量赋值
                    变量名=值;
    
                简写：
                    var 变量名=值;
                3、一条语句声明多个变量
                    var 名1,名2,...,名n;
                    ex:
                        var stuName="张三丰",age=18,gender,score;
        3、变量名的规范
            1、不允许使用JS的关键字或保留关键字
            2、允许包含字母、数字、下划线(_)以及$
                var stuName;正确
                var $stuName;正确
                var stu-name;错误，不能出现 -
            3、不能以数字开头
                var 1name;错误
                var name1;正确
            4、不能重复
            5、尽量见名知意
                var a;
                var b,c,d,e,f,g;
    
                var studentName;
            6、推荐使用 "匈牙利命名法","驼峰命名法","下划线命名法"
                驼峰命名法：
                    1、变量名由一个单词组成，采用全小写
                    2、变量名由多个单词组成，第一个单词采用全小写，其余的每个单词首字符变大写
    
                    var studentName;
        4、变量的使用
            1、未经初始化的变量
                1、变量声明之后，没有被赋值就直接使用
                    var stuName;
                    console.log(stuName);
                    结果为：undefined
                2、变量未被声明过，而直接使用
                    console.log(stuAge);
            2、声明变量不使用var
                在JS中，允许声明变量时不使用var关键字
                如果省略var关键字，声明的就是"全局变量"
                但，并不推荐此写法
                stuGender="男";
                console.log(stuGender);
            3、可以对变量进行存取操作
                1、设置变量的值-存值操作(SET操作)
                    将数据保存在变量中
                    特点：只要变量出现在赋值符号(=)的左边，一律是存执操作
                        var stuName="张三丰";
                        stuName="张无忌";
                        var newName=stuName;
                2、获取变量的值-取值操作(GET操作)
                    将数据从变量中取出来使用
                    特点：只要变量"没"出现在赋值符号的左边，一律都是取值操作
                        var stuAge=18;//存值操作
                        console.log(stuAge);//在控制台上打印输出stuAge的值
                        document.write(stuAge);//在页面上打印输出stuAge的值
                        var newAge = stuAge;
                            针对newAge 是存值操作
                            针对stuAge 是取值操作
                        stuAge = stuAge + 10;
                         存值     取值
    
                        套餐名:香辣鸡腿堡套餐
                        汉堡：香辣鸡腿堡
                        配餐：烤翅
                        饮料：可乐
    2、常量
        1、变量与常量
            变量：是一个可以变化的数据
            常量：是一个不能变化的数据
            常量的特点：
                在程序中，一旦被声明好，在程序运行过程中就不允许被修改
        2、语法
            const 常量名=值;
            注意：
                1、声明常量时必须赋值
                2、通常，常量名称采用全大写形式(规范)
        3、练习
            声明一个变量 用来 保存一个圆的 半径值
            计算 该圆的周长，并打印输出 2*π*半径
            计算 该圆的面积，并打印输出 π*半径*半径

4、数据类型  
1、作用  
决定了数据在内存中所占的空间大小  
2、数据类型分类  
1、原始类型(基本类型)  
1、number类型  
数字类型  
可以表示32位的整数，也可以表示64位的浮点数  
整数：32位空间(4字节)  
浮点数：小数，64位空间(8字节)

整数：
                    1、保存十进制数字
                        由0-9共10个数字组成，逢10进1
                        var age = 35;
                    2、保存八进制数字
                        由0-7共8个数字组成，逢8进1
                        JS中，八进制数字值，由0开始
                        var num=010;
                    3、保存十六进制数字
                        由0-9，A-F 共 16个数字组成，逢16进1
                        JS中，十六进制数字，由0x开始
                        var num=0x10;
                浮点数：
                    小数
                    支持小数点计数法：35.5,76.8,31.00004
                    支持指数记录法：4.3e2
            2、string类型
                字符串类型
                表示一系列的文本字符
                由Unicode字符，数字，标点符号组成的序列
                    Unicode : 编码方式之一，可以由一组十六进制的数字(Unicode码)来表示一个字符。
                每个字符在计算机内存中，占2个字节
    
                如何查看字符的Unicode码？？？
                字符.charCodeAt(); 十进制表示方式
                字符.charCodeAt().toString(2); 二进制
                字符.charCodeAt().toString(16);十六进制
                张：24352(十进制)
                张：0101111100100000(二进制)
                张：5f20(十六进制)
    
                如何将 Unicode码 转换为字符？？？
                使用 \u 将 十六进制的Unicode码转换为字符
                var str = "\u5f20";
    
                中文汉字的范围：
                从 \u4e00 开始  到  \u9fa5 结束 
    
                string在声明的时候需要使用"" 或 '' 引起来
                    var num1 = 456;//number
                    var num2 = "456";//string
    
                特殊字符需要转义:
                    ex：
                        想在字符串中 打印输出 ""
                    \n : 换行
                    \t : 一个制表符
                    \" : "
                    \' : '
                    \\ : \
            3、boolean类型
                布尔类型
                在程序中只表示真 或 假 的状态值(条件中用的多)
                该类型 仅有两个值 
                    true ：真
                    false ：假
                在实际运算中true当做1运算，false当做0运算
            4、undefined
                语义：访问的数据不存在
        2、引用类型