JavaScript 笔记 1

JavaScript

  • JavaScript 是弱变量类型的语言,动态数据类型语言
  • JavaScript 运行在宿主环境中,不关心内存,垃圾回收。
  • Js 机械重复性的劳动几乎为 0,基本都是创造性的劳动。
  • 永远不要背程序,每一个程序都必须自己会写。
  • js 的运行必须有宿主环境,最最常见的宿主环境,就是浏览器。
  • JS 写在 < script > 标签对儿里面,type 属性就是类型,text/javascript 就是纯文本的 javascript;注意,这个 type 必须写准确,可以不写,但是要写,一定要写准确,否则失效。

1.alert() 语句

alert("你好啊!");

实际上这条语句,在运行一个内置函数,运行函数就要加圆括号。不要纠结这个东西,学习所有的程序,都是从模仿开始的。前期,不要去纠结语法的机理是什么,只需要进行模仿。你只需要知道,你模仿了,你就能实现效果。随着课程的深入,你将知道每条语句的确切机理。

2. 控制台

** 程序的所有未捕获的错误,都会在控制台中输出。** 控制台是调试程序的一个利器。

3. 行文特征

JavaScript 语句和语句之间的换行、空格、缩进都不敏感

语句后面的分号,不是必须写的,如果语句是一行一行写的,那么分号是没有必要的。但是压缩页面的时候,语句结尾的分号,非常重要。

我们把页面做好之后,通常都会进行压缩,用软件把所有的空格、换行都去掉。此时,语句末尾的分号显得非常重要,如果去掉分号,将不能执行。

4. 注释

给人看的东西,对读程序是一个提示作用。复习一下HTML的注释:

<!--我是注释-->

CSS 注释

/*我是注释*/

JavaScript 里面的注释

单行注释:

<script type=``"text/javascript"``>//我是一行注释//再来一行alert("你好");</script>

或者多行注释:

/*我是一行注释再来一行哈哈,我又写了一行*/

注释的符号,不能嵌套,错误的示范:

/*我是一行注释/**/再来一行哈哈,我又写了一行*/`

5. 字面量

数字字面量有整数字面量(十进制、16 进制、八进制),浮点数字面量(要记住 e),Infinity,NaN

字符串的字面量,必须用双引号、单引号包裹起来。字符串被限定在同种引号之间;也即,必须是成对单引号或成对双引号。

如果一个数字,用引号引起来,那么就是字符串了:

6. 变量

使用一个变量,必须先进行一个 var,才能使用。var 这个过程可以叫做声明 declaration,也可以叫做定义 definition。不写 var 定义的是一个全局变量。

如果一个变量,仅仅被 var 了,但是没有被赋初值呢,此时这个变量的值就是undefined; 如果这个变量没有被赋初值,那么这个变量就视为没有“定义完成”。值就是 undefined。

变量名不能以数字开头。

7. 变量声明的提升

Js 独有的一个特点,先给一个变量赋值在去定义变量。程序在执行前会看见这个程序中有一行定义变量,所以就会提升到程序开头去运行,这就叫做变量声明的提升。js 只能提升变量的声明,而不能提升变量的赋初值

8. 变量的基本类型

在 js 中有五种基本类型引用类型

五种基本类型分别是:number、string、undefined、boolean、null。

typeof关键字用来检测一个变量的类型。

  • number 类型

JS 中所有的数字都是 number 类型的,不在细分为整形 int、浮点型 float 这些乱七八糟的东西。

number 类型的东西:所有数字(不分正负、不分整浮、不分大小、不分进制)、Infinity、NaN。

  • string 类型

这个变量是什么类型,和赋的值有关系,而和定义的时候是没有关系的。定义的时候,都是用 var 关键字定义的。

我们说 js 这个语言叫做动态数据类型,原因就在这里,就是赋值的时候就决定这个变量的类型了。甚至可以改变这个变量的值,为其他类型的值。变量的类型是自动检测的,而不是人规定的。

  • 加号

加号两边都是数字的时候,那么就是数学加法;两边不都是数字的时候,那么就是连字符,结果是字符串。加号两边只要有一边是字符串,加号就为连字符

9. 变量类型的转换

先来学习一个语句,弹出一个输入框。

prompt("提示文本",”默认值“);

默认值可以省略。

可以把用户输入的值,存入变量:

var a = prompt("请输入你的电话","139");

用 prompt 接收的任何东西都是字符串,哪怕用户输入了一个数字,也是字符串的数字。

  • string->number

有一些方法可以将内存中表示一个数字的字符串转换为对应的数字

parseInt()和 parseFloat()。

**parseInt 就是将一个 string 转为一个整数,不四舍五入,直接截取整数部分。如果这个 string 有乱七八糟的东西,那么就截取前面数字部分。**parseInt() 不仅仅能够进行一个转为整数,更能进行一个进制的转换,把任何进制的数字,都换为 10 进制。parseInt 如果不能转,那么就返回 NaN。

parseFloat 就是将字符串转为浮点数

尽可能的将一个字符串转为浮点数,浮点数之后如果有乱七八糟的内容,直接舍弃。

也就是说,数字类型都是 number,不分整数和浮点数,但是转换的时候分。

  • number->string

将一个数字,与一个空字符串进行连字符运算,那么就是自动转为字符串了。

var a = 123;
var b = a + "";
console.log(b);
console.log(typeof b);

10. 条件分支语句

  • if……else……与 Java 中一样

  • switch case 语句

  • 三元运算符 a?b :c

循环和 c 语言一样。

11. 函数

定义一个函数,用关键字 function 来定义

function 函数名(){
}

调用一个函数的方法非常简单,函数名后面加一个 () ,() 是一个运算符,表示执行一个函数。

函数名 ();

  • 函数的参数

定义函数的时候,参数是什么类型的没写,不需要指定类型:

function sum(a,b){
	console.log(a + b);
}

也就是说调用的时候,传进去什么什么类型,就是 a、b 什么类型

sum(``"5"``,12);

输出 512,做的是连字符的运算。

我们还可以发现,定义的时候和调用的时候参数个数可以不一样多,不报错。

sum(10);

输出 NaN,因为我们只传了一个参数,b 就没有传递,b 被隐式的 var 了, 所以值 undefined。10+undefined 就是 NaN。

sum(10,20,32,23,22,2,4);

只有前两个参数被形参接收了,后面的参数无视了。

  • 函数表达式

定义函数除了使用 function 之外,还有一种方法,就是函数表达式。就是函数没有名字,称为“匿名函数”,为了今后能够调用它,我们把这个匿名函数,直接赋值给一个变量。

var haha = function(a,b){
	return a + b;
}

以后想调用这个函数的时候,就可以直接使用 haha 变量来调用。

console.log(haha(1,3));
  • 函数声明的提升
//先调用
fun();
//然后定义
function fun(){
	alert("我是函数,我执行了!");
}

JS 在执行前,会有一个预解析的过程,把所有的函数声明,都提升到了最最开头,然后再执行第一行语句。

所以,function 定义在哪里,都不重要,程序总能找到这个函数。

函数声明会被提升,但是函数表达式却不会被提升

fun();
var fun = function(){   //函数表达式,而不是function定义法
alert("我是函数,我执行了!");
}

所以没有极特殊的理由,都要使用 function haha(){} 来定义函数,而不要使用函数表达式。

如果函数和变量同名,那么在提升时函数优先,现在 foo 这个标识符冲突了,一个函数叫做 foo,一个变量也叫作 foo。预解析阶段,如果遇见标识符冲突,这个标识符给函数。

函数声明的提升,是无节操的,强制提升,即使用 if 语句,也会提升

  • 引用类型

我们之前说的,基本类型:number、string、boolean、undefined、null

引用类型也有很多种:object、function、array、RegExp、Math、Date。

函数也是一种类型。这个类型就叫做 function,是引用类型的一种。

基本类型保存值,引用类型保存地址

12. 作用域

  • 函数能封闭住定义域

一个变量如果定义在了一个 function 里面,那么这个变量就是一个局部变量,只在这个 function 里面有定义。出了这个 function,就如同没有定义过一样。

JavaScript 变量作用域非常的简单,没有块级作用域,管理住作用域的只有一个东西:函数。

如果一个变量,没有定义在任何的 function 中,那么它将在全部程序范围内都有定义:

var a = 1;//定义在全局范围内的一个变量,全局变量,在程序任何一个角落都有定义
function fn(){
console.log("我是函数里面的语句,我认识全局变量a值为" + a);
}
fn();
console.log("函数外面的语句也认识a值为" + a)
  • 作用域链

当遇见一个变量时,JS 引擎会从其所在的作用域依次向外层查找,查找会在找到第一个匹配的标识符的时候停止。

function outer(){
var a = 1;//a的作用域就是outer
inner();
function inner(){
var b = 2;//b的作用域就是inner
console.log(a);//能够正常输出1,a在本层没有定义,就是找上层
console.log(b);   //能够正常输出2
}
}
outer();
console.log(a);//报错,因为a的作用域outer

多层嵌套,如果有同名的变量,那么就会发生“遮蔽效应”:

var a = 1;//全局变量
function fn(){
var a = 5;         //就把外层的a给遮蔽了,这函数内部看不见外层的a了。
console.log(a);//输出5,变量在当前作用域寻找,找到了a的定义值为5
}
fn();
console.log(a);  //输出1,变量在当前作用域寻找,找到了a的定义值为

作用域链:一个变量在使用的时候得几呢?就会在当前层去寻找它的定义,找不到,找上一层 function,直到找到全局变量,如果全局也没有,就报错。

var a = 1;//全局变量
var b = 2;//全局变量
function outer(){
var a = 3;//遮蔽了外层的a,a局部变量
function inner(){
var b = 4;  //遮蔽了外层的b,b局部变量
console.log(a);   //① 输出3,a现在在当前层找不到定义的,所以就上一层寻找
console.log(b);   //② 输出4
}
inner();//调用函数
console.log(a);//③ 输出3
console.log(b); //④ 输出2 b现在在当前层找不到定义的,所以就上一层寻找
}
outer();//执行函数,控制权交给了outer
console.log(a);// ⑤ 输出1
console.log(b); // ⑥ 输出2

如果遇见了一个标识符,从来没有 var 过,并且还赋值了:

absdf = 123;

那么就会自动帮你在全局范围内定义 var absdf;

  • 全局变量的作用

功能 1:通信,共同操作同一个变量

两个函数同时操作同一个变量,一个增加,一个减少,函数和函数通信。

var num = 0;
function add(){
	num++;
}
function remove(){
	num--;
}

功能 2:累加,重复调用函数的时候,不会重置

var num = 0;
function baoshu(){
num++;
console.log(num);
}
baoshu();//1
baoshu();//2
baoshu();//3

如果 num 定义在 baoshu 里面,每次执行函数就会把 num 重置为 0:

function baoshu(){
var num = 0;
num++;
console.log(num);
}
baoshu();//1
baoshu();//1
baoshu();//1

13.JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。在 JavaScript 中,几乎所有的事物都是对象。

对象也是一个变量,但对象可以包含多个值(多个变量)。

var car = {type: "Fiat" , model:500, color: "white" };

在以上实例中,3 个值 (“Fiat”, 500, “white”) 赋予变量 car。

在以上实例中,3 个变量 (type, model, color) 赋予变量 car。

你可以使用字符来定义和创建 JavaScript 对象:

实例

var person = {firstName: "John" , lastName: "Doe" , age:50, eyeColor: "blue" };

定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的:

实例

var person = { firstName: "John" ,  lastName: "Doe" , age:50, eyeColor: "blue"};

对象属性

可以说 “JavaScript 对象是变量的容器”。

但是,我们通常认为 “JavaScript 对象是键值对的容器”。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性

JavaScript 对象是属性变量的容器。

访问对象属性

你可以通过两种方式访问对象属性:

实例 1

person.lastName;

实例 2

person["lastName"];

对象方法

对象的方法定义了一个函数,并作为对象的属性存储。

对象方法通过添加 ()调用 ( 作为一个函数)。

该实例访问了 person 对象的 fullName() 方法:

实例

name = person.fullName();

如果你要访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回:

实例

name = person.fullName;

JavaScript 对象是属性和方法的容器。

访问对象方法

你可以使用以下语法创建对象方法:

methodName : function() { code lines }

你可以使用以下语法访问对象方法:

objectName.methodName()

通常 fullName() 是作为 person 对象的一个方法, fullName 是作为一个属性。

有多种方式可以创建,使用和修改 JavaScript 对象。

同样也有多种方式用来创建,使用和修改属性和方法。