网页编程设计

B/S 架构
B Browser 浏览器
S Server 服务器

HTML、CSS 与 JS 的关系

在这里插入图片描述

HTML 与 CSS

1. 主要内容

在这里插入图片描述

2. HTML

HTML（HyperText Markup Language）就是超⽂本标记语⾔。“超⽂本"就是表示⻚⾯内可以包含
⾮⽂字元素，如：图⽚、链接、⾳乐等等。
它是⼀种建⽴⽹⻚⽂件的语⾔，通过标记式的指令（Tag），将影像、声⾳、图⽚、⽂字等链接显示
出来。这种标记性语⾔是因特⽹上⽹⻚的主要语⾔。
HTML ⽹⻚⽂件可以使⽤记事本、写字板、HBuilder、Sublime 等编辑⼯具来编写，以 .htm 或
.html 为⽂件后缀名保存。将 HTML ⽹⻚⽂件⽤浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。
基础语法
标签
HTML 标记是由”<“和”>“所括住的指令标记，⽤于向浏览器发送标记指令。
主要分为：单标记指令、双标记指令（由”<起始标记>“＋内容＋”</结束标记>“构成）。
HTML语⾔使⽤标志对的⽅法编写⽂件，既简单⼜⽅便。它通常使⽤”<标志名>内容</标志名>"来表示
标志的开始和结束，因此在HTML⽂档中这样的标志对都必须是成对使⽤的。
为了便于理解，将HTML标记语⾔⼤致分为：基本标记、格式标记、⽂本标记、图像标记、表格标
记、链接标记、表单标记和帧标记等。
单标签
单标签,不设置属性值。
如：

<br/>、<hr/>

单标签属性
单标签(也叫空元素)，设置属性值。如：

<hr width="800" />

双标签
双标签，不设置属性值。如：

<title>…</title>

双标签属性
双标签，设置属性值。如：

<body bgcolor="red">…</body> 
<font size="7">…</font>

整体结构
HTML的内容都是由⼀对⼀对的标签组成，标签不能混乱，⻚⾯有⻚⾯的整体架构和规则，标签和标
签之间有需要正确嵌套。
通常⼀个HTML⽹⻚⽂件包含3个部分：标记头区…、内容区和⽹⻚区…。

<html> <head></head> <body></body>
</html> <html> <head> <meta charset="UTF-8"> <title>HTML⽂档的基本结构</title> <script></script> <link rel="stylesheet" type="text/css" href=""/>
</head> <body>
</body>
</html>

html
标志⽤于HTML⽂档的最前边，⽤来标识HTML⽂档的开始。⽽标志放在HTML⽂档的最后边，⽤来标
识HTML⽂档的结束，两个标志必须⼀块使⽤。
head
和构成HTML⽂档的开头部分。和标志对之间的内容是不会在浏览器的框内显示出来的，两个标志必
须⼀块使⽤。
在此标志对之间可以使⽤、、、等标签。
：⽤来提供关于⽂档的信息，起始属性为：charset=“utf8”。表示告诉浏览器⻚⾯采⽤的什么编码，
⼀般来说我们就⽤ utf8。当然，⽂件保存的时候也是utf8，⽽浏览器也设置 utf8 即可正确显示中⽂。
：⽤来引⼊css⽂件
：⽤来引⼊js⽂件或编写js代码。

JavaScript基础语法

1. 主要内容

在这里插入图片描述

2. JavaScript

JavaScript 的组成
在这里插入图片描述
ECMAScript定义的只是这⻔语⾔的基础，与Web浏览器没有依赖关系，⽽在基础语法上可以构建更
完善的脚本语⾔。JavaScript的运⾏需要⼀定的环境，脱离了环境JavaScript代码是不能运⾏的，
JavaScript只能够寄⽣在某个具体的环境中才能够⼯作。JavaScript运⾏环境⼀般都由宿主环境和执⾏期
环境共同构成，其中宿主环境是由外壳程序⽣成的，如Web浏览器就是⼀个外壳程序，它提供了⼀个可
控制浏览器窗⼝的宿主环境。执⾏期环境则由嵌⼊到外壳程序中的JavaScript引擎（或称为JavaScript解
释器）⽣成，在这个环境中 JavaScript能够⽣成内置静态对象，初始化执⾏环境等。
Web浏览器⾃定义的DOM组件，以⾯向对象⽅式描述的⽂档模型。DOM定义了表示和修改⽂档所需
的对象、这些对象的⾏为和属性以及这些对象之间的关系。DOM对象，是我们⽤传统的⽅法
(javascript)获得的对象。DOM属于浏览器，⽽不是JavaScript语⾔规范⾥的规定的核⼼内容。
前⾯的DOM是为了操作浏览器中的⽂档，⽽为了控制浏览器的⾏为和操作，浏览器还提供了
BOM（浏览器对象模型）。

ECMAScript(基础语法)
JavaScript的核⼼语法ECMAScript描述了该语⾔的语法和基本对象
DOM(⽂档对象模型)
⽂档对象模型（DOM）—— 描述了处理⽹⻚内容的⽅法和接⼝
BOM(浏览器对象模型)
浏览器对象模型（BOM）—— 描述了与浏览器进⾏交互的⽅法和接⼝

开发⼯具

浏览器：Chrome
开发⼯具：Hbuilder X
进⼊浏览器控制台 Console：F12
控制台的作⽤:
console对象代表浏览器的JavaScript控制台，⽤来运⾏JavaScript命令，常常⽤来显示⽹⻚运⾏
时候的错误信息。Elements⽤来调试⽹⻚的html和css代码。
基本⽤法
JS需要和HTML⼀起使⽤才有效果，我们可以通过直接或间接的⽅式将JS代码嵌⼊在HTML⻚⾯中。
⾏内JS : 写在标签内部的js代码
内部JS : 定义在script标签内部的js代码
外部JS : 单独的js⽂件，在HTML中通过script标签引⼊
我们可以将JavaScript代码放在html⽂件中任何位置，但是我们⼀般放在⽹⻚的head或者body部
分。由于⻚⾯的加载⽅式是从上往下依次加载的，⽽这个对我们放置的js代码运⾏是有影响的。
放在部分，最常⽤的⽅式是在⻚⾯中head部分放置元素，浏览器解析head部分就会执⾏这个代码，
然后才解析⻚⾯的其余部分。
放在部分，JavaScript代码在⽹⻚读取到该语句的时候就会执⾏。
⾏内 JS：

<button onclick="alert('you clicked hered!!!')">click here</button>

内部 JS：

<script type="text/javascript" charset="utf-8">
alert('this is inner js code')
</script>

外部 JS ⽂件：
hello.js

alert('this is a outter js document');

hello.html

<!-- 在需要使⽤js的html⻚⾯中引⼊ -->
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>

3. JavaScript基础语法

语句和注释

JavaScript程序的执⾏单位为⾏（line），也就是⼀⾏⼀⾏地执⾏。⼀般情况下，每⼀⾏就是⼀个语
句。
语句（statement）是为了完成某种任务⽽进⾏的操作，语句以分号结尾，⼀个分号即表示⼀个语句
结束。多个语句可以写在⼀⾏内（不建议这么写代码），但是⼀⾏写多条语句时，语句必须以分号结
尾。
表达式不需要分号结尾。⼀旦在表达式后⾯添加分号，则JavaScript引擎就将表达式视为语句，这样
会产⽣⼀些没有任何意义的语句。

单⾏注释：⽤//起头；
多⾏注释：放在/* 和 */之间。
兼容html注释⽅式：

标识符和关键字

标识符就是⼀个名字，⽤来给变量和函数进⾏命名，有特定规则和规范
规则：

由Unicode字⺟、_、$、数字组成、中⽂组成
（1）不能以数字开头
（2）不能是关键字和保留字
（3）严格区分⼤⼩写

规范：

（1）⻅名知意
（2）驼峰命名或下划线规则

关键字也称保留字，是被JavaScript征⽤来有特殊含义的单词

arguments、break、case、catch、class、const、continue、debugger、default、delete、
do、else、enum、eval、export、extends、false、finally、for、function、if、
implements、import、in、instanceof、interface、let、new、null、package、private、
protected、public、return、static、super、switch、this、throw、true、try、typeof、
var、void、while、with、yield、Infinity、NaN、undefined

变量

变量即⼀个带名字的⽤来存储数据的内存空间，数据可以存储到变量中，也可以从变量中取出数据。
变量的声明
JavaScript是⼀种弱类型语⾔，在声明变量时不需要指明数据类型，直接⽤var修饰符进⾏声明。
变量声明和赋值：

// 先声明再赋值 var a ;
a = 10;
// 声明同时赋值
var b = 20;

变量的注意点
（1）若只声明⽽没有赋值，则该变量的值为undefined。

var box;
console.log(box);

（2）变量要有定义才能使⽤，若变量未声明就使⽤，JavaScript会报错，告诉你变量未定义。

console.log(box2);

（3）可以在同⼀条var命令中声明多个变量。

var a, b, c = 10;
console.log(a,b,c);

（4）若使⽤var重新声明⼀个已经存在的变量，是⽆效的。

var box = 10
var box;

（5）若使⽤var重新声明⼀个已经存在的变量且赋值，则会覆盖掉前⾯的值

var box = 10;
var box = 25;

（6）JavaScript是⼀种动态类型、弱类型语⾔，也就是说，变量的类型没有限制，可以赋予各种类型的
值。

var box = ‘hello world’;
box = 10;

变量提升
JavaScript 引擎的⼯作⽅式是，先解析代码，获取所有被声明的变量，然后再⼀⾏⼀⾏地运⾏。这造
成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。

console.log(msg);
var msg = "so easy";
// 变量提升，相当于下⾯的代码
var msg;
console.log(msg);
msg = "so easy";
// 说明： 最后的结果是显示undefined，表示变量msg已声明，但还未赋值。

注意：变量提升只对 var 命令声明的变量有效，如果变量不是⽤ var 命令声明的，就不会发⽣变量提
升。

console.log(msg);
msg = "error";

数据类型

虽说JS是弱类型语⾔，变量没有类型，但数据本身是有类型的。针对不同的类型，我们可以进⾏不同
的操作。
JavaScript 中有6 种数据类型，其中有五种简单的数据类型：Undefined、Null、布尔、数值和字符
串。⼀种复杂数据类型Object。

数值（Number）：整数和⼩数（⽐如 1 和 3.14）字符串（String）：字符组成的⽂本（⽐如"Hello World"）
布尔值（Boolean）：true（真）和 false（假）两个特定值 Undefined：表示“未定义”或不存在，即此处⽬前没有任何值
Null：表示空缺，即此处应该有⼀个值，但⽬前为空对象（object）(引⽤) ：各种值组成的集合
1)、对象（object）{name:”zhangsan”,age:”18”} 2)、数组（array）[1,2,3]
3)、函数（function）function test() {}

undefined

undefined类型的值是undefined。
undefined 是⼀个表示"⽆"的原始值，表示值不存在。
出现undefined的常⻅情况：
（1）当声明了⼀个变量⽽没有初始化时，这个变量的值就是undefined

var box;
console.log(box); //undefined

（2）调⽤函数时，该函数有形参，但未提供实参，则该参数为undefined。

function noData(str) { // js函数形参只需要变量名即可
console.log(str); // undefined
}
noData(); // 调⽤⽅法时，未传递参数

（3）函数没有返回值时，默认返回 undefined。

// ⽅法没有返回值
function noData() {
console.log("Hello");
}
var re = noData();// 定义变量接收⽆返回值的⽅法
console.log(re);

null

null类型是只有⼀个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示⼀
个空对象引⽤。
使⽤Null类型值时注意以下⼏点：
1）使⽤typeof操作符测试null返回object字符串。
2）undefined派⽣⾃null，所以等值⽐较返回值是true。未初始化的变量和赋值为null的变量相
等。

console.log(undefined == null);
var box = null; // 赋值为null的变量
var a; // 未初始化的变量
console.log(a == box); // 两个的值相等

函数转换（String to Number）

JS 提供了 parseInt()和 parseFloat()两个全局转换函数。前者把值转换成整数，后者把值转换成浮
点数。只有对 String 类型调⽤这些⽅法，这两个函数才能正确运⾏；对其他类型返回的都是 NaN(Not
a Number)。

parseInt()

在转换之前，⾸先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，
则直接返回NaN，不再继续，如果是则继续，直到找到⾮字符

parseInt("1234blue"); // returns 1234
parseInt("22.5"); // returns 22
parseInt("blue"); // returns NaN

parseFloat()

该⽅法与 parseInt() ⽅法的处理⽅式相似，从位置 0 开始查看每个字符，直到找到第⼀个⾮有效的字
符为⽌，然后把该字符之前的字符串转换成数字。不过，对于这个⽅法来说，第⼀个出现的⼩数点是有
效字符。如果有两个⼩数点，第⼆个⼩数点将被看作⽆效的，parseFloat()⽅法会把这个⼩数点之前的
字符串转换成数字。

parseFloat("1234blue"); // returns 1234.0
parseFloat("22.5"); // returns 22.5
parseFloat("22.34.5"); // returns 22.34
parseFloat("blue"); //returns NaN

显示转换

⼏乎每个数对象都提供了toString()函数将内容转换为字符串形式，其中Number提供的toString()函
数可以将数字转换为字符串。
Number还提供了toFixed()函数将根据⼩数点后指定位数将数字转为字符串，四舍五⼊

// 将内容转换为字符串形式
var data = 10
console.log(data.toString())
// 根据⼩数点后指定位数将数字转为字符串，四舍五⼊
data = 1.4;
console.log(data.toFixed(0));
data = 1.49;
console.log(data.toFixed(1));
// 不能对null和undefined使⽤
data = null
console.log(data.toString())
data = undefined
console.log(data.toString())

JS 为 Number、Boolean、String 对象提供了构造⽅法，⽤于强制转换其他类型的数据。此时操作的
是整个数据，⽽不是部分。

Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100
Boolean(""); // false – empty string
Boolean("hi"); // true – non-empty string
Boolean(100); // true – non-zero number
Boolean(null); // false - null
Boolean(0); // false - zero
Boolean(new Object()); // true – object

最后⼀种强制类型转换⽅法 String() 是最简单的，因为它可把任何值转换成字符串。要执⾏这种强制
类型转换，只需要调⽤作为参数传递进来的值的 toString() ⽅法，即把 1 转换成"1 "，把 true转换成
"true "，把 false 转换成 "false "，依此类推。强制转换成字符串和调⽤ toString() ⽅法的唯⼀不同之处
在于，对 null 或 undefined 值强制类型转换可以⽣成字符串⽽不引发错误：

var s1 = String(null); // "null"
var oNull = null;
var s2 = oNull.toString(); // won’t work, causes anerror

控制语句

我们写的 JavaScript 代码都是按照从上到下依次执⾏，很多时候我们希望代码按照我们的意愿去执
⾏，⽐如有选择性地执⾏某些代码，或者重复地执⾏某些代码，这就需要使⽤到流程控制语句。
流程控制语句⼀共有三种：

流程执⾏:从上到下，从左到右
选择执⾏:分⽀选择
循环执⾏:重复执⾏

选择（if）
单选
双选
多选
switch结构
多个 if …else 且值为定值时（即=== 在⽐较运⾏结果时，采⽤的是严格相等运算符（=），⽽不是
相等运算符（），这意味着⽐较时不会发⽣类型转换。），可以使⽤ switch 替换：

switch(表达式) {
case 值1:
语句体1;
break;
case 值2:
语句体2;
break;
...
default:
语句体n+1; [break;]
}

break 防⽌穿透，如果没有 break,则继续执⾏后⾯的代码，直到遇到 break 或全部执⾏完毕，但是有
些时候会利⽤穿透。
循环
循环结构⽤于重复执⾏某个操作简单理解就是重复执⾏同类型的代码，它有多种形式。
. while
先判断后执⾏

基本格式
while(判断条件语句) {
循环体语句; }
扩展格式：
初始化语句;
while(判断条件语句){
循环体语句;
控制条件语句; // 少了它很容易形成死循环
 }

do…while
先执⾏后判断，⾄少执⾏⼀次

基本格式
do {
循环体语句; }while(判断条件语句);
扩展格式：
初始化语句;
do {
循环体语句;
控制条件语句;
} while(判断条件语句);

for

for(初始化语句;判断条件语句;控制条件语句){
循环体语句; }

死循环
条件永远成⽴，永远为 true,则会产⽣死循环，下⾯是最简单的死循环

while(true){}
for(;;){}

break 与 continue
break: 停⽌本层循环
continue:暂停本次循环，继续下⼀次

数组

数组是按次序排列的⼀组数据，每个值的位置都有编号（从0开始），整个数组⽤⽅括号表示。
数组定义
JS 中定义数组的三种⽅式如下（也可先声明再赋值）：

var arr = [值1,值2,值3]; // 隐式创建
var arr = new Array(值1,值2,值3); // 直接实例化
var arr = new Array(size); // 创建数组并指定⻓度

数组提供的操作⽅法
Array对象为我们提供了⼀些⽅法，可以很⽅便地操作数组

push 添加元素到最后
unshift 添加元素到最前
pop 删除最后⼀项
shift 删除第⼀项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取（切⽚）数组，原数组不发⽣变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并

var arr = ['1','a',5,'3'];
console.log(arr);
arr.push(10);
console.log(arr);
arr.unshift('b');
console.log(arr);
arr.pop();
console.log(arr);
arr.shift();
console.log(arr);
arr.reverse();
console.log(arr);
console.log(arr.join('\''));
console.log(arr);
console.log(arr.indexOf('a'));
console.log(arr.slice(2,5));
console.log(arr);
arr.splice(1,1,'⼀','⼆');
console.log(arr);
var arr1 = [0,'100'];
console.log(arr.concat(arr1));
console.log(arr);
console.log(arr1);
console.log(arr1.(arr));

函数

函数，即⽅法。就是⼀段预先设置的功能代码块，可以反复调⽤，根据输⼊参数的不同，返回不同的
值。函数也是对象。
函数的定义
有三种函数定义的⽅式：函数声明语句、函数定义表达式、Function构造函数
函数声明语句

function 函数名([参数列表]){
}
例如：
function foo(){
console.log(1);
}
foo();

该种⽅式定义的函数具有声明提升的效果

foo(); 
function foo(){
console.log(1);
}
// 变量声明提升
console.log( a ); 
var a = 2;

函数定义表达式
以表达式⽅式定义的函数，函数的名称是可以不需要的

var 变量名 = function ([参数列表]) {
}
变量名();
例如：
var fun = function(){
console.log("Hello");
}
fun();

这种写法将⼀个匿名函数赋值给变量。这时，这个匿名函数⼜称函数表达式，因为赋值语句的等号右
侧只能放表达式。

Function构造函数

Function构造函数接收任意数量的参数，但最后⼀个参数始终都被看成是函数体，⽽前⾯的参数则列
举出了新函数的参数。

var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {
return (x + y);
}
add();

注意：

js中的函数没有重载，同名的函数，会被后⾯的函数覆盖。
js中允许有不定数⽬的参数，后⾯介绍arguments对象
函数的参数、调⽤和return语句
参数
函数运⾏的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参
数，定义时的参数称为形参，调⽤时的参数称为实参
实参可以省略，那么对应形参为undefined
若函数形参同名（⼀般不会这么⼲）：在使⽤时以最后⼀个值为准。
可以给参数默认值：当参数为特殊值时，可以赋予默认值。
参数为值传递，传递副本；引⽤传递时传递地址，操作的是同⼀个对象。

// 调⽤函数时，实参可以省略，则对应形参为undefined
function add(a , b) {
console.log(a + "+" + b + "=" + (a + b));
}
add(3,4,5)//3+4=7
add(1);//1+undefined=NaN
add();//undefined+undefined=NaN
// 若函数形参同名（⼀般不会这么⼲）：在使⽤时以最后⼀个值为准
function add2(a , a) {
console.log(a);
}
add2(1,2);
// 给参数默认值
function defaultValue(a){
a = a || "a";
return a; }
console.log(defaultValue());
function f(a){
//若参数a不为undefined或null，则取本身的值，否则给⼀个默认值
(a !== undefined && a !== null) ? a = a : a = 1;
return a; }
console.log(f());
// 值传递
var num = 12;
function change(n) {
n = 30; }
change(num);
console.log(num);
// 引⽤传递
var obj = {name: "tom"};
function paramter(o) {
o.name = 2; }
paramter(obj);
console.log(obj.name);
// 给形参o赋予了新的数组
var obj2 = [1, 2, 3];
function paramter2(o){
o = [2, 3, 4];
o[1] = 3; }
paramter2 (obj2);
console.log(obj2)

函数的调⽤

常⽤调⽤⽅式

函数名([实参]);

存在返回值可以变量接收，若接收⽆返回值函数则为undefined。
2. 函数调⽤模式

function add(a,b){
return a+b; }
var sum = add(1,2)
console.log(sum);

⽅法调⽤模式

var o = {
m: function(){
console.log(1);
 }
};
o.m();

return

函数的执⾏可能会有返回值，需要使⽤return语句将结果返回。return 语句不是必需的，如果没有的
话，该函数就不返回任何值，或者说返回 undefined。
作⽤：
4. 在没有返回值的⽅法中，⽤来结束⽅法。
5. 有返回值的⽅法中，⼀个是⽤来结束⽅法，⼀个是将值带给调⽤者。

函数的作⽤域

函数作⽤域：全局 (global variable) 和局部 (local variable)

全局变量与局部变量同名问题

var box =1; // 全局变量
function display(box){
var box = 3; // 此处box与全局变量box没有关系，这⾥的box为传递的参数，相当于新声明的局部
变量
var b = 2; // 局部变量
console.log("box-->" + box);
}
display();
// b 不能访问
console.log("b-->" + b);

在函数中定义变量时，若没有加var关键字，使⽤之后⾃动变为全局变量

function fun(){
a = 100; }
fun();
alert(a);

内置对象

Arguments 只在函数内部定义，保存了函数的实参
Array 数组对象
Date ⽇期对象，⽤来创建和获取⽇期
Math 数学对象
String 字符串对象，提供对字符串的⼀系列操作

String

◦ charAt(idx) 返回指定位置处的字符
◦ indexOf(Chr) 返回指定⼦字符串的位置，从左到右。找不到返回-1 ◦ substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串
末尾。
◦ substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字
符串末尾。
◦ toLowerCase() 将字符串中的字符全部转化成⼩写。
◦ toUpperCase() 将字符串中的字符全部转化成⼤写。
◦ length 属性，不是⽅法，返回字符串的⻓度。

Math

 Math.random() 随机数
◦ Math.ceil() 向上取整，⼤于最⼤整数
◦ Math.floor() 向⼩取整，⼩于最⼩整数String

Date

// 获取⽇期
◦ getFullYear() 年 ◦ getMonth() ⽉ ◦ getDate() ⽇ ◦ getHours() 时 ◦ getMinutes() 分 ◦ getSeconds() 秒
// 设置⽇期
◦ setYear()
◦ setMonth()
◦ setDate()
◦ setHours()
◦ setMinutes()
◦ setSeconds()
◦ toLoacaleString() 转换成本地时间字符串

说明：

getMonth()：得到的值：0_11（1⽉12⽉）
setMonth()：设置值时0~11
toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。

对象

对象（object）是 JavaScript 的核⼼概念，也是最重要的数据类型。JavaScript 的所有数据都可以被
视为对象。JavaScript 提供多个内建对象，⽐如 String、Date、Array 等等。对象是带有属性和⽅法的
特殊数据类型。
简单说，所谓对象，就是⼀种⽆序的数据集合，由若⼲个“键值对”（key-value）构成。通过
JavaScript我们可以创建⾃⼰的对象。 JavaScript对象满⾜的这种”键值对”的格式我们称为JSON格式，以
后会⻅得⾮常多，即伟⼤的JSON对象。
对象的创建
JS 创建⾃定义对象，主要通过三种⽅式：字⾯量形式创建对象、通过new Object对象创建、通过
Object对象的create⽅法创建对象
字⾯量形式创建

var 对象名 = {};//创建⼀个空的对象
var 对象名 = {键:值,键2:值2,...}
var obj = {
'name' : 'hello',
age : 12,
sayHello : function () {
console.log("我是对象中的⽅法");
 },
courses : {
javase : 4,
javascript : 3
 },
isLike : true,
members : [
 {name : "⼩红",age : 20},
 {name : "⼩绿",age : 22},
 {name : "⼩蓝",age : 27},
 {name : "⼩⻩"}
 ]
};

通过new Object创建

var 对象名 = new Object(); // 创建⼀个空的对象
var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj);

通过Object对象的create⽅法创建

var 对象名 = Object.create(null);
var obj = Object.create(null);
obj.name = 'ls';
obj.gender = true
console.log(obj);
var objn = Object.create(obj);
objn.age = 18;
console.log(objn);
console.log(objn.gender)

对象的序列化和反序列化
序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象。JS中通过调⽤JSON⽅
法，可以将对象序列化成字符串，也可以将字符串反序列化成对象。

// 序列化对象，将对象转为字符串
JSON.stringify(object);

// 反序列化，将⼀个Json字符串转换为对象。
JSON.parse(jsonStr);

this

this是JavaScript语⾔的⼀个关键字。
它代表函数运⾏时，⾃动⽣成的⼀个内部对象，只能在函数内部使⽤。
随着函数使⽤场合的不同，this的值会发⽣变化。但是有⼀个总的原则，那就是this指的是，调⽤函
数的那个对象。
在函数中使⽤this
在函数中使⽤this属于全局性调⽤，代表全局对象，通过window对象来访问。

function test () {
this.x = 1;
console.log(this.x);
}
test();
console.log(x); // 相当于定义在全局对象上的属性
var x = 10;
console.log(x) // 10
function test (){
console.log(this.x) // 10
this.x = 1;
console.log(this.x) // 1
console.log(this) }
test();
console.log(x); // 1
console.log(this);

在对象中使⽤this
在对象中的函数使⽤this，代表当前的上级对象。

var obj = {
name : '张三',
age : 20,
sayHello : function () {
console.log(this.name)
console.log(this) } }
obj.sayHello();

java快到碗里来

发布了22 篇原创文章 · 获赞 6 · 访问量 437

私信关注

HTML 与 CSS

1. 主要内容

2. HTML

JavaScript基础语法

1. 主要内容

2. JavaScript

3. JavaScript基础语法

语句和注释

标识符和关键字

变量

数据类型

undefined

null

函数转换（String to Number）

parseInt()

parseFloat()

显示转换

控制语句

数组

函数

Function构造函数

函数的调⽤

return

函数的作⽤域

内置对象

String

Math

Date

对象

this

猜你喜欢