Web全栈-JavaScript-笔记1

1. 开篇介绍

1. 编程语言

编程语言是人和计算机交流的工具，工程师通过编程语言基于计算机去开发一款款软件

编程语言就是一门语言，只不过语法比较特殊，我们得学习之后才能用这门语言来开发相应的东西

编程语言大致可以分为以下几类： 机器语言、汇编语言、高级语言

JavaScript就是一门编程语言，属于高级语言

 

2. JavaScript的诞生

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

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

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

 

3.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。
...

4. JavaScript来源于借鉴

借鉴C语言的基本语法；

借鉴Java语言的数据类型和内存管理；

借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；

借鉴Self语言，使用基于原型（prototype）的继承机制。

 

5. 什么是JavaScript?

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

知识点补充

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

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

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: 实现网页与客户之间互动的桥梁，让网页具有丰富的生命力

图示

 

 

2. JavaScript基本语法-1

1. JS的书写样式

行内式

方式一

今天天气?

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

方式二

点我

页内式

写法

      ......
    
 

注意事项

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

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

HTML页面中出现

注意事项

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

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

 

2. 输出HelloWorld

alert("Hello, World!");

控制浏览器弹出一个警告框

document.write("Hello World!");

可以向body中输出一个内容

console.log("Hello World!");

向控制台输出一个内容

console.warn("警告输出！");
console.error("错误输出！");

prompt("Hello, World！");

在网页中弹出输入框，一般用于接收用户输入的信息

 comfirm("Hello，JavaScript！");

在网页中弹出提示框，显示信息，该方法一般与if判断语句结合使用

 

3. JS细节点

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

如果不写分号，浏览器会自动添加，但是会消耗一些系统资源；
此外，容易加错分号，所以在开发中分号必须要写。

 

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

comfirm("Hello，JavaScript！");   // 正确
COMFIRM("Hello，JavaScript！");   // 错误

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

console.log
 (
     "Hello，JavaScript！"
 );

 

 

4. 注释语法

1. 什么是注释？

注释是就是注解、解释的意思； 在JavaScript中它可以用来解释某一段程序或者某一行代码是什么意思，方便开发者之间的交流；

注释可以是任何文字，包括中文、英文和各种字符；

在开发工具中注释一般是灰色或者绿色

2. 为什么要写注释？

方便自己，方便他人（便于检查代码，排除错误）

3. 如何写注释？

单行注释

// 单行注释
var name;

使用范围:任何地方都可以写注释：函数外面、里面，每一条语句后面
作用范围: 从第二个斜线到这一行末尾
快捷键:Ctrl+/

多行注释

 /*多行注释*/
var name;

使用范围:任何地方都可以写注释：函数外面、里面，每一条语句后面
作用范围: 从第一个/到最近的一个/ 之间

4. 注释使用注意?

单行注释可以嵌套单行注释、多行注释

// 拼课
// 拼课  // itlike
// /* 拼课 */

多行注释可以嵌套单行注释

/*
// author：itlike
// intro：喜欢IT, 就上拼课
*/

多行注释不能嵌套多行注释

 

5. 字面量和变量

1. 字面量

一些不可改变的值

比如: 数字, 字母, ....

一般都不会直接使用字面量

2. 变量

可以用来保存字面量，而且变量的值是可以任意改变的

在开发中都是通过变量去保存一个字面量

3. 使用

1. 声明变量

在js中使用var关键字来声明一个变量

var name;
var intro;
var age;

2. 给变量赋值

name = "itlike.com"

intro = "喜欢IT, 就上拼课!"

age = 108;

3. 可以声明的同时赋值

var name = "拼课";
var intro = "itlike.com";
var age = 108;

输出调试

 

6. 标识符

定义

在JS中所有的可以由开发者自主命名的都可以称为是标识符

例如：变量名、函数名、属性名都属于标识符

命名规则

1. 标识符中可以含有字母、数字、_、$

2. 标识符不能以数字开头

3. 标识符不能是ES中的关键字或保留字

4. 标识符一般都采用驼峰命名法

首字母小写，每个单词的开头字母大写，其余字母小写

比如: myName, yourName, itLike, ....

5. 在JS底层保存的标识符采用的是Unicode编码，所以UTF-8中所有的字符都可以作为标识符

 

错误1

var if = '如果';
console.log(if);

错非错

var 拼课学院 = 'itlike.com';
console.log(拼课学院);

 

3. JavaScript基本语法-2

1. JS中的关键字?

定义

JavaScript语言用于程序控制或者执行特定操作的英语单词；

它们是被JavaScript语言赋予了特殊含义的英文单词；

好比现实生活中除夕、中秋、国庆对于我们有特殊含义一样, 在JavaScript也有一些对于JavaScript有特殊含义的单词,这些单词我们称之为关键字。

使用注意

关键字不能用作变量名、函数名；

关键字严格区分大小写, 比如：void和Void前者是关键字, 后者不是

常见的关键字

 

 

2. JS中的保留字?

定义

JavaScript预留的保留字，它们虽然现在没有作为关键字，但在以后的升级版本中有可能作为关键字

 

 

 

3. 数据类型?

1. 数据

数据是指所有能输入到计算机并被计算机程序处理的符号的介质的总称，是具有一定意义的数字、字母、符号和模拟量等的通称。

数据以各种形式存在于我们生活中

 

2. 数据类型

1. 定义

数据类型指的就是字面量的类型

程序在运行过程中会产生各种各样的临时数据, 为了方便数据的运算和操作, JavaScript对这些数据进行了分类, 提供了丰富的数据类型；

2. 分类

在JS中一共有六种数据类型

基本数据类型

String 字符串
Number 数值
Boolean 布尔值
Null 空值

引用数据类型

Undefined 未定义
Object 对象

3. 使用

String(字符串)

1. 定义

在JS中字符串需要使用引号引起来
使用双引号或单引号都可以，但是不要混着用
引号不能嵌套，双引号不能放双引号，单引号不能放单引号

2. 使用

var str = 'itlike.com';

str = '我们的口号是:"喜欢IT, 就上拼课!"';

3. 转义字符

当表示一些特殊符号时可以使用\进行转义

\" 表示 "
\' 表示 '
\n 表示换行
\t 制表符
\\ 表示\

使用

str = '我们的口号是:\'喜欢IT, 就上拼课!\'';

str = '\\\\\\';

4. typeof

 

Number(数值)

1. 定义

在JS中所有的数值都是Number类型，包括整数和浮点数（小数）

2. 使用

基本用法

var num1= 123;
var num2= 3.14;

console.log(typeof num1); // number
console.log(typeof num2); // number

 

最大数和最小数

由于内存的限制，ECMAScript 并不能保存世界上所有的数值

// 最大值：Number.MAX_VALUE
 console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308
 // 最小值：Number.MIN_VALUE
 console.log(Number.MIN_VALUE);  // 5e-324
 // 无穷大：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

 

3. 注意事项

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

var counter = 120 + 20;
console.log(counter ); // 140

在JS中浮点数的运算可能得到一个不精确的结果

var counter = 100.1 + 20.1;
console.log(counter ); // 120.200000000000003

所以千万不要使用JS进行对精确度要求比较高的运算

    

Boolean(布尔)

1. 定义

布尔值只有两个，主要用来做逻辑判断

true 表示真      false 表示假

使用typeof检查一个布尔值时，会返回boolean

布尔类型也代表1和0，实际运算中true=1,false=0

2. 使用

var bool = true;
console.log(typeof bool);
console.log(bool);

3. 注意事项

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

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

var bool1 = Boolean(0);
console.log(bool1); // false

var bool2 = Boolean(1);
console.log(bool2); // true

var bool3 = Boolean(-1);
console.log(bool3); // true

var bool4 = Boolean("hello");
console.log(bool4); // true

var bool5 = Boolean("");
console.log(bool5); // false

var bool6 = Boolean(undefined);
console.log(bool6); // false

var bool7 = Boolean(null);
console.log(bool7); // false

 

 

Null和Undefined

Null

空值类型,  值只有一个: null

null这个值专门用来表示一个为空的对象

使用typeof检查一个null值时，会返回object

Undefined

未定义类型, 值只有一个: undefind

当声明一个变量，但是并不给变量赋值时，它的值就是undefined

使用typeof检查一个undefined时也会返回undefined

使用

var a = null;
var b = undefined;
console.log(typeof b);

注意

undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true

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

 

3. 数据类型转换

1. 定义

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

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

 

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

方式一

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

注意

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

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

使用

var num = 12306;
var str= num .toString();
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 = 10;
var str5 = str5.toString();
console.log(typeof num5 ); // number
console.log(typeof str5 ); // string

方式二

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

注意

使用String()函数做强制类型转换时

对于Number和Boolean实际上就是调用的toString()方法

但是对于null和undefined，就不会调用toString()方法, 它会将 null 直接转换为 "null",  将 undefined 直接转换为 "undefined"

使用

var a = null;
a = String(a);

console.log(a);
console.log(typeof a);

                    
a = undefined;
a = String(a);
                    
console.log(a);
console.log(typeof a);

方式三

+

任何数据和 + 连接到一起都会转换为字符串, 其内部实现原理和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

 

3. 将其他的数据类型转换为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()

专门用来处理字符串

使用注意

使用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，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);
console.log(a);

 

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

使用Boolean()函数

数字 -> 布尔

除了0和NaN，其余的都是true

字符串 -> 布尔

除了空串，其余的都是true

null和undefined都会转换为false

对象转换为true

 

4. 进制表示?

在JS中可以表示不同进制的数字

16进制的数字，则需要以0x开头

8进制的数字，则需要以0开头

2进制的数字，则需要以0b开头

得看浏览器支持

使用

十六进制

num = 0x18;
num = 0xcf;
num = 0xAacf;

八进制数字

num = 016;

二进制数字

num = 0b1010;

注意

"010"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析

可以在parseInt()或parseFloat中传递一个第二个参数，来指定数字的进制

str = "070";
// str= parseInt(str,10);
str = Number(str);
                    
console.log(typeof str);
console.log(str);