JavaScript

一、Javascript介绍

1、JavaScript的诞生

1994 年，网景公司（NetScape）发布了Navigator浏览器0.9版，这是历史上第一个比较成熟的浏览器，引起了广泛关注。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。网景公司急需要一门网页脚本语言，使得浏览器可以与网页进行互动。

1995年5月，网景公司做出决策，未来的网页脚本语言必须"看上去与Java足够相似"，但是比Java简单，使得非专业的网页作者也能很快上手。

1995年4月，网景公司录用了34岁的系统程序员Brendan Eich，他只用10天时间就把Javascript设计出来。

2、JavaScript语言的前世今生

1995.2月 Netscape公司发布LiveScript，后临时改为JavaScript，为了蹭上Java的热浪。
欧洲计算机制造商协会（ECMA）英文名称是European Computer Manufacturers Association
1997 年，以JavaScript 1.1 为基础。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39（ECMA的小组）锤炼出了 ECMA-262，也就是ECMAScript1.0。
1998年6月，ECMAScript 2.0版发布。
1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。
2007年10月，ECMAScript 4.0版草案发布：分歧太大，失败告终。
2009年12月，ECMAScript 5.0版正式发布
2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。

...

3、JavaScript来源于借鉴

借鉴C语言的基本语法；
借鉴Java语言的数据类型和内存管理；
借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；
借鉴Self语言，使用基于原型（prototype）的继承机制。

4、什么是JavaScript?

JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

解释型语言：程序执行之前，不需要编译，直接运行时边解析边执行的语言

编译型语言：程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件

5、JavaScript的特点

简单易用：可以使用任何文本编辑工具编写；只需要浏览器就可以执行程序。
解释执行（解释语言）：事先不编译；逐行执行；无需进行严格的变量声明。
基于对象：内置大量现成对象，编写少量程序可以完成目标。

6、JavaScript的组成

ECMAScript +DOM+BOM

ECMAScript：

JavaScript的语法标准
ECMA是一个组织，即欧洲计算机制造商协会
ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准，包含ECMAScript标准中规定的基本内容

DOM：

JavaScript操作网页上的元素的API

BOM：

JavaScript操作浏览器的部分功能的API

7、JavaScript的使用场景

随着JavaScript这门语言的完善，我们可以用它来进行前端开发、后端开发和移动端开发。当然，学习这门语言最开始的突破口在于前端开发。我们一起看看在前端领域它能做什么吧!

页面特效
动态数据处理
网页小游戏
动画特效
.....

8、JavaScript和HTML、CSS的关系

Html：是用来制作网页，简单来说就是编写网页结构
CSS：美化网页（样式）
Javascript：实现网页与客户之间互动的桥梁，让网页具有丰富的生命力

二、JavaScript基本语法

1、JS的书写形式

行内式

方式一：

<button onclick="alert('今天天气很好！');">今天天气?</button>

虽然可以写在标签的属性中，但是结构与行为耦合，不方便维护，不推荐使用

方式二：

<a href="javascript:alert('你点疼我了！！');">点我</a>

页内式

写法：

<body>
      ......
     <script type="text/javascript">
        alert("今天天气很好！");
     </script>
</body>

注意事项：

<script></script>标签中的 js 代码一般写在文档的尾部；

网页是从上至下加载，而js代码通常是给标签添加交互(操作元素)，所以需要先加载HTML，否则如果执行js代码时HTML还未被加载，那么js代码将无法添加交互(操作元素);

HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。

所以如果把 js 代码如果写在head中，那么js代码执行完毕之前后续网页无法被加载。

外链式

写法：

<script type="text/javascript" src="01-js书写格式.js"></script>

注意事项：

外链式的script代码块中不能编写js代码，即便写了也不会执行

<script type="text/javascript" src="index.js">
      alert("今天天气很好！"); // 不会被执行
</script>

由于每次加载外链式的js文件都会发送一次请求，这样非常消耗性能，所以在企业开发中推荐将多个JS文件打包成为一个JS文件，以提升网页的性能和加载速度。

2、JS的注释

单行注释

// 这是单行注释

多行注释

/* 这是多行注释 */

标准注释

/**
 * 文件名：xx.js
 * 作者：xxx
 * 描述：本js的功能
 * 修改人：xxx
 * 修改时间：
 * 修改内容：
 */

3、JS常见的输出方式

弹窗

弹出框：

alert("提示信息！"); // window.alert("提示信息！");

提示框：

//利用对话框返回的值 （true 或者 false）  
if (confirm("你确定提交吗？")) {
    alert("点击了确定");
} else {
    alert("点击了取消");
}

对话框：

var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name
//这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值  
if (name) //如果返回的有内容  
{
    alert("欢迎您：" + name)
}

控制台输出

console.log('输出信息');
console.warn('警告信息');
console.error('错误信息');

向body中输出

document.write('你好');
document.write('<h3>你好</h3>');

JS 细节点

编写Javascript注意语法规范，一行代码结束后必须在代码最后加上 ;

在JavaScript中是严格区分大小写的

JavaScript中会忽略多个空格和换行

4、字面量、变量、常量

概念

字面量：字面量就是一个值，比如变量的值和常量的值。（字母、数字、字符串 ……）
变量：定义完成后，可以修改的数据。
常量：定义完成后，固定且不能改变的数据。

变量

概念：变量可以用来保存字面量，而且变量的值是可以改变的。
定义变量：在JS中用var关键字来声明一个变量。
- 格式：var 变量名 ，比如： var name; var age;
- 同时声明多个变量：var name, age;
变量初始化：
- 先定义后初始化：
```
var a;
a = 100;
```
- 定义的同时初始化：
```
var a = 100;
```
变量的默认值：如果变量初始化时没有赋值，则里面存储的是 undefined
变量的命名规范和规则：
- 命名规则：必须遵循，不遵循则报错。
1. 由字母、数字、下划线、$符号组成，不能以数字开头。
2. 不能是关键字和保留字。
3. 区分大小写
- 命名规范：建议遵循，不遵循不会报错。
1. 变量名最好见名知意
2. 遵守驼峰命名法：首字母小写，后面单词首字母大写。例如：myName

常量

在ES6之前并没有声明常量的方法，在ES6中新增加了const来定义常量。

建议常量的命名全部大写，如果由多个单词构成，可以用下划线隔开。

5、数据类型

数据类型定义

数据类型指的就是字面量的类型。程序在运行过程中会产生各种各样的临时数据，为了方便数据的运算和操作，JavaScript对这些数据进行了分类，提供了丰富的数据类型。

数据类型划分

基本数据类型：
- String：字符串
- Number：数值
- Boolean：布尔值
- Null：空值
- Undefined：未定义
引用数据类型：
- Object：对象

数据类型查看

typeof 操作符，会将检查的结果以字符串的形式返回给我们。

var a = '34';
console.log(typeof(a));

Number

定义：在JS中所有的数值都是Number类型，包括整数和浮点数（小数）
最大数和最小数：由于内存的限制，ECMAScript 并不能保存世界上所有的数值。

// 最大值：Number.MAX_VALUE
console.log(Number.MAX_VALUE);
// 最小值：Number.MIN_VALUE
console.log(Number.MIN_VALUE);
// 无穷大：Infinity, 如果超过了最大值就会返回该值
console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
// 无穷小：-Infinity, 如果超过了最小值就会返回该值
console.log(typeof Infinity); // number
console.log(typeof -Infinity); // number

NaN：是一个特殊的数字，表示非法数字 Not A Number；使用typeof 检查一个NaN也会返回number。

注意事项：

在JS中整数的运算可以保证精确的结果

在JS中浮点数的运算可能得到一个不精确的结果。所以千万不要使用JS进行对精确度要求比较高的运算

String

字符串是由单引号和双引号括起，ES6 模板字符串 ``

var a = "Hello";
console.log(typeof(a)); // string
var b = 'Hello';
console.log(typeof(b)); // string
var c = `Hello`;
console.log(typeof(c)); // string

注意事项：

不能一单一双，引号必须成对出现。

相同引号不能嵌套，不同引号可以嵌套。

Boolean

概念：布尔型也被称为逻辑类型或者真假值类型，只有能够获取真（true）和假（false）两种数值。

虽然 Boolean 类型的字面值只有两个，但ECMAScript中所有类型的值都有与这个Boolen值等价的值

任何非零数值都是true，包括正负无穷大。只有 0 和 NaN是false
任何非空字符串都是true，只有空字符串是false
任何对象都是true，只有null和undefined是false

Null 和 Undefined

Undefined 是一种比较特殊的类型，表示变量未赋值，这种类型只有一种值就是undefined
undefined 是 Undefined 类型的字面量
- undefined 和 168、“like”一样是一个字面量
- Undefined 和 Number、String 一样是一个数据类型
- typeof 对没有初始化和没有声明的变量都会返回 undefined
Null 类型也是只有一个值的数据类型，这个特殊的值是 null
- 从语义上看null表示的是一个空的对象，所以使用 typeof 会返回一个Object
```
var str = null;
console.log(typeof str); // object
```
undefined值实际上是由null值衍生出来的，所以如果比较undefined和n ll是否相等，会返回true

var str1 = null;
var str2 = undefined
console.log(str1 == str2);	// true
console.log(str1 === str2);	// false

6、数据类型转换

定义

将一个数据类型转换为其他的数据类型，比如：将String类型转换为Number类型，将Number类型转换为Boolean类型...

类型转换主要指，将其他的数据类型，转换为String Number Boolean

将其他的数据类型转换为String

方式一：调用被转换数据类型的toString()方法

注意：

该方法不会影响到原变量，它会将转换的结果返回

null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错

number 类型的 toString()方法可以带一个进制参数

使用：

var num = 12306;
var str = num.toString();
console.log(typeof num ); // number
console.log(str); // 12306
console.log(typeof str); // string

var num1 = true;
var str1 = num1.toString();
console.log(str1); // true
console.log(typeof str1); // string

var num2 = undefined;
var str2 = num2.toString(); // 报错
console.log(str2);

var num3 = null;
var str3 = num3.toString(); // 报错
console.log(str3);

var num4 = NaN;
var str4 = num4.toString();
console.log(str4); // NaN
console.log(typeof str4); // String

var num5 = 123.5;
var str = num5.toString(2);
console.log(str); // 1111011.1
console.log(typeof str); // string

方式二：调用String()函数，并将被转换的数据作为参数传递给函数

注意：

使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法，它会将 null 直接转换为 "null", 将 undefined 直接转换为 "undefined"。

使用：

var a = null;
a = String(a);
console.log(typeof a);	// string
console.log(a);	// null
a = undefined;
a = String(a);
console.log(typeof a);	// string
console.log(a);	// undefined

方式三：拼接字符串

任何数据和 + " " 连接到一起都会转换为字符串，其内部实现原理和String()函数一样。

使用：

var num1 = 100;
var res1 = num1 + "";
console.log(res1); // 100
console.log(typeof res1); // string

var num2 = true;
var res2 = num2 + "";
console.log(res2); // true
console.log(typeof res2); // string

var num3 = undefined;
var res3 = num3 + "";
console.log(res3); // undefined
console.log(typeof res3); // string

var num4 = null;
var res4 = num4 + "";
console.log(res4); // null
console.log(typeof res4); // string

将其他的数据类型转换为Number

方式一：Number() 函数

字符串 -> 数字

如果是纯数字的字符串，则直接将其转换为数字

如果字符串中有非数字的内容，则转换为NaN

如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

使用：

var str1 = "123";
var res1 = Number(str1);
console.log(res1); // 123
console.log(typeof res1); // number
var str2 = "itlike123";
var res2 = Number(str2);
console.log(res2); // NaN
var str3 = "";
var res3 = Number(str3);
console.log(res3); // 0

var str4 = "    ";
var res4 = Number(str4);
console.log(res4); // 0

布尔 -> 数字

true 转成 1, false 转成 0

使用：

var bool1 = true;
var n1 = Number(bool1);
console.log(n1); // 1

var bool2 = false;
var n2 = Number(bool2);
console.log(n2); // 0

null -> 数字

var str1 = null;
var n1 = Number(str1);
console.log(n1); // 0

undefined -> 数字

var str1 = undefined;
var n1 = Number(n1);
console.log(n1); // NaN

方式二：parseInt() 和 parseFloat() 专门用来处理字符串

使用注意：

使用Number()函数中无论混合字符串是否存在有效整数都会返回NaN，但parseInt()/parseFloat()可以提取字符串中的有效整数。

parseInt()和parseFloat()的区别是前者只能提取整数，后者可以提取小数

使用1：

var str1 = "300px";
var n1 = parseInt(str1);
console.log(n1); // 300

var str2 = "300px250";
var n2 = parseInt(str2);
console.log(n2); // 300
console.log(parseInt("abc123")); //返回NaN，如果第一个字符不是数字或者符号就返回NaN
console.log(parseInt("")); //空字符串返回NaN，Number("")返回0

使用2：

var str1 = "20.5px";
var n1 = parseFloat(str1);
console.log(n1); // 20.5

var str2 = "20.5.5.5px";
var n2 = parseFloat(n2);
console.log(n2); // 20.5

注意：

如果对非String使用parseInt()或parseFloat(), 它会先将其转换为String然后在操作

var a = true;
a = parseInt(a);
console.log(typeof a);	// number
console.log(a); // NaN

将其他的数据类型转换为Boolean

使用Boolean()函数

数字 -> 布尔：除了0和NaN，其余的都是true

字符串 -> 布尔：除了空串，其余的都是true

null和undefined都会转换为false，对象转换为true

posted @ 2019-09-04 10:06 Lomen~ 阅读(601) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Lost dreaming