初识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为假

posted on 2019-12-28 01:41 文艺小书生阅读(234) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

初识JavaScript

导航

公告