JavaScript
什么是JavaScript
JavaScript是嵌入HTML中在浏览器中的脚本语言,有与Java和C语言类似的语法
一种网页编程技术,用来向HTML页面添加交互行为
直接嵌入HTML页面
由浏览器解释执行代码,不进行预编译
JavaScript 的特点
可以使用任何文本编辑工具编写
由浏览器内置的JavaScript引擎执行代码
解释执行:事先不编译,逐行执行
基于对象:内置大量现成对象
适宜:
客户端数据计算
客户端表单合法性验证
浏览器事件的触发
网页特殊显示效果制作
服务器的异步数据提交
第一个JavaScript程序
事件定义式
在定义事件时直接写入JavaScript脚本代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试javaScript</title> </head> <body> <input type="button" value="按钮" onclick="alert(‘hello,world‘);"> </body> </html>
嵌入式
在页面嵌入<script></script>标签
在标签中放置JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试javaScript</title> <script type="text/javascript"> function method1() { alert("hello world"); } </script> </head> <body> <input type="button" value="按钮" onclick="method1();"> </body> </html>
文件调用式
将JavaScript代码写入一个单独的文件,并保存为后缀为 js的文件
纯文本文件
文件中,不需要包含<script>标签,直接书写JS代码
html页面的<head>中引用外部的.js文件
在<head>中添加<script>标签
设置<script>标签的src属性,以指定js文件的url
//myjs.js文件 function method1(){ alert("hello,world"); } ------------------------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试javaScript</title> <script type="text/javascript" src="myjs.js"> </script> </head> <body> <input type="button" value="按钮" onclick="method1()"> </body> </html>
JavaScript的代码错误
解释性代码,代码错误,则页面中无效果
Firefox浏览器、Chrome浏览器
使用错误控制台查看
JavaScript语法规范
由Unicode字符集编写
注释
单行://
多行:/* */
语句
表达式、关键字、运算符组成
大小写敏感
使用分号或者换行结束,一行中有多个语句不能省略分号
推荐加上分号,减少错误和歧义的发生
标识符
由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
常用于表示函数、变量等的名称
名称最好有明确的含义
建议遵守camel法则”驼峰命名法”
例如:_abc,$abc,abc,abc123是标识符,而1abc不是
JavaScript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符
标准关键字
预保留的关键字
class、int、float等
变量
变量声明
使用关键字var声明变量,如 var x,y;
变量初始化
使用" = "赋值
没有初始化的变量则自动取值为 undefined
var m; var n = 12; var str = "hello";
变量没有类型,统一用关键字var声明。 变量所引用的数据是有类型的。
数据类型
String 类型
由Unicode字符、数字、标点符号组成的字符序列
直接量首尾由一对单引号或双引号括起,其作用一样
没有字符类型,字符就是长度为1的字符串
特殊字符需要转义符转义符\,如:\n , \\ ,\‘ , \" 单引号和双引号嵌套时无需转义
Number 类型
不区分整型数值和浮点型数值
所有数字都采用64位浮点格式存储,类似于double格式
整数直接量
默认的整数直接量是10进制的
16进制整数直接量前面加上0x,八进制前面加0
浮点数直接量
默认的小数直接量使用小数点记录数据,如3.4,5.6
也可以使用指数记录数据,如4.3e23 = 4.3 x 1023
Boolean类型
仅有两个值:true和false
可以自动转型作为数值参与运算,运算时true=1,false = 0;
数据类型的隐式转换
JavaScript属于松散类型的程序语言
变量在声明时不需要指定数据类型
变量所引用的数据有类型
不同类型数据在计算过程中会自动进行转换
var s = "a"; var n = 1; var b = true; alert(s+n);//a1 alert(s+b);//atrue alert(n+b);//2 alert(b+b);//2
数据类型转换函数
toString
所有数据类型均可转换为String类型
parselnt
强制转换成整数,如果不能转换,则返回NaN (not a number)
parseFloat
强制转换成浮点数,如果不能转换,则返回NaN
typeof
查询当前类型,返回string / number / boolean /object / function / undefined
isNaN (is not a number ?)
判断被检测表达式经过转换后是否不是一个数
如果被检测表达式不是数则返回true ,否则返回false
alert(isNaN(56));//false alert(isNaN("56"));//false alert(isNaN(parseInt("")));//true alert(isNaN("a56"));//true alert(isNaN(""));//false
特殊数据类型
Null
null在程序中代表“无值”或者 "无对象"
可以通过给一个变量赋值null来清除变量的内容
undefined
声明了变量但从未赋值
对象属性不存在
运算符
算数运算
加(+)、减(-)、乘(*)、除(/)、余数(%)
+可以表示加法,也可以用于字符串的连接
-可以表示减号,也可以表示负号,如:x=-y
递增(++)、递减(--)
i++相当于i=i+1 , i--相当于i=i-1
关系运算
关系运算用于判断数据之间的大小关系
">"(大于),"<"(小于),">= "(大于等于), "<="(小于等于), " == "(等于), "! ="(不等于)
关系表达式的值为boolean类型(“true” 或 "false")
全等:===
类型相同且数值相同
不全等:!==
var a="10"; var b = 10; var c = 10; if(a==b) { alert("equal");//equal } if(b===c) { alert("same");//same }
逻辑运算
逻辑非(!)、逻辑与(&&)、逻辑或(||)
条件运算
表达式?表达式1:表达式2
先计算表达式的值,如果为true ,则整个表达式的值为 表达式1的值,如果 为 false , 则整个表达式的值为表达式2的值
控制语句
任何复杂的程序逻辑都可以通过"顺序" ,"分支","循环"三种基本的程序结构实现
语句默认为顺序执行
可以使用控制语句改变程序的执行顺序
分支结构
if语句
if(表达式1){ // 语句1; } else if (表达式2){ // 语句2; } else { //语句3; }
switch-case语句
switch(表达式){ case值1: 语句1: break; case值2: 语句2: break; default: 语句3; }
循环结构
for语句
for(表达式1;表达式2;表达式3){ 语句块(循环体) }
while语句
while(表达式){ 语句块 }
do-while语句
do{ 语句块 } while(表达式);
JS中的条件表达式
Java中条件表达式必须返回布尔值
JS中的表达式可以是任意表达式,即可以返回任何类型值
JavaScript 对象概述
什么是JavaScript对象
对象是JavaScript中最重要的API
JavaScript包含多种对象
内置对象
外部对象
window对象
dom对象
自定义对象
如何使用对象
对象包含属性和方法
访问对象属性
对象.属性
访问对象方法
对象.方法名()
常用内置对象
JS中的常用内置对象有
String对象
创建String对象有2这种方式
var str1 = "hello world"; var str2 = new String("hello world");
String对象的属性:length
String对象的常用方法
大小写转换方法
x.toLowerCase()
x.toUpperCase()
获取指定字符
x.charAt(index):返回指定位置的字符
x.charCodeAt(index):返回指定位置字符的Unicode编码
查询指定字符串
x.indexOf(findstr, [index])
x.lastIndexOf(findstr, [index])-->从后面找起
index表示开始查找的位置索引,可以省略
返回findstr在x中出现的首字符位置索引,如果没有找到返回-1;
获取子字符串(前包括后不包括)
x.substring(start, [end])
替换子字符串
x.replace(findstr, tostr)
findstr表示要找的字符串
tostr表示替换为的字符串
拆分子字符串
x.split(bystr,[howmany])
howmany:指定返回的数组的最大长度
此方法返回分割后的字符串数组
Number对象
Number是数值对象
Number对象的常用方法
toFixed(num):转换为字符串,num表示保留小数点后一定位数
Boolean对象
Array对象
获取数组对象的个数:length属性
数组长度是可变的
创建二维数组
数组中的元素是数组,则它是二维数组
反向数组
x.reverse()
改变数组x中的数值的顺序
x.sort([softfunction]):数组排序
sortFunction:可选项,用来确定元素顺序的函数的名称
Math对象
Math对象用于执行数学任务
无需创建,直接把Math作为对象使用就可以调用其所有属性和方法
三角函数
MatMath.sin(x)、MatMath.cos(x)、Math.tan(x)等
计算函数
Math.sqrt(x)、Math.log(x)、Math.exp(x)等
数值比较函数
Math.abs(x)、Math.max(x,y,...)、Math.random()、 Math.round(x)等
Date对象
Date对象用于处理日期和时间,封装了系统时间毫秒数
var now = new Date();//Date对象会自动把当前日期和时间保存为其初始值
Date对象的常用方法
读写时间毫秒数
getTime()、setTime(毫秒)
读写时间分量
getDate()、getDay()、getFullYear()等
setDate()、setDay()、setFullYear()等
转换为字符串
toString()
toLocaleTimeString()
toLocaleDateString()
RegExp对象
RegExp对象表示正则表达式
创建RegExp对象
var reExp = /pathtern/flags; var reExp = new RegExp("pattern",["flags"]);
flags标识有以下几个:
g:设定当前匹配为全局模式
i:忽略匹配中的大小写检测
RegExpObject.test(string) 如果字符串string中含有与RegExpObject匹配的文本,则返回true,否则返回false
reg.exec(str) 检索字符串中指定的值,返回找到的值
reg.test(str) 检索字符串中指定的值,返回true或false
var name ="aaa"; var reg = new RegExp("^[a-zA-Z0-9]{3,6}$"); var isRight = reg.test(name); if(!isRight) { alert("验证失败!"); }else{ alert("验证成功!"); }
String对象与正则表达式
方法
x.replace(regexp , tostr) //返回替换后的结果
x.match(regexp) //返回匹配字符串的数组
x.search(regexp) //返回匹配字符串的首字符位置索引
var str1 = "abc123def"; var str2=str1.replace(/\d/gi,"*"); alert(str2);//abc***def var array=str1.match(/\d/g/); alert(array.toString());//123 var index = str1.search(/\d/); alert(index);//3
Function对象
JS中的函数就是Function对象
函数名就是指向Function对象的引用
使用函数名可以访问函数对象
函数名()是调用函数
定义函数对象
函数的返回值
默认返回undefined
可以使用return返回具体的值
函数的参数
JS的函数没有重载
调用时只要函数名一样,无论传入多少个参数,调用的都是同一个函数
没有接收到实参的参数值是undefined
所有的参数传递给arguments数组对象
arguments对象
arguments是一种特殊对象,在函数代码中,表示函数的参数数组
在函数代码中,可以使用arguments访问所有参数
arguments.length:函数的参数个数
arguments[i]:第 i 个参数
可以利用arguments实现可变参数的函数
使用Function对象直接创建函数
var functionName = new Function(arg1,...,argN,functionBody);
创建的时候之间给参数列表和方法体可以直接创建Function对象
var add = new Function("x","y","return(x+y);"); var result = add(3,4); alert(result);//7
匿名函数
创建匿名函数
var func = function(arg1,...,argN) { func_body; return value; }
var add = function(x,y) { return x+y; }; var result = add(2,3); alert(result);//5
全局函数
全局函数可用于所有的JavaScript对象
常用的全局函数有:
parseInt/parseFloat
isNaN
eval
eval函数
eval函数用于计算表达式字符串,或者用于执行字符串 中的JavaScript代码
只接受原始字符串作为参数
如果参数中没有合法的表达式和语句,则抛出异常
BOM
Browser Object Model:浏览器对象模型,用来访问和操纵浏览器窗口,使JavaScript 有能力与浏览器"对话"
通过使用BOM ,可移动窗口、更改状态栏文本、执行 其它不与页面内容发生直接联系的操作
没有相关标准,但被广泛支持
DOM
Document Object Model:文档对象模型,用来操作文档
定义了访问和操作HTML文档的标准方法
应用程序通过对DOM树的操作,来实现对HTML文档数据的操作
BOM与DOM
window对象
window表示浏览器窗口
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员
常用属性
document:整个窗口中显示的HTML文档对象
history:浏览过窗口的历史记录对象
location:窗口文件地址对象
screen:当前屏幕对象
navigator:浏览器相关信息
常用方法
alert(),confirm()
setTimeout(),clearTimeout()
setInterval(),clearInterval()
对话框
alert(str)
提示对话框,显示str字符串的内容
confirm(str)
确认对话框,显示str字符串的内容
按“确定” 按钮返回true,其他操作返回false
定时器
多用于网页动态时钟、制作倒计时、跑马灯效果等
周期性时钟
以一定的间隔执行代码,循环往复
—次性时钟
在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行
周期性定时器
setInterval(exp,time):周期性触发代码exp
exp:执行语句
time:时间周期,单位为毫秒
返回已经启动的定时器对象
clearInterval(tID):停止启动的定时器
tID:启动的定时器对象
一次性定时器
setTimeout(exp,time):—次性触发代码exp
exp:执行语句
time:间隔时间,单位为毫秒
返回已经启动的定时器
clearTimeout(tID):停止启动的定时器
tID :启动的定时器对象
screen对象
screen对象包含有关客户端显示屏幕的信息
常用于获取屏幕的分辨率和色彩
常用属性
width/height/availWidth/availHeight
history对象
history对象包含用户(在浏览器窗口中)访问过的URL
length属性:浏览器历史列表中的URL数量
方法
history.back();//后退
history.foword();//前进
history.go(num);//前进num次
location对象
location对象包含有关当前URL的信息
常用于获取和改变当前浏览的网址
href属性:当前窗口正在浏览的网页地址
方法
reload():重新载入当前网址,同按下刷新按钮
navigator
navigator对象包含有关浏览器的信息
常用于获取客户端浏览器和操作系统信息
DOM概述
当网页被加载时,浏览器会创建页面的文档对象模型
通过可编程的对象模型,javaScript获得了足够的能力来创建动态的HTML
javaScript能够改变页面中的所有HTML元素
JavaScript能够改变页面中的所有HTML属性
JavaScript能够改变页面中的所有CSS样式
javaScript能够改变页面中的所有事件做出反应
DOM节点树
DOM模型被构造为对象的树
这棵树的根就是document对象
DOM操作
DOM提供了如下的操作
查找节点,读取节点信息,修改节点信息,创建新节点,删除节点
nodeName:节点名称
元素节点和属性节点:标签或属性名称
文本节点:永远是#text
文档节点:永远是#document
nodeType : 节点类型
返回数值
元素节点:返回1
属性节点:返回2
文本节点:返回3
注释节点:返回8
文档节点:返回9
元素节点的内容
innerText
设置或获取位于对象起始和结束标签内的文本
innerHTML
设置或获取位于对象起始和结束标签内的HTML
节点属性
getAttribute()方法:根据属性名称获取属性的值
setAttribute()、removeAttribute()
将HTML标记,属性和CSS样式都对象化
元素节点的样式
Style属性
node.Style.color
node.Style.fontSize
calssName属性
查询节点
如果需要操作HTML元素,必须首先找到该元素
查询节点的方式
通过ID查询
document.getElementById();
通过指定的ID来返回元素节点,忽略文档的结构
查找整个HTML文档中的任何HTML元素
如果ID值错误,则返回null
通过层次(节点关系)查询
parseNode
遵循文档的上下层次结构,查找单个父节点
childNodes
遵循文档的上下层次结构,查找多个子节点
通过标签名称查询
document.getElementsByTagName();
根据指定的标签名称返回所有的元素
忽略文档的结构
查找整个HTML文档中的所有元素
如果标签名称错误,则返回 长度为0的节点列表
返回一个节点列表(数组)
使用节点列表的length属性获取个数
[index]:定位具体的元素
通过name属性查询
document.getElementsByName()
根据标签的name属性的值进行查询
创建节点
document.creatElement(elementName)
elementName:要创建的元素标签名称
返回新创建的节点
添加新的节点
parentNode.appendChild(newNode);
追加:新节点作为父节点的最后一个子节点添加
parentNode.insertBefore(newNode,refNode);
refNode:参考节点,新节点位于此节点之前添加
删除节点
node.removeChild(childNode)
childNode 必须是node的子节点
自定义对象
自定义对象是一种特殊的数据类型,由属性和方法封装而成
属性指与对象有关的值:对象名.属性名
方法指对象可以执行的行为或可以完成的功能:对象名.方 法名()
创建自定义对象
直接创建对象
function TestObject() { var personObj = new Object(); // 添加属性 personObj.name = "John"; personObj.age = 50; // 添加方法 personObj.say = new Function("alert(‘hello!‘);"); // 测试 personObj.say(); // hello! alert(personObj.age); // 50
使用构造器创建对象
语法:
function ObjName(参数1,参数2,...){}
function Person(n,a) { // 定义name和age属性 this.name = n; this.age = a; // 定义方法 showName this.showName = function(){ alert("My Name is" + this.name); }; // 定义方法 introduceSelf this.introduceSelf = introFunc(); } function introFunc() { alert(this.name + ":" + this.age); }
使用JSON创建对象
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
使用名/值对的方式定义
名称需要使用""引起来
多对定义之间使用,隔开
名称可以是属性
字符串类型的属性值,需要使用""引起来
var obj = { "name" : "jerry", "age" : 29 }; // 测试对象 alert(obj.name);
事件
指页面元素状态改变,用户在操作鼠标或键盘时 触发的动作
鼠标事件
键盘事件
状态改变事件
event 对象
事件触发后将会产生一个 event 对象
事件属性
通过一个事件属性,可以在某个事件发生时对某个元素 进行某种操作
鼠标事件 |
键盘事件 |
状态事件 |
onclick |
onkeydown |
onload |
ondblclick |
onkeyup |
onchange |
onmousedown |
/ |
onfocus |
onmouseup |
/ |
onblur |
onmouseover |
/ |
onsubmit |
onmouseout |
/ |
/ |
事件定义
在html属性定义中直接处理事件
<input type=”button” value=”按钮” onclick=”method();”>
js代码中动态定义
// btnObj为一个按钮对象 btnObj.onclick = method; // 或 btnObj.onclick = function() { alert("hello"); }
取消事件:onXXX = "return false;"
<input type=”submit”value=”删除”onclick=”return deleteData();”/> Function deleteData() { var result = confirm(“确定要删除吗?”); return result; }
event对象
任何事件触发后将会产生一个event对象
event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息
获取event对象
使用event对象获得相关信息,如单击位置、触发对象等
常用属性:clientX/clientY/cancelBubble等
需要考虑浏览器兼容性
IE浏览器
js或者html代码中直接使用event
<p onclick = “alert(event.clientX);”>p text</p>
<div onclick=”func();”>div text</div> //IE浏览器 Function func() { alert(event.clientX + ”:” + event.clientY); }
Firefox浏览器
在HTML代码中,在事件定义时,使用event关键字将事件对象作为参数传入方法
<div onclick="func(event);">div text</div> // firefox浏览器 function func(e){ alert(event.clientX + ":" + event.clientY); }
js代码中,不能直接使用event关键字
可以解决浏览器兼容问题
使用event对象
对于event对象,经常需要获得事件源
事件源,即触发事件的元素(事件的目标节点)
IE浏览器:event.srcElement
Firefox浏览器:event.target
<div onclick="func(event);">div text</div> // IE浏览器 function func(e) { alert(e.srcElement.nodeName); //DIV } // firefox浏览器 function func(e) { alert(e.target.nodeName); // DIV }
<div onclick="func(event);">div text</div> // 考虑浏览兼容问题 function func(e) { var obj = e.srcElement || e.target; alert(obj.nodeName); // DIV }
事件处理机制
冒泡机制
当处于DHTML对象模型底部 对象事件发生时会依次激活上 面对象定义的同类事件处理
<div style="border:1px solid black;height:100px;” onclick="alert(‘div‘);"> <p style="border:1px solid red;height:50px;" onclick="alert(‘p‘);"> Ptext <input type=”button” value=”button1” onclick="alert(‘button‘);" /> </p> </div>
可以取消事件的冒泡
event.stopPropagation();
event.cancelBubble = true;
<div style="border:1px solid black;height:100px;” onclick="alert(‘div‘);"> <p style="border:1px solid red;height:50px;" onclick="alert(‘p‘);"> Ptext <input type=”button” value=”button1” onclick="event.cancelBubble=true; alert(‘button‘);" /> </p> </div>
原文地址:https://www.cnblogs.com/Kingram/p/9200912.html