脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript定义及开发技巧学习,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
JavaScript定义及开发技巧学习。
JavaScript是基于客户端浏览器、面向对象、事件驱动式的网页脚本语言,属于web语言。
特点:
一种解释性脚本编写语言、基于对象的脚本编程语言、简单性、安全性、动态性、跨平台性
作用:
交互式操作,表单验证、网页特效、web游戏、服务器脚本开发
在HTML页面嵌入Javascript代码:
方法1:使用Javascript:前缀构建执行Javascript代码
方法2:使用
变量和数据类型
声明变量:隐式定义:直接给变量赋值(使用时要先赋值);显式定义:使用var关键字定义变量(根据赋值数据类型确定变量类型)
变量命名规则跟Java一样
数据类型:数值类型、布尔类型、字符串类型(可以用’’括起来)、未定义类型(undefined)、空类型、对象类型
数据类型转换:
通过”+”或toString()方法转换成字符串
(”+”做字符串连接,”-””*””/”先将字符串转换再运算)
通过parseInt()将字符串转换成整型
通过parseFloat()将字符串转换成浮点型
JavaScript字符串常用操作方法
正则表达式:
是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、以及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串一种过滤逻辑。
语法1:var reg = /pattern/; /*pattern是规则,不要用””,是//*/
语法2:var reg = new RegExp(pattern); /*pattern是规则,是字符串要用””或’’*/
/*常用的方法 exec(str),test(str) 例:reg.exec(str) 在str中找符合reg规则的字符串,有返回该字符串; reg.test(str)——str中是否有符合reg规则的字符串,有返回true,没返回false*/
正则表达式支持常用通配符:
. 可以匹配任何字符
/d 匹配0—数字
/D 匹配非数字
/s 匹配所有空白字符,包括空格、制表符、换行符、回车等
/S 匹配所有非空白字符
/w 匹配所有单词字符,包括0—926个英文字母和下划线
/W 匹配所有非单词字符
/b 匹配单词边界
/B 匹配非单词边界
[abc] 查找方括号内任意字符
[^abc] 查找任意不在方括号内字符
[0-9] 查找任意从0至9的数字
[a-z] 查找任意从a至z的字符
[A-Z] 查找任意从A至Z的字符
[A-z] 查找任意从A至z的字符
(red|blue|green)查找任何指定选项,匹配括号内的任意一组
正则表达式量词:
n+ 匹配任意包含至少一个n的字符串
n* 匹配任意包含零个或多个n的字符串
n? 匹配任意包含零个或一个n的字符串
n{x} 匹配包含x个n的序列的字符串
n{x,y} 匹配包含x或y个n的序列的字符串
n{x,} 匹配包含至少x个n的序列的字符串
n$ 匹配任意结尾为n的字符串
^n 匹配任何开头为n的字符串
正则表达式修饰符
var reg = /pattern/i 执行对大小写不敏感的匹配
var reg = /pattern/g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)
var reg = /pattern/m 执行多行匹配
JavaScript数组
定义
语法1:var arr = [0,1,2];//定义时直接给数组元素赋值
语法2:var arr = [];//定义一个空数组
语法3:var arr = new Array();arr[0]=1;//定义一个空数组并通过索引来赋值
特点
数组长度可变。总长度为数组最大索引值+1
同一数组中元素类型可以互不相同
当访问未赋值的数组元素时,该元素为undefined,不会数组越界
JavaScript运算符
算术运算符 + - * / % ++ --
赋值运算符 =
比较运算符 > < >= <= == != === !==
逻辑运算符 && || !
位运算符 & | ~ ^ << >>
其他运算符 三目运算符(?:)逗号运算符 void运算符 typeof instanceof
流程控制语句
分支语句:if语句、switch语句
循环语句:while循环、do while循环、for循环、for in循环
break、continue改变循环的控制流
常用的特殊语句
语句块(没有只作用于语句块的变量)、空语句、异常抛出语句(只有Error异常对象)、异常捕捉语句(只能有一处catch语句块,接收异常不能用var)、with语句(减少重复写的对象)
JavaScript函数
/*函数没有声明返回类型*/
/*函数形参不需要做类型声明*/
/*函数是Function类的对象*/
/*命名函数可以调用在声明之前,匿名函数要先定义后调用*/
定义函数
定义函数1:命名函数
function函数名(参数列表){
执行的语句块;
}
定义函数2:匿名函数
/*可以通过f调用,f(参数列表)*/
var f =function (参数列表){
执行的语句块;
}
定义函数3:使用function类构造匿名函数
/*可以通过f调用,f(参数列表)*/
var f= new fuction(参数列表,函数执行体)
函数返回值
函数没有声名返回类型,需要返回时使用return语句,若没则不反回
局部变量和局部函数
函数调用
直接调用:对象. 函数名//默认是window对象
以call方法调用:函数名.call(调用者,参数1,参数2,……)/*调用者默认是window*/
以apply方法调用:函数名.apply(调用者,arguments)/*arguments是数组,用于存放参数*/
常用的内置对象
Date
Math
JavaScript创建对象
使用new关键字调用构造器创建对象 var f = new 函数名()/*可以不传入参数,参数为undefined*/
使用Object直接创建对象 var myObj = new Object();/*为空对象,可以 对象名.属性名或函数名 = 属性值或function(); 添加。*/
使用JSON语法创建对象
JSON对象以一对大括号括起来,大括号内有多个键值对,键值之间用:隔开,多个键值对用逗号隔开,JSON数组用[]括起来
object = {属性名1:属性值1, 属性名2:属性值2,……};/*属性值可以是各种数据类型或函数function(){}*/
BOM浏览器对象模型
BOM-JavaScript是运行在浏览器中的,所以提供一系列对象用于和浏览器窗口进行交互,这些对象主要包括window、document、location、navigator和screen。通常统称为浏览器对象模型
window对象是整个JavaScript脚本运行的顶层对象,它的常用属性如下:document、location、navigator、screen和history
window对象常用方法:alert() confirm() prompt() close() moveBy()moveTo() resizeBy() resizeTo() open() setInterval() clearInteral()
history对象常用方法back() forward() go(intValue)
location对象常用方法 hostname href host port pathname protocol
screen对象常用属性 availHeight availWidth colorDepth
navigator对象常用属性 appCodeName appName appVersion platformuserAgent cookieEnabled
DOM对HTML元素访问
DOM是文档对象模型当网页加载时,可以将结构化文档在内存中转换成对象树。
DOM模型有3种节点:元素节点(各种标签)、文本节点(在元素节点内部)、属性节点(修饰元素节点)
DOM动态修改HTML,先访问HTML元素,两种方式来访问:
一是通过ID访问HTML元素,通过document对象调用getElementById方法来查找具有唯一id属性的元素
二是利用节点关系访问HTML元素,通过当前节点调用方法parentNode()、previousSibling()、nextSibling()、childNodes()、firstChild()、lastChild()、getElementsByTagName(tagName)
DOM访问表单控件常用属性和方法
action返回表单的提交地址
elements返回表单内全部表单控件所组成的数组,通过数组可以访问表单内任何表单控件
length 返回表单内表单域个数
method 返回表单内method属性,主要有get和post两个值
target确定提交表单时的结果窗口,主要有_self、_blank、_top等
reset()、submit()重置表单和确定表单方法
DOM访问列表框、下拉菜单常用的属性
form 返回列表框、下拉菜单所在的表单对象
length返回列表框、下拉菜单的选项个数
options返回列表框、下拉菜单所有选项组成的数组
selectedIndex返回下拉列表中选中选项的索引
type返回下拉列表的类型,多选返回select-multiple,单选返回select-one
DOM访问表格子元素的常用属性和方法
caption返回表格的标题对象
rows 返回该表格所有的表格行
tbodies返回该表格所有元素组成的数组
tfoot 返回该表格所有元素
thead返回该表格所有元素
DOM创建节点方法 document.createElement(Tag)
DOM复制节点的方法 cloneNode(Boolean deep) 当deep为true时,表示复制当前节点以及当前节点全部后代节点,为false时只复制当前节点
DOM添加、删除子节点的方法
appendChild(newNode)将newNode添加到当前节点的最后一个子节点
insertBrfort(newNode,refNode)在refNode节点前插入newNode节点
replaceChild(newNode,oldNode)将oldNode节点替换成newNode节点
removeChile(oldNode)将oldNode子节点删除
DOM为列表框、下拉菜单添加选项的方式
new Option(text,value,defaultSelected,selectes)
添加创建好的选项至列表框或下拉菜单的方式
列表框或下拉菜单对象.options[i] = 创建好的option对象
添加创建好的选项至列表框或下拉菜单的方式
列表框或下拉菜单对象.remove(index)方法删除指定选项
DOM动态添加删除表格内容常用的方法
insertRpw(index)在指定索引位置插入一行
createCaption()为该表格创建标题
createTFoot()为该表格创建元素,加入已存在返回现有的
createTHead()为该表格创建元素,加入已存在返回现有的
deleteRow(index) 在指定索引位置删除一行
deleteCaption()删除该表格标题
deleteTFoot()从表格删除tFoot元素及内容
deleteTHead()从表格删除tHead元素及内容
JavaScript事件概念和事件监听
JavaScript使我们有能力创建动态页面,网页中的每个元素都哦可以产生某些可以触发JavaScript函数的事件。我们认为事件是可以被JavaScript侦测到的一种行为。
事件流主要分冒泡型事件(标准事件流,一层层往上查找父标签事件)和捕获型事件(由最顶层一层层往下查找父标签事件)。
通过在绑定事件中加上return false来阻止HTML元素的默认行为。
通用性事件监听
绑定HTML元素属性
绑定DOM对象属性document.getElementById(“id名”).事件名=函数名;
IE中的事件监听方法
[object].attachEvent(“事件类型”,”函数名”);//添加监听
[object].detachEvent(“事件类型”,”函数名”);//取消监听
/*事件类型写法以on开头,如onclick*/
标准DOM中的事件监听方法
[object].addEventListener(“事件类型”,”函数名”,”冒泡事件或捕获事件”);
[object].removeEventListener(“事件类型”,”函数名”,”冒泡事件或捕获事件”);//true为捕获型事件,false为冒泡型事件
/*事件类型写法不以on开头,如click*/
访问事件对象:事件对象封装了事件发生的详细信息
IE中的事件对象:是一个隐式可用的全局对象:event,它是window对象一个属性。Op.onclick = function(){var oEvent = window.event;}
标准DOM中事件对象:在标准DOM浏览器检测到发生某个事件时,将自动创建一个Event对象,并隐式地将该对象作为事件处理函数的第一个参数传入op.onclick = function(oEvent){//作为参数传入}
为兼容不同浏览器op.onclick = function(oEvent){if(window.event){oEvent= window.event;}}
Event事件对象常用属性
常见的事件类型
鼠标事件:onclick ondbclick onmousedown onmouseout onmousemoveonmouseup onmouseover
常用键盘事件:onkeydown onkeyup onkeypress
HTML事件:onload onunload onselect onchange onsubmit onfocus onblur
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript定义及开发技巧学习全部内容,希望文章能够帮你解决javascript代码实例教程-JavaScript定义及开发技巧学习所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。