1.用法
HTML 中的脚本必须位于 <script>
与 </script>
标签之间。
2.输出
JavaScript 可以通过不同的方式来输出数据:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
3.语法
1.字面量:数字、字符串、表达式、数组(Array)、对象(Object)、函数(Function)字面量
2.变量:用var来定义
3.操作符:算术与赋值
4.语句:用分号隔开, 对大小写是敏感的
5.关键字:必须以字母、下划线(_)或美元符($)开始,js有自己的保留字
6.数据类型:数字,字符串,数组,对象等
4.语句
1.分号隔开
2.代码:浏览器按照编写顺序依次执行每条语句
3.开始:语句通常以一个 语句标识符 为开始,并执行该语句。语句标识符是保留关键字不能作为变量名使用。
4.空格:JavaScript 会忽略多余的空格
5.变量
1.变量:可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。变量必须以字母开头,变量也能以 $ 和 _ 符号开头(不推荐), 变量名称对大小写敏感(y 和 Y 是不同的变量)
2. 变量的数据类型:有文本和数值。当变量分配文本值时,应该用双引号或单引号包围这个值。当变量赋的值是数值时,不要使用引号。如果用引号包围数值,该值会被作为文本来处理。
3. 声明:用var来声明变量,用=进行赋值。在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可。
6.数据类型
5 种不同的数据类型:
1.字符串(String):使用单引号或双引号
2.数字(Number):
typeof NaN // 返回 number
JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言,包括 JavaScript,对浮点型数据的精确度都很难确定:
var x = 0.1;
var y = 0.2;
var z = x + y // z 的结果为 0.3
if (z == 0.3) // 返回 false
修改,用整数的乘除法来解决:
var z = (x * 10 + y * 10) / 10; // z 的结果为 0.3
3.布尔(Boolean):布尔(逻辑)只能有两个值:true 或 false
4.对象(Object)
5.函数(Function)
3 种对象类型:
1.对象(Object):对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义,属性由逗号分隔。对象的寻址方式:
name=person.lastname;
//person是定义的变量,lastname是属性的名称。可以找到属性的值
name=person["lastname"];
2.数组(Array):数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。JavaScript 不支持使用名字来索引数组,只允许使用数字索引。定义数组元素,最后不能添加逗号。
3.Date
2 种不包含任何值的数据类型:
Undefined 和 Null:undefined 这个值表示变量不含有值,null可清空变量。null 用于对象, undefined 用于变量,属性和方法。
声明变量的类型:
当声明新变量时,可以使用关键词 “new” 来声明其类型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
变量均为对象。当声明一个变量时,就创建了一个新的对象。
7.对象
对象是拥有属性和方法的数据。
1.对象:所有的事物都是对象。JavaScript 对象是变量的容器
2.定义:使用字符来定义和创建 JavaScript 对象。
3.属性:JavaScript 对象是键值对的容器。键值对通常写法为 name : value (键与值以冒号分割)。
4.访问属性
name=person.lastname;
//person是定义的变量,lastname是属性的名称。可以找到属性的值
name=person["lastname"];
5.方法:定义了一个函数,并作为对象的属性存储。 对象方法通过添加 () 调用 (作为一个函数)。
name = person.fullName();
//访问了 person 对象的 fullName() 方法:
name = person.fullName;
//访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回
5.访问方法
methodName : function() { code lines } //创建方法
objectName.methodName() //访问方法
8.函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1.语法:函数是包裹在花括号中的代码块,使用了关键词 function
2.调用带参数的函数:在调用函数时,可以向其传递值,这些值被称为参数。参数可以有多个,由逗号 (,) 分隔。
当声明函数时,把参数作为变量来声明。变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。
<p>点击这个按钮,来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
3.带有返回值的函数:通过使用 return 语句可以实现,函数会停止执行,并返回指定的值。当退出函数时 ,也可使用 return 语句。
9.作用域
局部变量与全局变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它,故可以在不同的函数中使用名称相同的局部变量。只要函数运行完毕,本地变量就会被删除。
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。
10.事件
HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
1.语法:<some-HTML-element some-event='‘JavaScript 代码’'>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
//修改了id为demo的元素
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
//修改了自身的内容
2.常用事件
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加
11.字符串
用于存储和处理文本。
1.字符串:
使用单引号或双引号
可以使用索引位置来访问字符串中的每个字符,字符串的索引从 0 开始[0]
在字符串添加转义字符来使用引号
2.可以使用内置属性**. length
** 来计算字符串的长度
3.JavaScript 字符串是原始值,可以使用字符创建。也可以使用 new 关键字将字符串定义为一个对象
<script>
var x = "John"; // x是一个字符串
var y = new String("John"); // y是一个对象
document.getElementById("demo").innerHTML =typeof x + " " + typeof y;
</script>
12.运算符
算数运算符
加+、减—、乘*、除/、取余%、++ 自增 、-- 自减
i++表示先赋值后运算,++i表示先运算后赋值(减法同理)
赋值运算符
=、+= 、-= 、*= 、/= 、%=
+=的意思:i+=j 意思是i=i+j
字符串操作
(1)字符串与字符串相加的效果:字符串的拼接;
(2)字符串与其他类型相加的效果:其他类型被转换为字符串,与字符串拼接;
(3)字符串操作可以不声明,直接使用var j=”5”+5 输出j为:55
13.比较
比较运算符
==
、===
、!=
、!==
、>
、<
、>=
、<=
(1)比较运算符的输出结果都是波尔类型:ture或者false
(2)在双等==
时,当比较元素的字符串的值和别的类型值时,别的值会被自动转换为字符串进行比较。例:”5”和5的输出为true
(3)在三等===
时,类型也必须完全相同。例:”5”和5的输出为false
(4)同理,不等!=
和完全不等!==
逻辑运算符
&&与、||或、!非
输出结果为布尔类型
条件运算符
语法:
document.write(i>10?"i大于10":"i小于10");
//条件,符合条件输出结果,不符合条件的输出结果
14.条件语句
if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码。注意判断条件要用==
if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
<script>
var i=1;
switch (i) {
case 1: //当i为1时的情况
document.write("i=1"); //执行
break //跳出当前
case 2:
document.write("i=2");
break
default: //如果不满足以上的case时
document.write("条件不满足");
break
}
</script>
15.循环语句
1. for 语句:
<script>
var i=[1,2,3,4,5,6];
for (j=0;j<6;j++){
//语句1开始前执行,语句 2 定义运行循环的条件,语句3在循环已被执行之后执行
document.write(i[j]+"、")
}
</script>
2. for/in 循环遍历对象的属性
<script>
var i=[1,2,3,4,5,6];
var j
for (j in i){ /
// 用于对数组或者对象的属性进行循环操作。
// for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。
document.write(i[j]+"、")
}
</script>
3.while - 当指定的条件为 true 时循环指定的代码块
<script>
var i=1;
while (i<10){ //先判定
document.write("i="+i+"<br/>") //再执行
i++;
}
</script>
4. do/while - 同样当指定的条件为 true 时循环指定的代码块
<script>
var i=10;
do{ //区别是do...while会先执行一次再判定,而while先判定
document.write("i="+i+"<br/>")
i++;
}
while (i<10){
}
</script>
5.Break 和 Continue 语句
break 语句可用于跳出循环
continue 语句跳出循环后,会继续执行该循环之后的代码
6.标签
有了标签,可以使用break和continue在多层循环的时候控制外层循环:
outerloop:
for (var i = 0; i < 10; i++)
{
innerloop:
for (var j = 0; j < 10; j++)
{
if (j > 3)
{
break;
}
if (i == 2)
{
break innerloop;
}
if (i == 4)
{
break outerloop;
}
document.write("i=" + i + " j=" + j + "");
}
}
16.typeof 操作符
- typeof 操作符来检测变量的数据类型。
typeof "John" // 返回 string typeof 3.14 // 返回 number typeof false // 返回 boolean typeof [1,2,3,4] // 返回 object,数组是一种特殊的对象类型。 typeof {name:'John', age:34} // 返回 object
2.null值为 null(空), 类型为对象
undefined值为 undefined(空), 类型为 undefined
17.类型转换
1.由于数组和日期的类型都是object,所以需要constructor属性返回。constructor 属性返回所有 JavaScript 变量的构造函数:
"John".constructor // 返回function String() { [native code] }
(3.14).constructor // 返回function Number() { [native code] }
false.constructor // 返回function Boolean() { [native code] }
[1,2,3,4].constructor // 返回function Array() { [native code] }
{name:'John', age:34}.constructor // 返回function Object() { [native code] }
new Date().constructor // 返回function Date() { [native code] }
function () {}.constructor // 返回function Function(){ [native code] }
举例:
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
返回函数类型,转为字符串,返回某个指定的字符串值在字符串中首次出现的位置。看看是否包含字符串 “Array”。
2.JavaScript 类型转换
(1)全局方法 String()
将数字转换为字符串:
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
x.toString()
(123).toString()
(100 + 23).toString()
将布尔值转换为字符串
String(false) // 返回 "false"
String(true) // 返回 "true"
false.toString() // 返回 "false"
true.toString() // 返回 "true"
将日期转换为字符串
(2)全局方法 Number() 可以将字符串转换为数字。
Number("99 88") // 返回 NaN,意思是这是一个非数字值
(3)Operator + 可用于将变量转换为数字
var y = "John"; // y 是一个字符串
var x = + y; // x 是一个数字 (NaN)
(4)全局方法 Number() 可将布尔值转换为数字。
18.正则表达式
正则表达式是由一个字符序列形成的搜索模式。
search()
方法使用正则表达式:搜索
var str = "Visit Runoob!";
var n = str.search(/Runoob/i); //输出结果为6
replace()
方法使用正则表达式:取代
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
test()
方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
exec()
方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
19. 错误 - throw、try 和 catch
- 抛出(throw)错误:当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息。描述这种情况的技术术语是JavaScript 将抛出一个错误。
function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "值为空"; if(isNaN(x)) throw "不是数字"; x = Number(x); if(x < 5) throw "太小"; if(x > 10) throw "太大"; } catch(err) { message.innerHTML = "错误: " + err; }
}
2.try和 catch:try 语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。
3.语法
try { //在这里运行代码 } catch(err) { //在这里处理错误 }
4.异常捕获
<script>
function demo() {
try { //捕获错误
alert(str); // 一定执行,无论是否有错
}catch (err) {
alert(err); //当发生错误时才会触发
}
}
</script>
20. 调试
1.console.log()
方法:使用 console.log() 方法在调试窗口上打印 JavaScript 值
2.设置断点:设置 JavaScript 代码的断点,在每个断点上,都会停止执行 JavaScript 代码,以便于检查 JavaScript 变量的值.
3.debugger 关键字:用于停止执行 JavaScript,并调用调试函数。这个关键字与在调试工具中设置断点的效果是一样的。如果没有调试可用,debugger 语句将无法工作。开启 debugger ,代码在第三行前停止执行。
21.表单
22.表单验证
23.JSON字符串
JSON 是用于存储和传输数据的格式, 通常用于服务端向网页传递数据 。
JSON.parse()
用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()
用于将 JavaScript 值转换为 JSON 字符串。
24.void
javascript:void(0) 中最关键的是 void 关键字, 该操作符指定要计算一个表达式但是不返回值。
href="#"与href="javascript:void(0)"的区别:
#包含了一个位置信息,默认的锚是#top 也就是网页的上端。而javascript:void(0), 仅仅表示一个死链接。在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id