JS简介
外部JavaScript中文件的文件扩展名为.js,如果使用外部文件,那么标签需要设置它的src属性为文件路径
JavaScript输出
操作HTML元素
如果需要从JavaScript中访问HTML中的元素,您可以使用document.getElementById()方法,请使用id属性标识HTML元素
JavaScript由Web浏览器来执行,在这种情况下浏览器将访问id=”demo”的HTML元素并把它的内容(“innerHTML”)替换为”
写入文档输出
document.write(“”);
警告
请使用document.write仅仅写入内容,如果在文档完成后执行document.write,整个HTML页面将被覆盖
JavaScript语句
JavaScript语句向浏览器发出的命令,语句的作用是告诉浏览器该做什么,下面的JavaScript语句向id=”demo”的HTML元素输出文本”Hello,World”
document.getElementById(“id”).innerHTML = “写入的文本”;
分号用于分隔JavaScript语句
通常我们在每条JavaScript语句结尾添加分号
使用分号的另一条语句是编写多条语句
,您也有可能看到不带有分号的案例里,在JavaScript中,用分号来结束语句是可选的
JavaScript代码
JavaScript代码(或者只有JavaScript)是JavaScript语句的序列
浏览器会按照编写语句的顺序来执行每条语句
JavaScript代码块
JavaScript语句通过代码块的形式进行组合
JavaScript对大小写敏感
JavaScript对大小写是敏感的
当编写JavaScript语句时,请留意是否关闭大小写切换键
空格
JavaScript会忽略多余的空格,您可以向脚本添加空格,来提高其可读性
对代码进行拆行
您知道吗?
JavaScript是脚本语言。浏览器会在读取代码时,逐行的执行脚本代码而对于传统编程来说,会在执行前对所有代码进行编译
JavaScript中的注释
JavaScript中的注释可用于提高代码的可读性
JavaScript不会执行注释
我们可以添加注释对JavaScript进行解释,或者提高代码的可读性
单行注释以“//”开头
JavaScript多行注释
多行注释以“/*”开头,以“*/”结尾
使用注释来阻止执行
在行末使用注释
JavaScript变量
就像代数那样
在代数中,我们使用字母来保存值
通过表达式可以计算值
JavaScript变量
变量必须以字母开头
变量也能以“$”或“_”开头
变量名称对大小敏感
JavaScript数据类型
JavaScript变量有很多类型,我们只关注数字和字符串
当向变量分配值的时候应该用双引号或单引号包围这个值
当向数字变量分配制的时候,不要使用引号
JavaScript声明变量
var a = “1”;
var a = 1
一条语句多个变量
var name = ‘’.age = 1;
Value = underfined
在计算机程序中,经常会声明无值的变量
未使用值来声明的变量其值实际上是underfined
重新声明JavaScript变量
如果重新声明JavaScript变量,该变量的值不会丢失
JavaScript算数
您可以通过JavaScript变量来做算数,使用的是“=”和“+”
JavaScript中的数据类型
字符串、数字、布尔、数组、对象、Null、underfined
JavaScript拥有动态数据类型
JavaScript拥有动态数据类型,这意味着相同的变量可以为不同的数据类型
JavaScript字符串
字符串是存储字符的变量
字符串可以是引号中的任意文本,您可以使用单引号或双引号
JavaScript数字
JavaScript只有一种数字类型,数字可以带小数点也可以不带
JavaScript布尔
布尔(逻辑),只有两种数据类型,true和false
JavaScript数组:数组下标是基于0的,所以第一个项目是0第二个是1依次类推
(1)var cars = new Array(); cars[0] = “”; cars[1] = “”
(2)var cars = new Array(“”,””,””);
(3)var = [“”,””,””];
JavaScript对象
对象由花括号分割。在括号内部以名称和值对的形式来定义属性由逗号分割
空格和拆行无关紧要,声明克横跨多行
var person
{
firstName = “”;
age = “”;
}
underfined和Null
underfined表示不含有值
Null可以通过设置变量的值为Null来清空变量
声明变量类型
当声明新变量时,可以使用关键字“new”来声明其类型
JavaScript变量均为对象,当您声明了一个对象时,就创建了以恶搞新对象。
JavaScript对象
JavaScript中所有的事物都是对象:字符串、数组、日期等等
在JavaScript中,对象是拥有属性和方法的数据
属性和方法
属性是与对象相关的值,方法是能够在对象上执行的动作
例子:
汽车就是现实生活的对象
汽车的属性
car.name = “”;
car.model = “”;
汽车的方法
car.start();
JavaScript中的对象
在JavaScript中,对象是数据(变量),拥有属性和方法
创建JavaScript对象
JavaScript中,几乎所有的事物都是一个对象:字符串、数组、数字、日期、函数等等
你也可以创建自己的对象
访问对象的属性
对象名称.对象属性
访问对象的方法
对象名称.对象方法
函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
JavaScript的函数语法
函数就是包裹着花括号中的代码块,前面使用了关键字function
当调用该函数时,会执行函数内部的代码
可以在某事件发生时直接调用函数(比如当用户点击按钮时)并且可以由JavaScript在任何位置调用,调用带参数的函数,当您声明函数时,请把参数作为变量来声明,变量和参数必须以一致的顺序出现,第一个变量就是第一个被传递的参数的给定的值
带有返回值的函数
有时,我们会希望将值返回调用它的地方
通过使用return语句就可以实现
在使用return语句函数会停止执行,并返回指定的值
局部JavaScript变量
在函数内部声明的变量是局部变量,所以只能在函数内部访问它,该变量的作用域是局部的,您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别该出变量,只要函数运行完毕本地变量就会被删除
全局JavaScript变量
在函数声明变量是全局变量,能够在整个页面访问
JavaScript生存期
JavaScript变量的生命期从它们被声明的时间开始
局部变量会在函数运行以后被删除
全局变量会在页面关闭以后被删除
向未声明的变量变量分配值
如果您把值赋给未声明的变量,该变量会自动作为全局变量声明
JavaScript运算符
运算符=用于赋值
运算符+用于加值
JavaScript算术运算符
+、-、*、/、%、++、--
JavaScript赋值运算符
=、+=、-=、*=、/=、%=
用于字符串的“+”的运算符
“+”运算符用于合并多个字符串为一个字符串
对字符串数组进行加法运算,如果数字与字符串相加,结果为字符串
JavaScript比较运算符:比较变量之间的值
==、===、!=、<、>、<=、>=
JavaScript逻辑运算符:测定变量之间的值
&&、||、!
JavaScript条件运算符:对变量进行赋值的条件表达式,问号表达式
var a = 100 ? 100 : 200
JavaScript if...else if...else...语句
基于不同的条件来执行不同的操作
条件语句
通常在写代码时,您总是需要为不同的决定进行不同的操作,您可以在代码中使用条件语句来完成该任务,在JavaScript中有
if...else当指定条件为true执行if代码块,当指定条件为false执行代码块
if...只有当指定条件为true才会执行此段代码
if...else if...多个代码块执行条件
Switch多个代码块同步执行
循环语句
多次循环执行代码块
不同类型的循环
for()
while()
for( ... in ...)
do ... while()
Break终止循环
Continue迭代循环
JavaScript错误
try:语句测试代码块的错误
catch:语句处理的错误
throw:语句创建自定义错误
错误一定会发生
当JavaScript引擎执行JavaScript代码,会发生各种错误,可能是语法错误,同场是程序员造成的编码错误或错别字,可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)可能是由于来自服务器或用户的错误输出而导致的错误,当然,也可能是由于许多其它不可预知的因素
JavaScript抛出错误
当错误发生时当事情出问题时,JavaScript引擎通?;嵬V?,并生成一个错误消息
描述这种情况的技术术语是:JavaScript将抛出一个错误。
JavaScript测试和捕捉
try:允许我们定义在执行时进行错误测试的代码块
catch:允许我们定义在执行时进行错误处理的代码块
throw:创建自定义错误,正确的技术术语:创建或抛出异常
异常可以是JavaScript中的字符串、数字、逻辑值、对象
JavaScript表单验证
JavaScript表单验证
JavaScript可以在数据提交给服务器之前对HTML进行表单验证,被JavaScript验证的这些典型数据:用户是否已填写表单中的必填项目?用户输入的邮件地址是否合法?用户是否在数据域中输入了文本,用户是否输入了合法的日期
JavaScript必填(必?。┫钅?/p>
E-mail验证
JavaScript HTML Dom
Dom简介
JavaScript能够改变页面中所有的HTML元素
JavaScript能够改变页面中所有的HTML属性
JavaScript能够改变页面中所有的CSS样式
JavaScript能够对页面中所有事件作出响应
查找HTML元素
通过标签编号id查找元素
var a = document.getElementById();
通过标签名称name查找元素
var a = document.getElementById();
通过标签类名class查找元素
var a = document.getElementById();
HTML Dom
改变HTML输出流
JavaScript能够动态创建HTML的内容document.write()
改变HTML内容
document.getElementById(id).innerHTML =内容
改变HTML属性
ocument.getElementById(id).属性=值
改变HTML样式
document.getElementById(id).style.样式属性=值
JavaScript HTML Dom事件
对事件做出响应
我们可以在事件发生时执行JavaScript,比如当用户元素上点击时,如需在用户点击某个元素时代码,请向一个HTML事件属性添加JavaScript代码
HTML事件案例
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动元素上时
当输入字段被改变时
当提交到表单时
当用户触发按键时
HTML事件属性
如需向HTML元素分配事件,您可以用事件属性
使用HTML DOM来分配事件
HTML DOM允许您通过JavaScript来分配事件
onload和onunload事件:在用户进入或离开时触发
Onload:检测访问者的浏览器版本和浏览器类型,并基于这些信息来加载网页的正确版本
onload和onunload事件:可用于处理cookie
onchange事件:验证输入字段
Onmouseover事件:鼠标停留事件
Onmouseout事件:鼠标离开事件
Onmousedown事件:鼠标按下事件
Onmouseup事件:鼠标弹起事件
Onmouseclick事件:鼠标点击事件
JavaScript HTML Dom元素节点
创建新的HTML元素:
创建元素:var p = document.createElement(“p”);
创建节点:var a = document.createTextNode(“增加文本”);
追加节点:p.appendChild(a);
查找元素:var d = document.getElementById(id);
追加元素:d.appendChild(p);
删除已有的HTML元素
创建父元素:var parent = document.getElementById(id);
创建子元素:var child =docuemnt.getElementById(id);
父元素移除子元素:parent.removeChild(child);
JavaScript对象
JavaScript中所有事物都是对象,:字符串、数值、数组、函数等等。JavaScript允许自定义对象。
JavaScript对象
JavaScript提供多个内建对象,比如String、Date、Array等等,对象只是带有属性和方法的特殊数据类型
访问对象的属性
对象名称.对象内部的方法属性();
访问对象的方法
对象名称.对象内部的方法名称();
创建JavaScript对象
通过JavaScript,您能够自定义创建自己的对象
创建对象有两种不同的方法
1.定义并创建对象实例
2.使用函数来定义对象,然后创建新的对象实例
使用对象构造器创建对象
案例:function Func(){}
创建JavaScript对象实例
var f = new Func();
JavaScript类
JavaScript是面向对象的语言,但JavaScript使用类
在JavaScript中,不会创建类,也不会通过类创建对象,就像在其它编程语言中一样,JavaScript基于prototype,而不是基于类的
for in循环:
for( var i in is){}
JavaScript数字
JavaScript数字可以使用小数点也可以不使用小数点来书写
所有数字均为64位
JavaScript不是类型语言,与许多其它编程语言不同,JavaScript不定义不同类型的数字,比如:整数、短、长、浮点数等等。JavaScript中的所有数字都存储为1-的64位,浮点数
精度
整数(不使用小数点或指数计数法)最多15位
八进制和十六进制
如果前缀为0,则JavaScript会把数值常量解释为八进制数,如果前缀为“0”或“x”则解释为十六进制数
数字属性方法
Max Value
Min Value
Negative Infinitive
Positive Infinitive
NaN
Prototype
Constructor
数字方法
ToExponential
toFixed
toPrecision
toString
ValueOf
JavaScript字符串对象
String对象用于处理已有的字符块
(1)length:计算字符串长度
(2)添加字符样式
(big,small,blink,bold,italics,fixed,strike,fontcolor,fontsize,toLowerCase,toUpperCase,tosub,tosup,link)
(3)indexOf:获取字符串的选定字符
(4)match方法:获取字符串的特定字符
(5)replace方法:获取并覆盖选定字符
JavaScript Date日期对象
(1)document.write(Date());返回当日的日期和时间
(2)getTime:获取并返回毫秒单位
(3)setFullYear:获取并返回年月日单位
(4)toUTCString:获取年月日小时分钟秒单位
(5)getDay:获取日
(6)getHour,getMinute,getSecond:显示一个钟表
JavaScript数组对象
(1)创建对象:var a = new Array();
(2)For...In的声明:for(var i in a){}
(3)合并两个数组concat:
var a = Array();
var b = Array();
var c = a.Concat(b);
(4)用数组的元素组成字符串Join
var a = Array();
a.Join();
(5)文本数组排序sort
var a = Array();
a.Sort();
(6)数字数组排序Sort
var a = Array();
a.Sort();
JavaScript Boolean(逻辑)对象
Boolean类型转换,如果进行转换的变量的值是0或null或undefined或空字符串,则返回false,其它返回true
JavaScript Math(算数)对象
Round方法 返回四舍五入后的值
Random方法 返回0~1之间的随机数
Max方法 返回两个值之间的最大值
Min方法 返回两个值之间的最小值
E方法:常数
Pi方法:圆周率
Sqrt2方法:2的平方根
SqrT1_2方法:1/2的平方根
Ln2方法:2的自然对数
Ln10方法:10的自然对数
Log_2e方法:以2为底的e的对数
Log_10e方法:以10为底的e的对数
JavaScript正则表达式
JavaScript RegExp对象
什么是RegExp对象?
RegExp是正则表达式的缩写,当您检索某个文本的时候,可以使用一种模式来描述要检索的内容,RegExp就是这种模式,简单的模式可以是一个单独的字符,更复杂的模式包括更多的字符,并可用于解析、格式检查、替换等等
您可以规定字符串的检索位置,以及要检索的字符类型等等
RegExp对象的方法
Test():检索字符串中的指定值,返回true或false
Exec();
检索字符串中的指定值,返回值=找到与其匹配的值,如无匹配则返回null
您可以向RegExp添加第二个参数,以设定检索,例如,如果你需要的找到的某个字符的所有存在,则可使用“g”参数(“global”)
compile();改变RegExp检索,既可以改变,也可以添加或删除
JavaScript浏览器对象模型
浏览器对象模型BOM使JavaScript有能力与浏览器对话
浏览器对象模型BOM
浏览器对象模型Browser Object Model尚无正式标准
由于现代浏览器几乎实现了JavaScript交互性方面的相同方法和属性。
因此常被认为是BOM的方法和属性
Window对象
所有浏览器都支持Window它表示浏览器窗口
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员
全局变量是window变量的属性
甚至HTML中的DOM也是window变量的属性之一
Window对象的尺寸
有三种方法能够确定浏览器窗口的尺寸,浏览器的视口,不包括工具栏和滚动条
对于Internet Exploter、Chorme、FireBox、Opera、以及Safari
Window.innerHeight浏览器内部高度
Window.innerWidth浏览器内部宽度
Internet Exploter 8、7、6、5:
document.documentElement.ClientHeight
document.documentElement.ClientWidth
document.body.ClientHeight
document.bodyClientWidth
Window其它方法
Window.open();打开窗口windowresizeto();调整窗口尺寸
window.close();关闭窗口windowmoveto();移动窗口
JavaScript Window Screen
Window.screen对象包含用户屏幕的信息
Window.screen对象在编写可以不实用window这个前缀
screen.availWidth();可用的屏幕宽度
screen.availHeight();可用的屏幕高度
JavaScript Window Location
Window Location获取当前页面的地址,并浏览器重定向到该页面
Window Loation
Window.location对象在编写时可以不实用wndow这个前缀
案例:
location.hostname返回web主机的域名
location.pathname返回当前页面的路径和文件名
localtion.port返回web主机的端口
location.ptotocol返回所使用的web协议
Window Location Href
location.href属性返回当前页面的URL
Window Location Pathname返回当前URL的路径名
Window Location Assign方法加载新的文档
JavaScript Window History
Windows History
Window.history对象在编写时可不使用window这个前缀
为了?;び没б?,对JavaScript访问该对象的方法做出了限制
History.back()与在浏览器点击后退按钮相同
History.forward()与在浏览器中点击按钮向前相同
Window History Back
History.back()方法加载历史列表中的前一个URL
这与在浏览器中点击后退按钮是相同的
Window History Forward
History.forward()方法加载历史列表中的下一个URL
这与在浏览器中点击前进按钮是相同的
JavaScript Window Navigatior
Window Navigator对象包含有关访问者浏览器的信息
Window Navgator对象在编写时可以不使用window这个前缀
JavaScript消息框
警告框:经常用于确保用户可以得到某些信息,当警告框出现后,用户需要点击按钮才能继续进行操作
—alert();
带有拆行的警告框:
—alert(“\n”);
确认框:确认可用于使用户验证或者接收某些信息,当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作,如果用户点击确认,那么返回值为true,如果用户点击取消,则返回false
—confirm();
提示框:提示框经常用于提示用户在进入页面前输入某个值,当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵,如果用户点击确认,那么返回值为输入的值,如果用户点击取消,则返回null
—prompt方法
JavaScript计时
JavaScript中的计时事件:
setTimeout未来的某时执行代码:
setTimeout方法会返回某个值,在上面的语句中,值被储存在一个变量中,如果你希望取消这个setTimeout,你可以使用这个变量名来指定它。
setTimeout的第一个参数是含有JavaScript语句的字符串。
无穷循环:在一个函数中调用setTimeout同时在函数外部声明一个变量,在函数内部进行一次自增,在setTimeout后重复调用一次当前函数以保持循环
clearTimeout取消setTimeout:清除掉时间,把时间归为0
JavaScript Cookie
利用用户在提示框中输入数据创建一个cookie,当用户再次访问页面时,根据cookie中的信息发出欢迎信息
什么是Cookie?
Cookie是存储于访问者计算机中的变量,每当同一台计算机通过浏览器请求某个页面时,就会发送这个cookie,你可以使用JavaScript来创建和取回cookie的值
有关cookie的例子?
名字cookie
密码cookie
日期cookie
创建和存储cookie: