mapengpeng1999@163.com Web前端之JS

JavaScript简介

1.JS是前端中的一种轻量级编程性质语言(网页脚本语言),js是世界上最流行的脚步语言。
虽然名字中含有JAVA,但它与JAVA语言是完全不同的两种语言。
JS是客户端(浏览器)编程语言,JAVA是服务器端的编程语言。但JS语法与JAVA语法类似。
js代码很容易地嵌入到HTML页面中,浏览器对JS脚本程序解释执行。
JS描述了网页的行为。HTML描述网页的结构。CSS描述网页的外观。
JS可让网页具有丰富的生命力,可让网页和用户进行互动交互。

2.JS是一种基于对象和事件驱动,并具有安全性能的脚本语言,
脚本语言简单理解就是在客户端的浏览器就可以互动响应处理程序的语言,而不需要服务器的处理和响应。
当然JavaScript也可以做到与服务器的交互响应,而相对服务器语言像asp(C语言基础上) 
php(纯粹的为网页服务的后端语言,后端服务器脚本语言) 
jsp(JAVA基础上)等需要将命令上传服务器,由服务器处理后回传处理结果。
JSP是JAVA和HTML页面组合的语言。JSP是后端脚步语言,JS是前端网页脚步语言。

3.JS可以被嵌入到HTML文件中,不需要经过Web服务器就可以对用户操作作出响应,使网页更好地与用户交互;
在利用客户端个人电脑性能资源的同时,适当减小服务器端的压力,并减少用户等待时间。
如登入注册页面,信息填写错误格式不正确,会不让其向服务器发送请求,就减少了服务器压力,
如果把响应放到服务器端,用户跟服务器端进行交互是要联网的,网速慢等待响应时间就长,
但是JS不一样,JS是存储在本地上,只要你点击会立刻执行和显示效果。

JavaScript的组成

ECMAScript:JavaScript的格式语法标准。纯粹的编程。ECMAScript是JavaScript的一个标准。
DOM:JavaScript操作网页上的元素的API接口(应用程序接口)。将JS和HTML结合起来要用DOM。
BOM:JavaScript操作浏览器的部分功能的API 。操作网址,后退前进功能等。

JavaScript特点

1. 简单易用:
可以使用任何文本编辑工具编写。只需要浏览器就可以执行程序。
2. 解释执行(解释语言):
事先不编译。只要没有触发脚步就不会读取,如定义了一个函数没有去调用这个函数,
浏览器的JS引擎不会把函数里面内容进行编译,只有等你调用函数的时候才会读取编译里面的JS代码。
无需进行严格的变量声明。var i =1; 它会根据内容自己识别是什么数据类型不用事先去定义好。
程序从上往下,逐行执行。
3. 基于对象:
内置大量现成内置对象,编写少量程序可以完成目标。也可以自定义对象首字母大写。

JavaScript使用范围

1.客户端数据计算,如淘宝购物用了什么优惠卷多少金币抵扣付钱计算。
2.客户端表单合法性验证,表单输入信息正确,如名字没填,它会提示你昵称不能为空。
3.浏览器对象的调用,有窗口和历史对象,调用浏览器对象地址栏,还可以调用历史记录前进后退,还可调用刷新。
4.浏览器事件的触发,点击某个会弹出一个框来,即触发了某事件。
5.网页特殊显示效果制作,让轮廓图动起来。

JS引入方式:2种调用方式

(1)与css类似,直接嵌入到html页面中。
在head或body中用,建议放到body标签里末尾处编写js脚步代码,
因为程序从上往下逐行执行,节省编译等待时间,先让其执行html代码最后再编译js代码。 
<script>  JS代码 </script>  
以前老版本脚步要声明下type类型。<script type=”text-javascript”> JS代码 </script>
现在随着HTML5的标准规范默认script的类型就是javascript,声明可以不写。

(2)文件调用:JavaScript代码写到另一个文件当中(其后缀通常为“.js”),外部脚本中不能包含 <script> 标签。
然后用格式为“<script src="js/1.js"></script>”的标记把它嵌入到html文档中。
<script src=”js文件的路径地址”> 这里不允许在这里编写JS代码 </script> 
如果要设置编码格式,则添加属性charset,如<script src="js/1.js" charset=”UTF-8”></script>  
若用了src引用地址,则此处不允许编写JS代码,只能在JS文件中编写JS代码 

JavaScript基础语法(ECMAScript:JavaScript的格式语法标准。)

1.基本语句:
每一个语句以英文“;”为结束标志。语句块用{}括起来。语句块里语句缩进4个空格。
但是,JavaScript并不强制要求在每个语句的结尾加英文“;”,
浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上英文“;”。
但是,良好的编程习惯建议每一个语句后以分号结束英文“;”。
<script>  
i=1;  //每写完一条语句用分号结束,也可不写分号,建议加上分号。
for(i=1;i<9;i++) { //多条语句使用{}括起来
j=i;
j--;
}
</script>

2.声明变量语句有区别
对于java:int a;//整型变量
对于js:var a;不用说明声明的数据类型,它会根据内容自动识别是什么数据类型。
var i=1;//它会识别是数值类型
var j = “字符串”; //它会识别是字符串类型,只需要前面加上关键字var就行。

3.{...}相关
花括号{...}内的语句具有缩进,通常是4个空格。缩进不是JavaScript语法要求必须的,
但缩进有助于我们理解代码的层次,所以编写代码时要遵守缩进规则。
很多文本编辑器具有“自动缩进”的功能,可以帮助整理代码。
{...}还可以嵌套,形成层级结构:
if (2 > 1) {
    x = 1;
    y = 2;
    z = 3;
    if (x < y) {
        z = 4;
    }
    if (x > y) {
        z = 5;
    }
}

4.注释
以//开头直到行末的字符被视为行注释,注释是给开发人员看到,JavaScript引擎会自动忽略。
// 注释后空一格,再写注释内容。无论单多行注释,注释符后空格再写注释内容
// 这是单行注释
另一种块注释是用/*...*/把多行字符包裹起来,把一大“块”视为一个多行注释:
/* 从这里开始是块注释
仍然是注释
仍然是注释
注释结束 */

5.Javascript严格区别大小写
html不区分大小写<div>文字</div>和<DIV>文字</DIV>效果一样,都能识别。
var i;与var I; // 区分大小写,这是两个不同的变量。

JavaScript输出、变量及数据类型

Javascript输出:JS输出有六种方式:

Javascript输出:JS输出有六种方式:
1.alert(“”);在页面弹出提示框,如用户名或密码输入错误,会弹出警告提示用户重新输入信息。 
alert(“警告提示”);
2.document.write(“”);直接在html页面中输出信息。
3.console.log(“”);在控制台输出消息,一般用于调试程序。console控制台,网页按Fn+F12可查看控制台。
console用于检测程序错误,JS有了console检错就用得少try catch 捕捉异常。
console.log(“控制台输出”);等同于console.info(“控制台输出”);
console.log(“控制台输出”);这种方式用的多,一般用它。
4.prompt(“”);弹出输入框,一般用于后台接收用户输入信息的数据。
var get = prompt(“请输入你的手机号方便我们联系你”);

一般这三个用的多,alert(“弹出框”);
document.write(“直接在html页面中输出信息”);console.log(“控制台输出,用于调试程序”);

在这里插入图片描述

(1) 使用Javascript在网页中输出一句话

在这里插入图片描述

(2) 使用confirm()

在这里插入图片描述

(3) 使用 prompt()

在这里插入图片描述

(4) 使用console.log("")(按F12(Fn+F12)或右击检查审查元素)

在这里插入图片描述

(5) document.write(),直接在HTML页面上输出内容

<!DOCTYPE html>
<html>
<body>
<h1>document.write()方法的使用</h1>
<script>
document.write("<p>我的第一段 JavaScript</p>");
</script>
</body>
</html>

(6)修改 HTML 内容的最简单的方法时使用 E.innerHTML 属性。

E这个元素,inner内部的。这个元素内部的html是什么。
<p id = “para”>我是一个标签</p>
document.getElementById(“para”).innerHTML=”<b>你是一个标签加粗下</b>”;
document.getElementById(“para”).innerText=”这里只改变文本,不带html标签”;

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>

Javascript变量

变量是存储信息的容器。var x=2; var y=3; var z=x+y;
与代数一样,JS变量可用于存放值(比如 x = 2)和表达式(比如 z=x+y)。
变量名可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, num, name)。
var i = 1;var j = 2; // 用关键字var 自定义变量名称。
变量名命名有意义,驼峰式命名法。var z = i+j;   document.write(z);
变量必须以字母开头。不能以数字开头。变量名命名有意义,驼峰式命名法。
变量也能以 $ 和 _ 符号开头(不推荐这么做)
变量名称对大小写敏感(y 和 Y 是不同的变量)
提示:JavaScript 语句和 JavaScript 变量都对大小写敏感。

声明(创建) JavaScript 变量
在 JavaScript 中创建变量通常称为“声明”变量。
我们使用 var 关键词来声明变量:var x;
变量声明之后,该变量是空的(它没有值)。
如需向变量赋值,请使用等号:x=1;
不过,您也可以在声明变量时对其赋值:var x = 1;
提示:一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。

可在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:
var name=“mayun”,age=35,job=”ceo”;
在程序中,经常会有声明但未定义的变量。
就是声明了变量但没赋值,其值实际上是 undefined(未定义)。
var i;  console.log(i); 控制台会显示undefined
在执行过语句var carname;后,变量 carname 的值将是 undefined

JavaScript 数据类型

字符串、数字、布尔、数组、对象、Null、undefined
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。
var x; x为Undefined(未定义的) var x=5; x为数字 var x=”hello” x为字符串
JS 字符串。字符串可以是引号中的任意文本。您可以使用单引号或双引号,建议双引号。
JS 数字。JS 只有一种数字类型。数字可以带小数点,也可以不带。
var x1=23;var x2=23.00;
极大或极小的数字可以通过科学(指数)计数法来书写。
var y=123e5;表示12300000    var z=123e-5;表示0.00123
js布尔。布尔(逻辑)只能有两个值:true 或 false。var x=true; var y=false;
JS数组。下面的代码创建名为 cars 的数组。
var cars = new array();
cars[0]=”bmw”;
cars[1]=”volvo”;
或者 (condensed array): var cars = new array(”bmw”,”volvo”);
或者 (literal array): var cars = [”bmw”,”volvo”];
数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。
JavaScript 对象。对象由花括号{}分隔。在括号内部,对象的属性以名称和值对的形式 。
{name : value} 来定义。属性由逗号分隔。
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
访问对象的属性,document.write(person.id);
Undefined(未定义) 和 Null(空值)。
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。cars=null;  person=null;
声明变量类型。当您声明新变量时,可以使用关键词 "new" 来声明其类型:访问对象方法
var carname = new String();
var x= new Number();
var y= new Boolean();
var cars= new Array();
var person= new Object();

JavaScript 变量均为对象。当声明一个变量时,就创建了新的对象。对象拥有属性和方法。

JavaScript数组基础。
数组Array 对象用于在单个的变量中存储多个值。
创建 Array 对象的语法:
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为size的值。
参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段会被设置为参数的个数。
定义数组。数组对象用来在单独的变量名中存储一系列的值。
我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象:
var myArray=new Array();
有两种向数组赋值的方法(你可添加任意多的值,像你可定义你需要的任意多的变量一样)。
1:
var mycars=new Array();
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
也可以使用一个整数自变量来控制数组的容量:
var mycars=new Array(3);
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
2:
var mycars=new Array("Saab","Volvo","BMW");
注意:如果你需要在数组内指定数值或者逻辑值,那么变量类型应该是数值变量或者布尔变量,而不是字符变量。
访问数组。通过指定数组名以及索引号码,你可以访问某个特定的元素。
下面是代码行:
document.write(mycars[0]);
修改已有数组中的值
如需修改已有数组中的值,只要向指定下标号添加一个新值即可:
mycars[0]="Opel";
现在,以上代码:
document.write(mycars[0]);
将输出:Opel

Javascript对象、函数及运算符

1、Javascript对象。对象是JavaScript的基本数据类型。
对象是一种复合值:将很多值(原始值或者其他对象)聚合在一起。
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。
在 JavaScript 中,对象是拥有属性和方法的数据。
属性(参数值)和方法(行为)。属性是与对象相关的值。方法是能够在对象上执行的动作。
举例:汽车就是现实生活中的对象。
汽车的属性包括名称、型号、重量、颜色等。汽车的方法可以是启动、驾驶、刹车等。
汽车的属性:car.weight=850kg; car.color=white; 
汽车的方法:car.start();  car.stop();
JavaScript 中的对象.在 JavaScript 中,对象是数据(变量),拥有属性和方法。
当您像这样声明一个 JS变量时。var txt = "Hello";
您实际上已经创建了一个 JS 字符串对象。字符串对象拥有内建的属性 length。
对于上面的字符串来说,length 的值是 5。字符串对象同时拥有若干个内建的方法。
属性:txt.length=5;
方法:txt.indexOf();  txt.replace();  txt.search();
提示:在面向对象的语言中,属性和方法常被称为对象的成员。
创建 JavaScript 对象
JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。
你也可以创建自己的对象。本例创建名为 "person" 的对象,并为其添加了四个属性:
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";


2、Javascript函数
函数对任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且可以在任何地方、任何时候调用执行。
在javascript里,函数即对象,程序可以随意操控它们。函数可以嵌套在其他函数中定义,
这样它们就可以访问它们被定义时所处的作用域中的任何变量,它给javascript带来了非常强劲的编程能力。
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词 function。
function functionname(){
这里是要执行的代码;
}
当调用该函数时,会执行函数内的代码。可以在某事件发生时直接调用函数(比如当用户点击按钮时),
并且可由 JavaScript 在任何位置进行调用。
提示:JavaScript 对大小写敏感。关键词 function 必须是小写的,
并且必须以与函数名称相同的大小写来调用函数,即函数名也要小写。
调用带参数的函数(形参实参一一对应)
在调用函数时,您可以向其传递值,这些值被称为参数。这些参数可以在函数中使用。
您可以发送任意多的参数,由逗号 (,) 分隔:
myFunction(argument1,argument2);
当您声明函数时,请把参数作为变量来声明:
function myFunction(var1,var2){
这里是要执行的代码;
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定值,以此类推。
<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
上面的函数会当按钮被点击时提示 "Welcome Bill Gates, the CEO"。
函数很灵活,您可以使用不同的参数来调用该函数,这样就会给出不同的消息。
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
根据你点击的不同的按钮,上面的例子会提示 "Welcome Harry Potter, the Wizard" 
或 "Welcome Bob, the Builder"。
带有返回值的函数。有时,我们会希望函数将值返回调用它的地方。
通过使用 return 语句可实现。在使用 return 语句时,函数会停止执行,并返回指定的值。
语法:
function myFunction(){
var x=5;
return x;
}
上面的函数会返回值 5。
注释:整个 JavaScript 并不会停止执行,仅仅是函数。
JavaScript 将继续执行代码,从调用函数的地方。函数调用将被返回值取代:
var myVar=myFunction();
myVar 变量的值是 5,也就是函数 "myFunction()" 所返回的值。
即使不把它保存为变量,您也可以使用返回值。
document.getElementById("demo").innerHTML=myFunction();
"demo" 元素的 innerHTML 将成为 5,也就是函数 "myFunction()" 所返回的值。
您可以使返回值基于传递到函数中的参数:
例如:计算两个数字的乘积,并返回结果:
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
"demo" 元素的 innerHTML 将是:12
在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:
function myFunction(a,b){
if (a>b){
  return;
  }
x=a+b
}
如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。
局部 JavaScript 变量。声明变量用关键字var
在 JavaScript 函数内部声明的变量是局部变量,所以只能在函数内部访问它。
(该变量的作用域是局部的)。只能作用于局部区域。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,局部变量就会被删除。
全局 JavaScript 变量。
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。在脚本里函数外。
JavaScript 变量的生存期。
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值。
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
如这条语句:carname="Volvo";
将声明一个全局变量 carname,即使它在函数内执行。


3、Javascript运算符
运算符:又称为操作符,用于对数据进行各种运算,例如加、减运算等。
表达式:是由运算符和运算数组成的唯一值的公式。
一个表达式可包含零个、一个或多个运算符,一个或个运算数,表达式总返回一个确定的值。
运算符的分类:1.算术运算符2.赋值运算符3.字符串运算符
4.比较运算符5.逻辑运算符6.三目(三元)运算符
JavaScript 算术运算符。运算符等于给 JavaScript 变量赋值。
算术运算符 + 用于把值加起来。
y=5;   z=2;   x=y+z; 在以上语句执行后,x 的值是 7。
算术运算符用于执行变量与/或值之间的算术运算。
JavaScript 赋值运算符
赋值运算符用于给 JavaScript 变量赋值。x+=y;就是x=x+y;
用于字符串的 + 运算符
+ 运算符用于把文本值或字符串变量加起来(连接起来)。
如需把两个或多个字符串变量连接起来,请使用 + 运算符。
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
在以上语句执行后,变量 txt3 包含的值是 "What a verynice day"。
要想在两个字符串之间增加空格,需要把空格插入一个字符串之中:
txt1="What a very ";
txt2=" nice day";
txt3=txt1+txt2;
或者把空格插入表达式中:
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
在以上语句执行后,变量 txt3 包含的值是:
"What a very nice day"
如果把数字与字符串相加,结果将成为字符串。
比较和逻辑运算符用于测试 true 或 false。
比较运算符在逻辑语句中使用,以测定变量或值是否相等。
可以在条件语句中使用比较运算符对值进行比较,然后根据结果来采取行动:
if (age<18) document.write("Too young");
逻辑运算符用于测定变量或值之间的逻辑。或与非。
条件运算符(三目运算符)
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
格式:条件表达式 ? 表达式1 : 表达式2 ;
说明:1、先判断条件表达式的值。
2 、如果条件表达式值为真,就执行表达式1,
3、如果条件表达式的值为假,就执行表达式2;
语法:   variablename=(condition)?value1:value2; 
例子:   greeting=(visitor=="PRES")?"Dear President ":"Dear ";
如果变量 visitor 中的值是 "PRES",则向变量 greeting 赋值 "Dear President ",否则赋值 "Dear"。
JavaScript流程控制
流程控制是每一门编程语言必备的元素,不管它是面向过程还是面向对象。
流程控制分为3种:顺序、选择和循环。
JS脚本一般出现在head标签内部。或出现在body标签的结尾处。
1、顺序
顺序流程:代码从上到下的执行,按照代码的位置执行。
var i = 1;
i = i +1;
alert(i);
上面三行代码就是按照1,2,3的顺序执行
2、选择
通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在JavaScript中,选择结构共有5种:
(1)if语句;
(2)if……else语句;
(3)if……else if……语句;
(4)if语句的嵌套;
(5)switch语句;
3、If 语句
只有当指定条件为 true 时,该语句才会执行代码。
语法:
if (条件)
  {
  只有当条件为 true 时执行的代码;
  }
注意:请使用小写的 if。使用大写字母(IF)会生成 JavaScript 错误!
例如:当时间小于 20:00 时,生成一个“Good day”问候:
if (time<20)
  {
  x="Good day";
  }
x 的结果是:Good day
If...else 语句
请使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。
语法:
if (条件)
  {
  当条件为 true 时执行的代码;
  }
else
  {
  当条件不为 true 时执行的代码;
  }
例如:当时间小于 20:00 时,将得到问候 "Good day",否则将得到问候 "Good evening"。
if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
x 的结果是:Good day
If...else if...else 语句
使用 if....else if...else 语句来选择多个代码块之一来执行。
语法:
if (条件 1)
  {
  当条件 1 为 true 时执行的代码;
  }
else if (条件 2)
  {
  当条件 2 为 true 时执行的代码;
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码;
  }
例如,如果时间小于 10:00,则将发送问候 "Good morning",否则如果时间小于 20:00,则发送问候 "Good day",否则发送问候 "Good evening":
if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
JavaScript Switch 语句
请使用 switch 语句来选择要执行的多个代码块之一。
语法:
switch(n)
{
case 1:
  执行代码块 1;
  break;
case 2:
  执行代码块 2;
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码;
}
工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
例如,显示今日的周名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等:
var day=new Date().getDay();
switch (day)
{
case 0:
  x="Today it's Sunday";
  break;
case 1:
  x="Today it's Monday";
  break;
case 2:
  x="Today it's Tuesday";
  break;
case 3:
  x="Today it's Wednesday";
  break;
case 4:
  x="Today it's Thursday";
  break;
case 5:
  x="Today it's Friday";
  break;
case 6:
  x="Today it's Saturday";
  break;
}
default 关键词
请使用 default 关键词来规定匹配不存在时做的事情:
例如,如果今天不是周六或周日,则会输出默认的消息:
var day=new Date().getDay();
switch (day)
{
case 6:
  x="Today it's Saturday";
  break;
case 0:
  x="Today it's Sunday";
  break;
default:
  x="Looking forward to the Weekend";
}
x 的结果:Looking forward to the Weekend
循环。在JavaScript中,循环结构有3种:
(1)while语句;
(2)do……while语句;
(3)for语句;
如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。
我们可以这样输出数组的值:
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
不过通常我们这样写:
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
只要指定条件为 true,循环就可以一直执行代码。
while 循环。
While 循环会在指定条件为真时循环执行代码块。
语法:
while (条件)
  {
  需要执行的代码;
  }
本例中的循环将继续运行,只要变量 i 小于 5:
while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
提示:如果您忘记增加条件中所用变量的值,该循环永远不会结束。该可能导致浏览器崩溃。
do/while 循环
do/while 循环是 while 循环的变体。该循环会先执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。
语法:
do
  {
  需要执行的代码;
  }
while (条件);
下面的例子使用 do/while 循环。该循环至少会执行一次,即使条件是 false,隐藏代码块会在条件被测试前执行:
do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5);
For 循环
for 循环是您在希望创建循环时常会用到的工具。
下面是 for 循环的语法:
for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块;
  }
语句 1 在循环(代码块)开始前执行,初始化值
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
实例
for (var i=0; i<5; i++)
  {
  x=x + "The number is " + i + "<br>";
  }
从上面的例子中,您可以看到:
Statement 1 在循环开始之前设置变量 (var i=0)。
Statement 2 定义循环运行的条件(i 必须小于 5)。
Statement 3 在每次代码块已被执行后增加一个值 (i++)。
语句 1
通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的,也就是说不使用语句 1 也可以。
您可以在语句 1 中初始化任意(或者多个)值:
实例:
for (var i=0,len=cars.length; i<len; i++)
{
document.write(cars[i] + "<br>");
}
同时您还可以省略语句 1(比如在循环开始前已经设置了值时):
实例:
var i=2,len=cars.length;
for (; i<len; i++)
{
document.write(cars[i] + "<br>");
}
语句 2
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true,则循环再次开始,如果返回 false,则循环将结束。
提示:如果您省略了语句 2,那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。
语句 3
通常语句 3 会增加初始变量的值。
语句 3 也是可选的。
语句 3 有多种用法。增量可以是负数 (i--),或者更大 (i=i+15)。
语句 3 也可以省略(比如当循环内部有相应的代码时):
实例:
var i=0,len=cars.length;
for (; i<len; )
{
document.write(cars[i] + "<br>");
i++;
}
For/In 循环
JavaScript for/in 语句循环遍历对象的属性:
实例
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
  {
  txt=txt + person[x];
  }
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
Break 语句
它用于跳出 switch() 语句。
break 语句可用于跳出循环。
break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):
实例
for (i=0;i<10;i++)
  {
  if (i==3)
    {
    break;
    }
  x=x + "The number is " + i + "<br>";
  }
由于这个 if 语句只有一行代码,所以可以省略花括号:
for (i=0;i<10;i++)
  {
  if (i==3) break;
  x=x + "The number is " + i + "<br>";
  }
Continue 语句
continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。
该例子跳过了值 3:
实例
for (i=0;i<=10;i++)
 {
 if (i==3) continue;
  x=x + "The number is " + i + "<br>";
  }
JavaScript 标签
正如您在 switch 语句那一章中看到的,可以对 JavaScript 语句进行标记。
如需标记 JavaScript 语句,请在语句之前加上冒号:
label:
语句
break 和 continue 语句仅仅是能够跳出代码块的语句。
语法
break labelname;
continue labelname;
continue 语句(带有或不带标签引用)只能用在循环中。
break 语句(不带标签引用),只能用在循环或 switch 中。
通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:
实例
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}

总结

1.JavaScript:直接写入 HTML 输出流。
document.write("<h1>这是一个标题</h1>");
您只能在 HTML 输出中使用 document.write。记住,如果您在文档加载后使用该方法,会覆盖整个文档。
2.JavaScript:对事件的反应。
<button type="button" onclick="alert('欢迎!')">点我!</button>
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
3.JavaScript:改变 HTML 内容。
x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容
您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。
DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。
4.JavaScript:改变 HTML 样式。
x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式
5.JavaScript 常用于验证用户的输入。
if isNaN(x) {
    alert("不是数字");
}
以上实例只是普通的验证,如果要在生产环境中使用,需要严格判断,
如果输入的空格,或者连续空格 isNaN 是判别不出来的。可以添加正则来判断:
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
    alert("不是数字");
}


<body> 中的 JavaScript
<script>
document.write("<h1>这是一个标题</h1>");
</script>
上面例子中的 JavaScript 语句,会在页面加载时执行。
JavaScript 函数和事件。
通常我们需要在某个事件发生时执行代码,比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。


把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。
该函数会在点击按钮时被调用(单击事件):
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分,要是放在<body> 中就放在其底部。
该函数会在点击按钮时被调用:
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction(){
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>
注意细节:
1、在标签中填写 onclick 事件调用函数时,不是 onclick=函数名, 而是 onclick=函数名()
2、外部 javascript 文件不使用 <script> 标签,而是直接写 javascript 代码。
3、HTML 输出流中使用 document.write,相当于添加在原有html代码中添加一串html代码。
而如果在文档加载后使用(如使用函数),会覆盖整个文档。
使用函数来执行document.write代码如下:
<script>
function myfunction(){
    document.write("使用函数来执行doucment.write,即在文档加载后再执行这个操作,会实现文档覆盖");
}
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p >
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
<button type="button" onclick="myfunction()">点击这里</button>

在浏览器页面可以通过按下 F12(Fn+F12) 按钮或者右击页面,选择"检查"来开启开发者工具。
打开开发者工具后,我们可以在 Console 窗口调试 JavaScript代码:
在 > 符号后输入我们要执行的代码 console.log(“runoob”),按回车后执行。

在这里插入图片描述

JavaScript 输出(window可省略):
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

window.alert(),弹出警告框来显示数据:(window可省略)
window.alert(5+6) 与 window.alert("5+6") 输出的值是不一样的。
window.alert(5+6) 会输出 11,而window.alert("5+6") 会输出 5+6。
这是因为当用引号时会认为引号中是字符串,从而直接将引号中的内容打印出来。

操作 HTML 元素,使用 document.getElementById(id) 方法。
使用 "id" 属性来标识 HTML 元素,并 innerHTML 来替换元素内容:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

可以将JavaScript直接写在HTML 文档中:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>
使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
    document.write(Date());
}
</script>
</body>
</html>

写到控制台。使用 console.log() 方法在浏览器中显示 JavaScript 值。
在浏览器页面可以通过按下 F12(Fn+F12) 按钮或者右击页面,选择"检查"来开启开发者工具。
在调试窗口中点击 "Console" 菜单。程序中调试是测试,查找及减少bug(错误)的过程。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

console.log()的用处,
主要是方便你调式javascript用的, 你可以看到你在页面中输出的内容。
相比alert他的优点是:
他能看到结构化的东西,如果是alert,弹出一个对象就是[Object object],但是console能看到对象的内容。
console不会打断你页面的操作,如果用alert弹出来内容,那么页面就卡住了,
但是console输出内容后你页面还可以正常操作。

document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 
浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。
innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。
你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。
innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。
document.getElementById("id")。这个方法是 HTML DOM 中定义的。
DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。
JavaScript 是一个脚本语言。它是一个轻量级,但功能强大的编程语言。
JavaScript 字面量(在编程语言中,一般固定值称为字面量,如 3.14)
数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。3.14。1001。123e5。
123e5就是123乘以10的5次方。
字符串(String)字面量 可以使用单引号或双引号:"John Doe"。'John Doe'。建议双引号
表达式字面量 用于计算:5 + 6。5 * 10。
数组(Array)字面量 定义一个数组:[40, 100, 1, 5, 25, 10]
对象(Object)字面量 定义一个对象:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数(Function)字面量 定义一个函数:function myFunction(a, b) { return a * b;}
JavaScript 变量。(在编程语言中,变量用于存储数据值)
JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:var x = 5;
变量可以通过变量名访问。在指令式语言中,变量通常是可变的。字面量是一个恒定的值。
变量是一个名称。字面量是一个值。

JavaScript 操作符
JavaScript使用 算术运算符 来计算值:(5 + 6) * 10;
JavaScript使用赋值运算符给变量赋值:x = 5; y = 6;  z = (x + y) * 10;

JavaScript 语句
在 HTML 中,JavaScript 语句向浏览器发出的命令。
语句是用分号分隔:x = 5 + 6; y = x * 10;
JavaScript 关键字
JavaScript 关键字用于标识要执行的操作。
var 关键字告诉浏览器创建一个新的变量:
var x = 5 + 6;
var y = x * 10;
JavaScript 注释
// 单行注释
/* 多行注释 */
HTML注释符号是以 <-- 开始以 --> 结束的。
JavaScript 数据类型
JavaScript 有多种数据类型:数字,字符串,数组,对象等等:
var x = 16;                                       // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

JavaScript 函数
JavaScript 语句可以写在函数内,函数可以重复引用:
function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}
在标签中填写 onclick 事件调用函数时,不是 onclick=函数名, 而是 onclick=函数名()

JavaScript 字母大小写。
JavaScript 对大小写是敏感的。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。

= 用于赋值。
+ 用于加值。+连接字符串,只要+有一侧是字符串结果就是字符串。
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
通常我们在每条可执行的语句结尾添加分号。(也可不加分号,但是建议加上分号)
JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。
JavaScript 变量,变量是用于存储信息的"容器"。
JavaScript 语句和 JavaScript 变量都对大小写敏感。
使用 var 关键词来声明变量:
var carname;
变量声明之后,该变量是空的(它没有值)。
如需向变量赋值,请使用等号:
carname="Volvo";
也可以在声明变量时对其赋值:
var carname="Volvo";
一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。
Value = undefined
在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。
在执行过以下语句后,变量 carname 的值将是 undefined:
var carname;
如果重新声明 JavaScript 变量,该变量的值不会丢失:
在以下两条语句执行后,变量 carname 的值依然是 "Volvo":
var carname="Volvo";
var carname;
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、
对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。
注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
实例
var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串
JavaScript 字符串
字符串是存储字符(比如 "Bill Gates")的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号,建议双引号。
JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:
实例
var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写
极大或极小的数字可以通过科学(指数)计数法来书写:
实例
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123
JavaScript 布尔
布尔(逻辑)只能有两个值:true 或 false。布尔常用在条件测试中。

JavaScript 数组
下面的代码创建名为 cars 的数组:
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
或者 (literal array):
实例
var cars=["Saab","Volvo","BMW"];

JavaScript 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"John", lastname:"Doe", id:5566};
上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行:
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};
对象属性有两种寻址方式:
实例
name=person.lastname;
name=person["lastname"];

Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
实例
cars=null;
person=null;
注意 undefined 和 null 都是小写,并且。
var x,y;
if(x == null){
    document.write(x);
}
if(y == undefined){
    document.write(y);
}
二者都会输出 undefined

声明变量类型
当您声明新变量时,可以使用关键词 "new" 来声明其类型:
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;
JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。
JavaScript 对象是拥有属性和方法的数据。
可以使用字符来定义和创建 JavaScript 对象:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
通过两种方式访问对象属性:
实例 1
person.lastName;
实例 2
person["lastName"];
对象的方法定义了一个函数,并作为对象的属性存储。
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
JavaScript 函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionname(){
    // 执行代码
}
当调用该函数时,会执行函数内的代码。
可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数(形参)形参只在函数内起作用,是局部变量。
在调用函数时,可以向其传递值(实参,形参和实参一一对应)
function myFunction(var1,var2){
代码
}
实例
<p>点击这个按钮,来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

带有返回值的函数
有时希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。
在使用 return 语句时,函数会停止执行,并返回指定的值。
function myFunction(){
    var x=5;
    return x;
}
上面的函数会返回值 5。
注意: 整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。
var myVar=myFunction();
myVar 变量的值是 5,也就是函数 "myFunction()" 所返回的值。
即使不把它保存为变量,您也可以使用返回值:
document.getElementById("demo").innerHTML=myFunction();
"demo" 元素的 innerHTML 将成为 5,也就是函数 "myFunction()" 所返回的值。
您可以使返回值基于传递到函数中的参数:
计算两个数字的乘积,并返回结果:
function myFunction(a,b){
    return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);

仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:
function myFunction(a,b){
    if (a>b)
    {
        return;
    }
    x=a+b;
}
如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,
所以只能在函数内部访问它。(该变量的作用域是局部的)。

全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
向未声明的 JavaScript 变量分配值(全局变量)
如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。
这条语句:carname="Volvo";
将声明 window 的一个属性 carname。向未声明的 JavaScript 变量分配值也就是全局变量

JavaScript 局部作用域
变量在函数内声明,变量为局部作用域。
局部变量:只能在函数内部访问。
实例
// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}
局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。

JavaScript 全局变量
变量在函数外定义,即为全局变量。
全局变量有全局作用域: 网页中所有脚本和函数均可使用。 
实例
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
以下实例中 carName 在函数内,但是为全局变量。
实例
// 此处可调用 carName 变量
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
实例
//此处可使用 window.carName
function myFunction() {
    carName = "Volvo";
}

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事件。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。

HTML 事件
HTML 事件可以是浏览器行为,也可以是用户行为。
以下是 HTML 事件的实例:
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
通常,当事件发生时,你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。
<some-HTML-element some-event="JavaScript 代码">
在以下实例中,按钮元素中添加了 onclick 属性 (并加上代码):
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
以上实例中,JavaScript 代码将修改 id="demo" 元素的内容。
在下一个实例中,代码将修改自身元素的内容 (使用 this.innerHTML):
<button onclick="this.innerHTML=Date()">现在的时间是?</button>

常见的HTML事件

事件描述
onchangeHTML 元素改变
onclick用户点击 HTML 元素
onmouseover用户在一个HTML元素上移动鼠标
onmouseout用户从一个HTML元素上移开鼠标
onkeydown用户按下键盘按键
onload浏览器已完成页面的加载
事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:
页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
等等 ...
可以使用多种方法来执行 JavaScript 事件代码:
HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
你可以阻止事件的发生。
等等 ...
JavaScript 字符串
JavaScript 字符串用于存储和处理文本。
字符串是存储字符(比如 "Bill Gates")的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号,建议双引号。
可以使用索引位置来访问字符串中的每个字符:
var character = carname[7];字符串的索引从 0 开始
可以使用内置属性 length 来计算字符串的长度:
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
字符串可以是对象
通常, JavaScript 字符串是原始值,可以使用字符创建: var firstName = "John"
也可以使用 new 关键字将字符串定义为一个对象: var firstName = new String("John")
var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object
不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用。
var x = "John";             
var y = new String("John");
(x === y) // 结果为 false,因为 x 是字符串,y 是对象。
=== 为绝对相等,即数据类型与值都必须相等。
字符串属性和方法
原始值字符串,如 "John", 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法,因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

字符串属性

属性描述
constructor返回创建字符串属性的函数
length返回字符串的长度
prototype允许您向对象添加属性和方法

字符串方法

方法描述
charAt()返回指定索引位置的字符
charCodeAt()返回指定索引位置字符的 Unicode 值
concat()连接两个或多个字符串,返回连接后的字符串
fromCharCode()将 Unicode 转换为字符串
indexOf()返回字符串中检索指定字符第一次出现的位置
lastIndexOf()返回字符串中检索指定字符最后一次出现的位置
localeCompare()用本地特定的顺序来比较两个字符串
match()找到一个或多个正则表达式的匹配
replace()替换与正则表达式匹配的子串
search()检索与正则表达式相匹配的值
slice()提取字符串的片断,并在新的字符串中返回被提取的部分
split()把字符串分割为子字符串数组
substr()从起始索引号提取字符串中指定数目的字符
substring()提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase()根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase()把字符串转换为小写
toString()返回字符串对象值
toUpperCase()把字符串转换为大写
trim()移除字符串首尾空白
valueOf()返回某个字符串对象的原始值
typeof 操作符
你可以使用 typeof 操作符来检测变量的数据类型。
typeof "John"        // 返回 string
typeof 3.14         // 返回 number
typeof false         // 返回 boolean
typeof [1,2,3,4]       // 返回 object
typeof {name:'John', age:34} // 返回 object
ull
null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是object。
你可以设置为 null 来清空对象:
实例
var person = null;           // 值为 null(空), 但类型为对象
你可以设置为 undefined 来清空对象:
实例
var person = undefined;     // 值为 undefined, 类型为 undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
实例
var person;                  // 值为 undefined(空), 类型是undefined
任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined
实例
person = undefined;          // 值为 undefined, 类型是undefined
undefined 和 null 的区别
实例
null 和 undefined 的值相等,但类型不等:
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true
(1)undefined:是所有没有赋值变量的默认值,自动赋值。
(2)null:主动释放一个变量引用的对象,表示一个变量不再指向任何对象地址。
当使用完一个比较大的对象时,需要对其进行释放内存时,设置为 null。
null 与 undefined 的异同点是什么呢?
共同点:都是原始类型,保存在栈中变量本地。
不同点:
(1)undefined——表示变量声明过但并未赋过值。
它是所有未赋值变量默认值,例如:
var a;    // a 自动被赋值为 undefined
(2)null——表示一个变量将来可能指向一个对象。
一般用于主动释放指向对象的引用,例如:
var emps = ['ss','nn'];
emps = null;     // 释放指向数组的引用

JSON

JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据。
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。
文本可以被任何编程语言读取及作为数据格式传递。
JSON 格式化后为 JavaScript 对象
JSON 语法规则
数据为 键/值 对。
数据由逗号分隔。
大括号保存对象
方括号保存数组
JSON 数据 - 一个名称对应一个值
JSON 数据格式为 键/值 对,就像 JavaScript 对象属性。
键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:
"name":"Runoob"
JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个 键/值 对:
{"name":"Runoob", "url":"www.runoob.com"}
JSON 数组保存在方括号内。
就像在 JavaScript 中, 数组可以包含对象:
"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]
在以上实例中,对象 "sites" 是一个数组,包含了三个对象。
每个对象为站点的信息(网站名和网站地址)。
JSON 字符串转换为 JavaScript 对象
通常我们从服务器中读取 JSON 数据,并在网页中显示数据。
首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);
最后,在你的页面中使用新的 JavaScript 对象:
var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}'; 
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
函数描述
JSON.parse()用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。
异步的概念:
异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。
传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,
而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,
也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。
简单理解:同步按代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。
异步就是从主线程发射一个子线程来完成任务。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值