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引擎通常会停止,并生成一个错误消息
描述这种情况的技术术语是:JavaScript将抛出一个错误。
JavaScript测试和捕捉
try:允许我们定义在执行时进行错误测试的代码块
catch:允许我们定义在执行时进行错误处理的代码块
throw:创建自定义错误,正确的技术术语:创建或抛出异常
异常可以是JavaScript中的字符串、数字、逻辑值、对象
JavaScript表单验证
JavaScript表单验证
JavaScript可以在数据提交给服务器之前对HTML进行表单验证,被JavaScript验证的这些典型数据:用户是否已填写表单中的必填项目?用户输入的邮件地址是否合法?用户是否在数据域中输入了文本,用户是否输入了合法的日期
JavaScript必填(必选)项目
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: