JavaScript 系列博客（一）

时间：2021-11-25 19:29:30

JavaScript 系列博客（一）

前言

本系列博客为记录学习 JavaScript 的学习笔记，会从基础开始慢慢探索 js。今天的学习笔记主要为 js 引入、定义变量以及 JavaScript 中数据类型和数据类型之间的转换。

引入 JavaScript

什么是JavaScript 语言？

JavaScript 是一种轻量级的脚本语言。所谓的‘’脚本语言‘’，指的是它不具备开发操作系统的能力，而是只用来编写相关应用程序的‘’脚本‘’，使用场景最多的是浏览器中。

JavaScript 也是一种嵌入式语言。本身的核心语法不算很多，只能用来做一些数学和逻辑运算。JavaScript 本身不提供任何与 I/O相关的接口，都要靠宿主环境提供，所以 JavaScript 只适合嵌入更大型的应用程序环境，去调用宿主环境提供的接口。比如和浏览器的交互。

从语法角度看，JavaScript 语言是一种‘’对象模型‘’语言（Object Models）。各种宿主环境通过这个模型，描述自己的功能和操作接口，还支持其他编程范式（比如函数式编程）。

JavaScript 的核心语法非常精简，只包括两个部分：基本的语法构造（比如操作符、控制结构、语句）和标准库（一系列的具体对象类型，比如 Array、Date 等）。除此之外，各种宿主环境提供额外的接口（即只能在该环境使用的接口），以便 JavaScript 调用。以浏览器为例，他提供个额外接口分为三大类。

  1. 浏览器控制类：操作浏览器
  2. DOM 类：操作网页的各种元素
  3. Web 类：实现互联网的各种功能

如果宿主环境是服务器，则会提供各种操作系统的接口，比如文件操作接口，网络通信接口等。

JavaScript 与 Java的关系

其实我很早就知道 JavaScript 和 Java 了，开始也很纳闷它们之间的关系，这里详细介绍一下。

JavaScript 的基本语法和对象体系，是模仿 Java 设计的。但是JavaScript 没有采用 Java 的静态 类型。正是因为 JavaScript与 Java 有很大的相似性，所以这门语言从一开始的 LiveScript 改名为 JavaScript。基本上，JavaScript 这个名字的原意是‘’很像 Java的脚本语言‘’。

JavaScript 语言的函数是一种独立的数据类型，以及采用基于原型对象的继承链。这是它与 Java 语法最大的两点区别。JavaScript 语法比 Java 要*的多。（约束少了，问题也会多起来）。

除此之外，Java 语言需要编译，而 JavaScript 语言则是运行时由解释器直接执行。

JavaScript 与 ECMAScript 的关系

1996年8月，微软模仿 JavaScript 开发了一种相近的语言，取名为JScript（JavaScript 是 Netscape 的注册商标，微软不能用），首先内置于IE 3.0。Netscape 公司面临丧失浏览器脚本语言的主导权的局面。

1996年11月，Netscape 公司决定将 JavaScript 提交给国际标准化组织 ECMA（European Computer Manufacturers Association），希望 JavaScript 能够成为国际标准，以此抵抗微软。ECMA 的39号技术委员会（Technical Committee 39）负责制定和审核这个标准，成员由业内的大公司派出的工程师组成，目前共25个人。该委员会定期开会，所有的邮件讨论和会议记录，都是公开的。

1997年7月，ECMA 组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript。这个版本就是 ECMAScript 1.0 版。之所以不叫 JavaScript，一方面是由于商标的关系，Java 是 Sun 公司的商标，根据一份授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 已经被 Netscape 公司注册为商标，另一方面也是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

ECMAScript 只用来标准化 JavaScript 这种语言的基本语法结构，与部署环境相关的标准都由其他标准规定，比如 DOM 的标准就是由 W3C组织（World Wide Web Consortium）制定的。

ECMA-262 标准后来也被另一个国际标准化组织 ISO（International Organization for Standardization）批准，标准号是 ISO-16262。

在 HTML 中引入 js

在之前学习 css 中有三种引入 css 的方式，那么也有三种引入 js 的方式。

  • 行间式
<div id="ddd" onmouseover="this.style.color ='red'" onmouseleave="this.style.color = 'blue'">这是行间式 js 的 div</div>

特点：

  1. 行间式代码块书写在一个个全局事件名属性中，没有 script 这样的一个全局属性；
  2. 在某一个标签的某一个事件属性值中，出现的 this 代表该标签；
  3. 该标签对象 this 可以访问该标签的任意全局属性。
  • 内联式
<script>

    ddd.style.backgroundColor = 'pink'

</script>

特点：

  1. 可以通过标签的 id（唯一标识），在 js 代码块中访问到该标签（js 选择器）；
  2. js 代码块中语法采用的是小驼峰命名法，属性的值都是用字符串形式进行复制；
  3. js 属于解释型语言，加载顺序会影响执行结构。
  • 外联式
<script src="js/01.js">

	// 被屏蔽掉的代码块

    ddd.style.fontSize = '100px';

</script>

特点：

  1. 通过 script 标签的 src 数据连接外部 js 文件；
  2. 使用外联的 script（拥有 src 属性）标签，会屏蔽掉标签内部的 js 代码块；
  3. 在 js 的任意地方，均有 this对象，this 对象不指向任何标签时，指向的是 window 对象。

在 js 中定义变量

四种定义变量的方式

语法: 关键词 变量名 = 变量值

num = 10; // 省略关键词, 定义的为全局变量, 在任何位置定义, 在任何位置都可以访问, 但不建议使用

var num = 10; // var关键词, 无块级作用域, 定义在块级作用域中的变量, 外界也可以访问

let num = 20; // let关键词, 有块级作用域, 定义在块级作用域中的变量, 外界无法访问

const NUM = 30; // const关键词,有块级作用域, 定义在块级作用域中的变量, 外界无法访问, 且变量的值不能再被二次修改, 所以为常量

/* 产生块级作用域的方式

{

    直接书写

}

if语句可以产生

while语句可以产生

for语句也可以产生

*/

// 函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问

// ES5 | ES6

// 是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法

命名规范

// 命名规范

// 变量命名规范

// 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)

// 可以以什么开头: 字母, _, $, 中文

// 不能出现什么: 关键字, 保留字

// 提倡什么书写规范: 小驼峰, 支持_连接语法

好的 = "真好";

console.log(好的);

数据类型

值类型

  • number 类型
var num = 10;

    // 类型, 值

    console.log(typeof(num), num)

    // 判断方式

    console.log(typeof num == 'number');

    num = 3.14;

    console.log(typeof(num), num);
  • string类型
var str = '单引号字符串';

    console.log(typeof(str), str);

    str = "双引号字符串";

    console.log(typeof(str), str);
  • boolean 类型
var res = true;

    console.log(typeof(res), res);

    res = false;

    console.log(typeof(res), res);
  • undefined 类型
console.log(typeof(abc), abc);

    var abc = undefined;

    console.log(typeof(abc), abc);

引用类型

  • function 类型
var fn = function (a, b) { return a + b; };

    console.log(typeof(fn), fn);
  • object 类型（类字典方式来使用）
var obj = {

        name: 'egon',

        age: 78

    };

    console.log(typeof(obj), obj);

    console.log(obj instanceof Object);

其他形式对象

  • null 类型
var xyz = null;

    console.log(typeof(xyz), xyz);  // object null

    console.log(xyz instanceof Object);  // false => Null类型

具体的对象类型

  • Array 类型
var a = new Array(1, 2, 3, 4, 5);

    console.log(a, typeof a);

    // 判断方式

    console.log(typeof a == 'object');

    console.log(a instanceof Object);

    console.log(a instanceof Array);
  • Date 类型
var a = new Date();

    console.log(a, typeof a);

    // 判断方式

    console.log(typeof a == 'object');

    console.log(a instanceof Object);

    console.log(a instanceof Date);
  • RegExp 类型
var a = new RegExp('a');

    a = /[abc]/;

    console.log(a, typeof a);

    // 判断方式

    console.log(typeof a == 'object');

    console.log(a instanceof Object);

    console.log(a instanceof RegExp)

    // 使用正则

    console.log('abc'.match(a))

数据类型之间的转换

  • number 与 boolean 类型
// boolean类型的true就是数字1, false就是数字0

    console.log((true + true) * 10 * false)

    // number 中 0, NaN 可以直接当false来使用, 其他的都可以当true来使用
  • string,boolean 转换为 number
var a = '10'; // => 10

    a = '3.14';  // => 3.14

    a = '3.14.15';  // => NaN

    var b = true;

    var n1 = Number(a);

    console.log(n1)

    var n2 = Number(b);

    console.log(n2)

    a = '3.14.15';  // 3.14

    a = 'a3.14';  // NaN

    console.log(parseFloat(a));

    a = '3.94.15';  // 3

    console.log(parseInt(a));

    // 体现弱语言类型

    a = '10';

    var res = +a; // number 10

    console.log(typeof(res), res)
  • number,string 转换为 boolean
// 在分支或循环判断中, 系统会将数字与字符串类型自动转换为布尔类型

    // 不在判断中, 如何转换

    console.log(Boolean(""));

    console.log(Boolean(0));

    console.log(Boolean(NaN));

    console.log(Boolean(null));

    console.log(Boolean("1"));

    console.log(Boolean(-100));
  • number,boolean 转换为 string
console.log(String(true));

    console.log(String(1));

    var a = 123;

    console.log(a.toString());

    console.log(123..toString());

    console.log(3.14.toString());

    var c = 123 + "";

    console.log(typeof c, c);

    // 用例

    var z1 = 2 + +"5";  // 7

    z1 = 2 + "5"; // "25"

    // z1 = 2 ++"5";  // 语法错误 ++连在一起是 ++语法(了解)

    var z2 = "5" - 2;  // 3

    console.log(z1, z2);

    // 补充

    // NaN与NaN不相等

总结

一.JS三个组成部分

  • ES: ECMAScript语法
  • DOM: document对象模型 => 通过js代码与页面文档(出现在body中的所有可视化标签)进行交互
  • BOM: borwser对象模型 => 通过js代码与浏览器自带功能进行交互

二.引入方式

  • 行间式
出现在标签中的全局事件属性中

this代表该标签, 可以访问全局属性, 再访问具体操作对象(eg: this.style.color = "red")
  • 内联式
出现在script脚本标签中

可以通过标签的id唯一标识,在js代码块中操作页面标签

js采用的是小驼峰命名规范, 属于解释性语言(由上至下依次解释执行)
  • 外联式
通过script标签的src属性链接外部js文件, 链接后, script标签本身内部的js代码块将会被屏蔽

在任何位置都可以使用this对象,当this对象不指向任意一个标签时,代表的是window对象
  • js具体出现的位置
head标签的底部: 依赖性js库

body标签的底部(body与html结束标签的之间): 功能性js脚本

三.变量的定义

四种定义变量的方式

语法: 关键词 变量名 = 变量值

num = 10; // 省略关键词, 定义的为全局变量, 在任何位置定义, 在任何位置都可以访问, 但不建议使用

var num = 10; // var关键词, 无块级作用域, 定义在块级作用域中的变量, 外界也可以访问

let num = 20; // let关键词, 有块级作用域, 定义在块级作用域中的变量, 外界无法访问

const NUM = 30; // const关键词,有块级作用域, 定义在块级作用域中的变量, 外界无法访问, 且变量的值不能再被二次修改, 所以为常量

/* 产生块级作用域的方式

{

    直接书写

}

if语句可以产生

while语句可以产生

for语句也可以产生

*/

// 函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问
// ES5 | ES6

// 是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法
// 命名规范

// 变量命名规范

// 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)

// 可以以什么开头: 字母, _, $, 中文

// 不能出现什么: 关键字, 保留字

// 提倡什么书写规范: 小驼峰, 支持_连接语法

好的 = "真好";

console.log(好的);

四.三种弹出框

// 普通弹出框

// alert("你丫真帅!!!");

// 输入框: 以字符串形式接收用户输入内容

// var info = prompt("请输入内容:");

// console.log(info)

// 确认框: 根据用户选择确认或取消, 得到 true | false 两个布尔结果

// var res = confirm("你是猪吗?");

// console.log(res)

五.数据类型

// 值类型

var a = 10;  // Number 10

var a = 'abc';  // String abc

var a = true;  // Boolean true

var a = undefined  // undefined undefined

// 引用类型

var a = function(){}  // function f(){}

var a = {}  // Object {}

var a = null  // Null null

// 其他Object具体体现

Array | Date | RegExp

六.值类型的类型转换

// 1.通过类型声明转换

Number() | String() | Boolean()

// 2.方法(函数)

parseInt('10') | parseFloat('3.14')

123..toString()

// 3.隐式转换

+'10' => 10

'' + 10 => '10'

相关文章