JavaScript

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这门语言的完善，我们可以用它来进行前端开发、后端开发和移动端开发。当然，学习这门语言最开始的突破口在于前端开发。我们一起看看在前端领域它能做什么吧!
1. 页面特效
2. 动态数据处理
3. 网页小游戏
4. 动画特效
  .....
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 细节点
1. 编写Javascript注意语法规范，一行代码结束后必须在代码最后加上 ;
2. 在JavaScript中是严格区分大小写的
3. JavaScript中会忽略多个空格和换行
4、字面量、变量、常量

概念
- 字面量：字面量就是一个值，比如变量的值和常量的值。（字母、数字、字符串 ……）
- 变量：定义完成后，可以修改的数据。
- 常量：定义完成后，固定且不能改变的数据。
变量
- 概念：变量可以用来保存字面量，而且变量的值是可以改变的。
- 定义变量：在JS中用var关键字来声明一个变量。
  - 格式：var 变量名 ，比如： var name; var age;
  - 同时声明多个变量：var name, age;
- 变量初始化：
  - 先定义后初始化：
```
var a;
a = 100;
```
  - 定义的同时初始化：
```
var a = 100;
```
- 变量的默认值：如果变量初始化时没有赋值，则里面存储的是 undefined
- 变量的命名规范和规则：
  - 命名规则：必须遵循，不遵循则报错。
  由字母、数字、下划线、$符号组成，不能以数字开头。
  
  不能是关键字和保留字。
  
  区分大小写
  - 命名规范：建议遵循，不遵循不会报错。
  变量名最好见名知意
  
  遵守驼峰命名法：首字母小写，后面单词首字母大写。例如：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。
注意事项：
1. 在JS中整数的运算可以保证精确的结果
2. 在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
```
注意事项：
1. 不能一单一双，引号必须成对出现。
2. 相同引号不能嵌套，不同引号可以嵌套。
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()方法
注意：
1. 该方法不会影响到原变量，它会将转换的结果返回
2. null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错
3. 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() 函数
字符串 -> 数字
1. 如果是纯数字的字符串，则直接将其转换为数字
2. 如果字符串中有非数字的内容，则转换为NaN
3. 如果字符串是一个空串或者是一个全是空格的字符串，则转换为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() 专门用来处理字符串
使用注意：
1. 使用Number()函数中无论混合字符串是否存在有效整数都会返回NaN，但parseInt()/parseFloat()可以提取字符串中的有效整数。
2. 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
相关阅读:
js 字符串转化成数字
 web项目中各种路径的获取
 个人作业——软件工程实践总结作业
 Beta 答辩总结
 Beta 冲刺（7/7）
Beta 冲刺（6/7)
Beta 冲刺（5/7）
Beta 冲刺（4/7）
Beta 冲刺（3/7）
软件产品案例分析（团队）
原文地址：https://www.cnblogs.com/xzh0717/p/11450912.html

一、Javascript介绍

1、JavaScript的诞生

2、JavaScript语言的前世今生

3、JavaScript来源于借鉴

4、什么是JavaScript?

5、JavaScript的特点

6、JavaScript的组成

7、JavaScript的使用场景

8、JavaScript和HTML、CSS的关系

二、JavaScript基本语法

1、JS的书写形式

行内式

页内式

外链式

2、JS的注释

单行注释

多行注释

标准注释

3、JS常见的输出方式

弹窗

控制台输出

向body中输出

4、字面量、变量、常量

概念

变量

常量

5、数据类型

数据类型定义

数据类型划分

数据类型查看

Number

String

Boolean

Null 和 Undefined

6、数据类型转换

定义

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

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

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