前言
本系列博客为记录学习 JavaScript 的学习笔记, 会从基础开始慢慢探索 JS. 今天的学习笔记主要为 JS 引入, 定义变量以及 JavaScript 中数据类型和数据类型之间的转换.
引入 JavaScript
什么是 JavaScript 语言?
JavaScript 是一种轻量级的脚本语言. 所谓的''脚本语言'', 指的是它不具备开发操作系统的能力, 而是只用来编写相关应用程序的''脚本'', 使用场景最多的是浏览器中.
JavaScript 也是一种嵌入式语言. 本身的核心语法不算很多, 只能用来做一些数学和逻辑运算. JavaScript 本身不提供任何与 I/O 相关的接口, 都要靠宿主环境提供, 所以 JavaScript 只适合嵌入更大型的应用程序环境, 去调用宿主环境提供的接口. 比如和浏览器的交互.
从语法角度看, JavaScript 语言是一种''对象模型''语言(Object Models). 各种宿主环境通过这个模型, 描述自己的功能和操作接口, 还支持其他编程范式(比如函数式编程).
JavaScript 的核心语法非常精简, 只包括两个部分: 基本的语法构造 (比如操作符, 控制结构, 语句) 和标准库(一系列的具体对象类型, 比如 Array,Date 等). 除此之外, 各种宿主环境提供额外的接口(即只能在该环境使用的接口), 以便 JavaScript 调用. 以浏览器为例, 他提供个额外接口分为三大类.
浏览器控制类: 操作浏览器
DOM 类: 操作网页的各种元素
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>
特点:
行间式代码块书写在一个个全局事件名属性中, 没有 script 这样的一个全局属性;
在某一个标签的某一个事件属性值中, 出现的 this 代表该标签;
该标签对象 this 可以访问该标签的任意全局属性.
内联式
- <script>
- ddd.style.backgroundColor = 'pink'
- </script>
特点:
可以通过标签的 id(唯一标识), 在 JS 代码块中访问到该标签(JS 选择器);
JS 代码块中语法采用的是小驼峰命名法, 属性的值都是用字符串形式进行复制;
JS 属于解释型语言, 加载顺序会影响执行结构.
外联式
- <script src="js/01.js">
- // 被屏蔽掉的代码块
- ddd.style.fontSize = '100px';
- </script>
特点:
通过 script 标签的 src 数据连接外部 JS 文件;
使用外联的 script(拥有 src 属性)标签, 会屏蔽掉标签内部的 JS 代码块;
在 JS 的任意地方, 均有 this 对象, this 对象不指向任何标签时, 指向的是 Windows 对象.
在 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 对象不指向任意一个标签时, 代表的是 Windows 对象
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'
来源: https://www.cnblogs.com/zuanzuan/p/10134041.html