JavaScript基础

工作于 Netscape 的布兰登·艾奇（Brendan Eich）开始着手为即将在 1995 年发行的网景浏览器 2.0（Netscape Navigator 2.0）开发一个称之为 LiveScript 的脚本语言，最初的目的是在浏览器和服务器（本来要叫它 LiveWire）端使用它。在Netscape与Sun的共同努力下，LiveScript 很快得以实现。随后，在Netscape Navigator 2.0正式发布前，Netscape 将LiveScript更名为 JavaScript，目的是为了利用 Java 这个因特网时髦词汇，这也是最初的 JavaScript 1.0 版本。

JavaScript作用

表单动态校检(密码强度检测)
网页特效
服务端开发
桌面程序
APP
控制硬件-物联网
游戏开发

JS的组成

JavaScript语法、页面文档对象模型(DOM)、浏览器对象模型(BOM)

ECMAScript:ECMAScript规定了JS的编程语法和核心基础知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。BOM是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象解雇。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS书写形式

行内式

可以将单行或者少量JS代码写在HTML标签的时间属性中(以on开头的属性)
注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
可读性差，引号易错

内嵌式

alert('Hello Word!');

</script>

可以将多行HS代码写到<script>标签中

外部JS文件

利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外
引用外部JS文件的script标签中间不可以写代码
适用于JS代码量比较大的情况
外部脚本不能包含 <script> 标签。

JS输入输出语句

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

变量

1.变量概述

变量的定义

变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。

变量在内存中的存储

本质：变量是程序在内存中申请的用来存储数据的空间。

2.变量的使用

声明变量

//声明变量
var age；//声明一个名称为age的变量

var是一个JS关键字，用来声明变量。使用该关键字声明变量后，计算机会自动为变量分配内存空间
age是定义的变量名，通过变量名来访问内存中分配的空间

赋值

age=10；//赋值

=用来把右边的值赋给左边的变量空间中
变量值是程序员保存到变量空间的值

变量的初始化

var age=18；//声明变量的同时赋初值

3.变量的语法扩展

更新变量

一个变量被重新赋值之后，原有的值就会被覆盖，变量值将以最后一次的赋值为准

同时声明多个变量

var age=18,name='lily';//同时声明多个变量

多个变量名之间使用英文逗号隔开

声明变量的特殊情况

情况	说明	结果
var age；console.log(age);	只声明不复制	undefined
console.log(log)	不声明不赋值直接使用	报错
age=10；console.log(age)	不声明只赋值	10

4.变量命名规范

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

JS的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

数据类型分类

简单数据类型(Number,String,Boolean,undefined,Null)
复杂数据类型(Object)

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值	0
Boolean	布尔值类型	false
String	字符串类型	“”
Undefined	var a；声明变量但没有给值，a=undefined	undefined
Null	var a=numm；声明变量a为空值	null

数字型特殊值：Infinity，无穷大；-Infinity，无穷小；NaN，代表一个非数值(isNaN())
字符串型：JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

转义符	解释说明
\n	换行符，n是newline的意思
\\	斜杠\
\‘	’单引号
\"	"双引号
\t	tab缩进
\b	空格

字符串拼接：多个字符串之间可以使用+进行拼接，方式为：字符串+任何类型=拼接后的新字符串

获取数据类型

typeof 运算符返回变量或表达式的类型：

typeof "Bill"              // 返回 "string"
typeof 3.14                // 返回 "number"
typeof true                // 返回 "boolean"
typeof false               // 返回 "boolean"
typeof x                   // 返回 "undefined" (假如 x 没有值)

typeof 运算符可返回以下两种类型之一：

function
object

typeof 运算符把对象、数组或 null 返回 object。

typeof 运算符不会把函数返回 object。

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

数据类型转换

数字型转换为字符型

数字型转换为字符串型变量.toString()
利用String(变量)
利用 + 拼接字符串的方法实现转换效果隐式转换

转换为数字型

方式	说明	案例
parsenInt(string)函数	将String类型转换为整数数值型	parselnt('78')
parseFloat(string)函数	将String类型转换成浮点数数值型	parseFloat(‘7.2’)
Number()强制转换函数	将string类型转换为数值型	Number('12')
js隐式转换(- * /)	利用算术运算隐式转换为数值型	‘12’-0

转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean('true')

代表空、否定的值会被转换成false，如‘’、0、NaN、null、undefined
其余值都会被转换成true

JS运算符

算术运算符

赋值运算符（=）把值赋给变量
加法运算符（+）对数字相加
乘法运算符（*）对数字相乘

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
--	递减

+= 赋值运算符也可用于相加（级联）字符串：

txt1 = "Hello ";
txt1 += "Kitty!";

比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

逻辑运算符

运算符	描述
&&	逻辑与
\|\|	逻辑或
!	逻辑非

类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

位运算符

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
\|	或	5 \| 1	0101 \| 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010

条件循环语句

使用 if 来规定要执行的代码块，如果指定条件为 true
使用 else 来规定要执行的代码块，如果相同的条件为 false
使用 else if 来规定要测试的新条件，如果第一个条件为 false
使用 switch 来规定多个被执行的备选代码块

if语句

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

switch语句

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
}

default 关键词规定不存在 case 匹配时所运行的代码
break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行

for语句

for (语句 1; 语句 2; 语句 3) {
     要执行的代码块
}

语句 1 在循环（代码块）开始之前执行。
语句 2 定义运行循环（代码块）的条件。
语句 3 会在循环（代码块）每次被执行后执行。

For In循环

JavaScript for in 语句循环遍历对象的属性：

for (key in object) {
  // code block to be executed
}
//示例
const person = {fname:"Bill", lname:"Gates", age:25};

let text = "";
for (let x in person) {
  text += person[x];
}

for in 循环遍历 person 对象
每次迭代返回一个键 (x)
键用于访问键的值
键的值为 person[x]

For Of 循环

JavaScript for of 语句循环遍历可迭代对象的值。

它允许您循环遍历可迭代的数据结构，例如数组、字符串、映射、节点列表等：

for (variable of iterable) {
  // code block to be executed
}

While 循环

while 循环会一直循环代码块，只要指定的条件为 true

while (条件) {
    要执行的代码块
}

数组

JavaScript 数组用于在单一变量中存储多个值。

var array-name = [item1, item2, ...];

改变数组元素

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

访问完整数组

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 "object"。

但是，JavaScript 数组最好以数组来描述。

var person = ["Bill", "Gates", 62];

数组属性和方法

var x = cars.length;   // length 属性返回元素的数量
var y = cars.sort();   // sort() 方法对数组进行排序

把数组转换为字符串

toString() 把数组转换为数组值（逗号分隔）的字符串

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

join() 方法也可将所有数组元素结合为一个字符串。

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Popping 和 Pushing

pop() 方法从数组中删除最后一个元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

pop() 方法返回“被弹出”的值

push() 方法（在数组结尾处）向数组添加一个新的元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

push() 方法返回新数组的长度

位移元素

位移与弹出等同，但处理首个元素而不是最后一个。

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 从 fruits 删除第一个元素 "Banana"

shift() 方法返回被“位移出”的字符串

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 返回 5

更改元素

通过使用它们的索引号来访问数组元素：

数组索引（下标）以 0 开始。[0] 是第一个数组元素，[1] 是第二个，[2] 是第三个 ...

length 属性提供了向数组追加新元素的简易方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

删除元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

合并(连接)数组

concat() 方法通过合并（连接）现有数组来创建一个新数组：

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数：

裁剪数组

slice() 方法用数组的某个片段切出新数组

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

对象

对象是一组无序的相关属性和方法的集合，所有的事物都是对象。

对象由属性和方法组成

属性：事物的特征，在对象中用属性来表示(常用名词)
方法：事物的行为，在对象中用方法来表示(常用动词)

创建对象

利用字面量创建对象

对象字面量：就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法

var car = {type:"porsche",
 model:"911", 
color:"white" ，
brake：function() {console.log('刹')}，
};


使用对象
(1)调用对象的属性 我们采取 对象名.属性名 
console.log(car.model);
(2)调用对象 对象名 ['属性名']
console.log(car['color']);
(3)调用对象的方法 brake 对象名.方法名
car.brake();

利用 new Object创建对象

var any=new Object();
obj.uname='lily';
obj.age=18;
obj.sex='男'；
obj.sayHi=function() {
console.log('hi');
}

利用构造函数创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋给初始值，它总与new运算符一起使用。我们可以吧对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

function 构造函数名() {
    this.属性=值；
    this.办法=function() {}
}
new 构造函数名();
//构造函数首字母大写
//不需要return就可以返回结果
//必须使用new
//我们只要调用new 函数名()就可以创建函数
//属性和方法钱必需添加this

显示对象

按名称显示对象属性
循环显示对象属性
使用 Object.values() 显示对象
使用 JSON.stringify() 显示对象

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

//循环
const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

let txt = "";
for (let x in person) {
txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;

//Object.values()

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

const myArray = Object.values(person);

//JSON.stringify()
const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

函数

JS函数定义

Function() 构造器

var myFunction = function (a, b) {return a * b};

var x = myFunction(4, 3);

自调用函数

(function () {
    var x = "Hello!!";      // 我会调用我自己
})();

JavaScript 函数都有属性和方法

箭头函数

// ES5
var x = function(x, y) {
  return x * y;
}

// ES6
const x = (x, y) => x * y;

JS函数调用

以函数形式调用函数

var myObject = {
    firstName:"Bill",
    lastName: "Gates",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 将返回 "Bill Gates"

ullName 方法是一个函数。该函数属于对象。myObject 是函数的拥有者。

被称为 this 的事物，是“拥有”这段 JavaScript 代码的对象。在此例中，this 的值是 myObject。

通过函数构造器来调用函数

// 这是函数构造器：
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// 创建了一个新对象：
var x = new myFunction("Bill", "Gates");
x.firstName;                             // 会返回 "Bill"

函数call

call() 方法是预定义的 JavaScript 方法。它可以用来调用所有者对象作为参数的方法。通过 call()，您能够使用属于另一个对象的方法。

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
var person2 = {
    firstName:"Steve",
    lastName: "Jobs",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"

函数Apply

apply() 方法与 call() 方法非常相似

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"

call() 方法分别接受参数。
apply() 方法接受数组形式的参数。

作用域

一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

全局作用域

整个script标签或者是一个单独的js文件

var carName = " porsche";


// 此处的代码能够使用 carName 变量

function myFunction() {

    // 此处的代码也能够使用 carName 变量

}

局部作用域

在函数内部就是局部作用域，这个代码名字只在函数内部起作用和效果

// 此处的代码不能使用 carName 变量

function myFunction() {
    var carName = "porsche";

    // 此处的代码能使用 carName 变量

}

预解析

变量预解析

把所有变量声明提升到当前作用于最前面,不提升赋值操作

console.log(num);//undefined
var num=10; 

var num;
console.log(num);
num=10;

函数预解析

把所有的函数声明提升到当前作用于最前面，不调用函数

fun();
var fun=function(){
    console.log(22);
}

var fun;
fun();
fun=function(){
    console.log(22);
}

m0_63483865

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础

编程语言1.1编程编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终的到结果的过程。计算机程序：就是让计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。1.2计算机语言计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。计算机语言分为机器语言，汇编语言和高级语言三大类。实际上计算机最终所执行的都是机器语言，它是由‘0’和‘1’组成的二进制数，二进制是计
复制链接

扫一扫