初识JavaScript

Posted 2021-03-19 文艺小书生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识JavaScript相关的知识，希望对你有一定的参考价值。

一、JavaScript简介

　　javascript是一种轻量级的脚本语言，可以部署在多种环境，最常见的部署环境就是浏览器。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的操作方法。通常JavaScript脚本是通过嵌入在html中来实现自身的功能的。JavaScript具有：（1）学习环境无处不在（2）简单性（3）与主流语言的相似性等特点。

　　1.JavaScript的发展史

- 1995年12月4日 Netscape公司与Sun公司联合发布了JavaScript语言。
- 1996年03月 Navigator 2.0浏览器正式内置了JavaScript脚本语言。
- 1997年07月 ECMAScript 1.0发布。
- 1998年06月 ECMAScript 2.0版发布。
- 1999年12月 ECMAScript 3.0版发布，成为JavaScript的通行标准，得到认可。
- 2007年10月 ECMAScript 4.0版草案发布。
- 2009年12月 ECMAScript 5.0版正式发布。
- 2015年06月 ECMA19:59:27Script 6正式发布。

2.JavaScript核心部分：

　　1、ECMAScript：JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)，ECMAScript是一套标准，定义了一种语言（比如JS）是什么样子。

　　2、文档对象模型（DOM）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。请考虑下面的 HTML 页面：
　　<html>
　　<head>
　　<title>Sample Page</title>
　　</head>
　　<body>
　　<p>hello world!</p>
　　</body>
　　</html>
　　这段代码可以用 DOM 绘制成一个节点层次图：
DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点（getElementById、childNodes、appendChild、 innerHTML）。

　　3、浏览器对象模型（BOM）对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息（screen object），对cookies的支持等等。BOM作为JavaScript的一部分并没有相关标准的支持，每一个浏览器都有自己的实现，虽然有一些非事实的标准，但还是给开发者带来一定的麻烦。

3.JavaScript使用领域：

　　JavaScript使用领域比较广泛，大致总结如下：（1）浏览器的平台化（2）Node.js（3）数据库操作（4）跨移动平台

　　4.JavaScript调试工具：

　　Javascript的调试工具也是极其简单。只要安装了Chrome浏览器，那么在其自带的“开发者工具中“唤醒”控制台” ，就能够随时运行和调试javascript代码。
控制台(console)：代码运行和调试的一个工具，因为开发者可以在这个工具中对整个代码的运行过程进行调控，故形象的被成为控制台。

　　　　控制台唤醒：
　　　　　　　　　　Mac环境下：Option+Command+J
　　　　　　　　　　Windows/Linux环境下：Ctrl+Shift+J
ps:在检查代码的界面中按下esc也能唤醒控制台，只不过这个时候页面样式也存在，会对js的调试产生影响。

二、JavaScript名词解释

1.script标签表示脚本，可以在script标签中编写js代码。另外，通过script的src属性可以引入外部的脚本文件，就好比link标签一样。注意:script标签可以写在html文件的任意位置，但是一般写在body的最后。

2.语句：描述：以分号结尾的表达式称为语句。注意：一般情况下一行就是一个语句【多个语句可以写在一行，但不推荐】例子：var num1=10;

3.变量：描述：其保存的值可以发生改变的量，称为变量。语法：变量一般采用var命令声明：var num;
注意：
　　（1）var num; 称为变量的声明
　　（2）num = 10; 称为变量的赋值【变量在使用之前必须先声明】
　　（3）var num = 10; 称为变量的初始化

补充:（仅作为参考）
创建变量的过程实际就是向系统申请内存的过程
变量赋值的过程，实际上就是内存中放入具体值的过程
console.log(变量名); 　　// 命令能够将变量的值输出到控制台当中【ctrl+shift+j win系统快捷打开控制台】
例子：
　　var myAge;
　　myAge = 19;
　　console.log(myAge);　　　// 将变量myAge 所保存的值，输出到控制台中
　　myAge = 20;
　　console.log(myAge);

三、JavaScript变量命名规则

1.变量的名对大小写敏感

例子：
　　 var num = 10;
　　 var NUM = 20;
　　 console.log(num);
　　 console.log(NUM);

2.变量名以字母或美元符或者下划线开头，并由字母、数字、下划线、美元符任意组合而成【不能以数字开头且不能包含特殊符号】

例子:
　　 var $$$;
　　 var $ $;
　　 var $(abc);

3.不能使用js系统关键字命名变量【不能使用name！！！】

4.变量名一般采用驼峰命名法【首个单词首位小写，其余单词首位大写】

例子：
　　 var schoolStuInfo;

四、JavaScript变量类型

　　1.基本数据类型:描述：JS中有6种数据类型，包含5种数据类型和1种（object）对象类型
　　类型：
    　　 （1）number              数字类型
   　　  （2）string                 字符（串）类型
   　　  （3）boolean             布尔类型
   　　  （4）undefined         未定义类型
   　　  （5）null                    空类型
　　注意：JS中拥有动态类型，变量可以根据【保存的值的类型】不同，而表现为不同类型。
   【typeof 运算符能够查看变量的类型】
　　例子：
    　　　var item;
    　　　//将item赋值为16，并查看此时item的变量类型
    　　　item = 16;
    　　　console.log(typeof item);
    　　　//将item的值更改为true并再次查看item的变量类型
    　　　item = true;
   　　　 console.log(typeof item);

　　2.数字类型number:描述：JS中数字类型可以使用小数点、不使用小数点或伪科学计数法表示
　　例子：
   　　　  var num1 = 3;
   　　　  var num2 = 3.14;
   　　　  var num3 = 314e3;　　// 314e3=314E3
   　　　  console.log(314e3);　　// 结果为314000

　　3.字符（串）类型string:描述：在JS中字符串类型是用来存储字符的类型，可以使用单或双引号定义。
　　注意：字符串在定义的时候，只要写在引号内部即可，但唯一不能写在内部的就是【外部定义时使用的引号】
　　例子：
   　　　  var str1 = ‘‘;　　// 空字符串，不是没有类型！！！
   　　 　 var str2 = ‘a‘;
   　　     var str3 = ‘hello world!‘;
   　　     var str4 = "goodbye world!";
   　　     var str5 = "my name is ‘frank‘!";
   　　     var str6 = ‘my name is "frank"!‘;
    　　    var str6 = "my name is "frank"!";　　// 错误写法！！！

　　4.布尔类型boolean:描述：可以用来判断真假的数据类型
　　类型：true(真),false(假)
　　例子：
    　　    var flag = true;
    　　    var flag2 = false;
    　　    console.log(flag);
   　　     console.log(flag2);

　　5.未定义类型undefined:描述：用来描述当变量的值不确定的时候，变量所表示的类型
　　未定义类型中只有一个值：undefined
　　例子：
       　　 var num;
       　　 console.log(typeof num);　　// 输出结果为undefined

　　6.空类型 null:描述：表示对象为空

五、JavaScript运算符简介

　　1.运算符概述：
　　（1）typeof：描述：用来获取当前变量的类型
　　语法：typeof 变量名
　　注意：尽管看起来不像，但是typeof是一个运算符
　　例子：
    　　   var item = 18;
    　　   console.log(typeof item);
    　　   var item = ‘love‘;
    　　   console.log(typeof item);

　　（2）赋值运算符【=】：描述：在JS中，=号代表的含义是，将等号右面的值赋值给等号左面的变量。
　　注意：=号在JS中绝对不等于数学中的含义
　　强调：使用赋值运算时，变量应写在左面！！！
　　例子：
    　　   var item;
    　　   //15 = item; 　　// 错误写法
   　　    item = 15;

　　（3）判断是否相等运算符【==】 【===】
　　描述：
    　　==【简要比较运算符】表示判断两个变量的值是否相等(忽略变量的类型)，相等返回true
    　　===【标准比较运算符】表示判断两个变量的值是否相同(包括变量的类型),相等返回true
　　例子：
    　　   var item1 = 10;
    　　   var item2 = ‘10‘;
    　　   console.log(item1==item2);　　// true
    　　   console.log(item1===item2);　　// false

　　（4）注释
   　　 a:单行注释：//，写在要加注释代码的末尾处
   　　 b:多行注释：/ *...* /(/* */)，写在要加注释代码的开头位置
    　　c：文档注释：/ ** ...* /,一般写在代码块的前面

　　2.算术运算符
　　类型：+(加法) -(减法) *(乘法) /(除法) %(取余)
　　功能：
    　　(1)基本功能
         　　　var num1 = 3;
         　　　var num2 = 4;

         　　　var sum = num1+num2;
         　　　var cha = num1-num2;
         　　　var ji = num1*num2;
         　　　var shang = num1/num2;
         　　　var quyu = num1%num2;

         　　　console.log(sum);
         　　　console.log(cha);
         　　　console.log(ji);
         　　　console.log(shang);
         　　　console.log(quyu);

    　　(2)特殊功能
        　　+:(隐式转换)
           　　a.如果加号两端有一端不是数字，那么先将数字转换成字符串，然后将两个字符串拼接。
           　　b.如果多个加号同时存在，按照从左到右的计算规则计算
        　　剩下的所有算术运算符：(隐式转换)
           　　a.如果符号两端有一端不是数字，那么先将不是数字的内容转换成数字，然后在进行计算
           　　b.如果不是数字的内容无法转换成数字，则结果是NAN（not a number）
       　　例子：
             　　 var num1 = 10;
             　　 var num2 = ‘abc‘;

             　　 var result = num1-num2;
            　　  console.log(result);
             　　 console.log(typeof result);

    　3.三目运算符 ?:
    　描述：判断表达式的结果，从而根据结果执行不同的语句。
    　语法：表达式1?表达式2:表达式3
    　解释：
    　首先计算表达式1的布尔值，如果是true，那么整个算式的结果是表达式2
                               如果是false，那么整个算式的结果是表达式3
    　例子：
       　　 var num1 = 10;
       　　 var num2 = 100;
       　　 var result = (num1==num2)?‘num1等于num2‘:‘num1不等于num2‘;
       　　 console.log(result);

    　4.JS中对于布尔值的一些隐式规则
    　　　true代表真-------非0即为真
    　　　false代表假-----0为假

　　5.运算符的补充

　　1、算术运算符
　　描述：++(自增运算符)、--(自减运算符)
　　语法：++num、num++、--num、num--
　　功能：对变量本身进行加1或减1
　　例子：
    　　　var num = 10;
    　　　num++;　　// 相当于num = num+1；
    　　   console.log(num);
    　　   num--;　　// 相当于num = num-1；
   　　    console.log(num);
　　注意：
    　　   (1)对于自增自减运算符，如果出现在运算子的前面，则先将自己自增或自减，然后再执行当前语句。
    　　   (2)对于自增自减运算符，如果出现在运算子的后面，则先执行当前语句，执行完毕再自己自增自减。
　　例子：
    　　　var num =10;
    　　　console.log(++num);　　// 先计算本身，再参与语句执行
    　　　console.log(num++);　　// 先参与语句执行，再计算本身
   　　　 console.log(num);

　　2、赋值运算符
　　描述：+=、-=、*=、/=、%=
　　语法：num+=6;
　　解释：表示累加，【num+=6;】相当于【num = num+6;】
　　例子：
    　　　var num = 10;
   　　 　num+=1;　　// num = num+1;  num++;
   　　 　console.log(num);

　　3、比较运算符
　　描述：比较运算符能够根据规则比较两个变量的值，返回一个布尔值，用来表示是否满足规则。
　　类型：==、===、！==、！===、>、>=、<、<=
　　例子：
    　　　var num1 = 15;
    　　　var num2 = 30;
    　　　var num3 = ‘15‘;
    　　　console.log(num1==num3);
　　思考：数字能够比较大小，那么字符串能不能比较呢？如果能，怎么比较呢？
　　【js中字符串间的比较是按照位次优先，比较各字符的ASCII码大小，包括数字字符串之间的比较。】
　　例子：
　　　　1.console.log("1"<"3");　　// true 
　　　　2.console.log(‘5‘<‘10‘);　　// false  
　　　　3.console.log("123"<"123");　　// false
　　　　4.console.log("abc"<"aad");　　// false

　　补充：
    　　　var item1 = undefined;
    　　　var item2 = null;
    　　　console.log(item1==item2);
    　　　console.log(item1===item2);　　// false
    　　　console.log(undefined===undefined);
    　　　console.log(null===null);

　　4、布尔运算符
　　描述：&&(与)、||(或)、!(非)
　　语法：
  　 　　(1)&&与运算符：(表达式1)&&(表达式2);
      　　 运算符两端表达式结果均为true的时候，整个表达式为true，有一个为false，则整个结果为false
        　  　　var num1 = 15;
        　  　　var num2 = 30;
        　  　　var result = (num1>5)&&(num2<50);
       　　　　console.log(result);

    　　 (2)||或运算符：(表达式1)||(表达式2);
            运算符两端表达式任一结果为true的时候，整个表达式为true，两者皆为false，则整个结果为false
        　　　var num1 = 15;
        　　　var num2 = 30;
        　　　var result = (num1>5)||(num2>50);
        　　　console.log(result);

   　　 (3)!非运算符：！(表达式)
           表达式结果为true，则整个表达式结果为false；
           表达式结果为false，则整个表达式结果为true；
        　　　var num1 = 15;
       　　　 var result = ！(num1>5);
           　　console.log(result);

　　5、运算符优先级（截取常用部分）
    　　初等单目一二级   //初等指的是()
    　　乘除取余加减移
    　　关系等于不等于
    　　...

以上是关于初识JavaScript的主要内容，如果未能解决你的问题，请参考以下文章

Java初识方法

初识OpenGL 片段着色器(Fragment Shader)

VSCode自定义代码片段12——JavaScript的Promise对象

30秒就能看懂的JavaScript 代码片段