1、js是可以嵌入到html中,是基于对象和事件驱动的脚本语言
特点:(1)交互性
(2)安全性:js不能访问本地磁盘
(3)跨平台:浏览器中都具备js解析器
2、(1)js能动态的修改html和css的代码
(2)能动态的校验数据
网景公司 LiveScript 微软 JScript ECMAScript JavaScript
3、js被引入的方式
(1)内嵌脚本
(2)内部脚本
(3)外部脚本
在不影响功能前提下,js越晚加载越好
js基本语法:
变量 var 弱类型语言
原始数据类型
(1)number:数字类型
(2)string:字符串类型
(3)boolean:布尔类型
(4)null:空类型 object类型
(5)undefined:未定义类型
注意:number、boolean、string是伪对象
typeof 检验类型
类型转换:
numberoolean转换为string:通过toString()
stringoolean转换为number:
parseInt()
parseFloat() 注意没有parseDouble()
boolean不能转
string可以将数字字符串转换成number 如果“123a3sd5”,转换成123
强制转换
Boolean() 强转成布尔
数字转布尔,非零就是true,零就是false
字符串转布尔 非“”(空字符串)就是true,空字符串就是false
Number()强转为数字
布尔转数字 true转成1 false转成0
字符串转数字 不能强转
引用数据类型
java:Object obj = new Object();
js:var obj = new Object();
var num = new Number();
运算符
(1)赋值运算符
(2)算数运算符
+:遇到字符串就变成连接了
-:先把字符串转换为数字然后进行运算
*和/与-一样,都是先把字符串转换为数字然后再进行运算
1213/100*100 = 1213; //特别注意js中才是这样的
(3)逻辑运算符
只有&& || ,没有& |
(4)比较运算符
===全等:类型与值都要相等
(5)三元运算符
(6)void运算符
<a href="javascript:void(0);">xxx</a> a标签不跳转
(7)类型运算符
typeof:判断数据类型 返回我的数据类型
instanceof:判断数据类型 是否是某种类型
逻辑语句
var arr = [1,3,5,7,9];
for index in arr
js对象
Number
var numer= new Number(s)
var numer= Number(s)
toString():转成字符串
valueOf():返回Number对象的基本数值
Boolean
var bool= new Boolean(s)
var bool= Boolean(s)
String
var str = new String(s)
var str = String(s)
属性和方法:
length:字符串的长度
charAt():返回索引字符
charCodeAt():返回索引字符unicode
indexOf():返回字符的索引
split():将字符按照特殊字符切割为数组
substr():从起始索引号提取指定数目的字符串
substring():提取两个指定索引号之间的字符
toUpperCase():转大写
(4)Array
var arr= new Array()
var arr=new Array(size) 超出长度后自动扩展
var arr= new Array(element0, element1, element2, ..., elementn)
var arr = [];
var arr = [1,2,3];
var arr=[5] 在js中是没有的
length
join()
pop()
push()
reverse()
sort() 按照字符串字典顺序进行排序
Date
创建方式:
var myDate = new Date()
var myDate = new Date(毫秒值) //代表从190-1-1起到的毫秒
getFullYear():年
getMonth():月 0-11
getDay():星期 0-6
getTime():
toLocal String():获得本地时间格式
Math
RegExp
创建方式:
var reg = new RegExp(pattern)
var reg = /^正则规则$/
规则的写法:
[0-9] d 代表数据 D 非数字
[A-Z]
[a-z]
[A-z]
w 查找单词字符
W 查找非单词字符
s 查找空白字符
S 查找非空白字符
+ 出现至少一次
* 出现0次或多次
?出现0次或1次
{5} 出现5次
{2,8} 2到8次
方法:
test():检索字符串中指定的值,返回true或false
js函数定义的方式
(1)普通方式
语法:function 函数名(参数列表){函数体}
(2)匿名函数
语法:function(参数列表){函数体}
var method = function(){
alert("yyy");
};
(3)对象函数
语法:new Function(参数列表,函数体);
注意:参数名称必须使用字符串形式、最后一个默认是函数体,且函数体需要字符串形式
var fn = new Function("a","b","alert(a+b)");
2、函数的参数
(1)形参没有var修饰
(2)形参和实参个数不一定相等
(3)arguments是个数组,会将传递的实参进行封装
3、返回值
(1)在定义函数的时候不必标明是否具有返回值
(2)返回值仅仅通过return返回就可以了,return后的代码不执行
4、js的全局函数
(1)编码和解码
decodeURI() 解码某个编码的URI
encodeURI() 把字符串编码为URI
decodeURIComponent() 解码一个编码的URI组件
encodeURIComponent() 解码一个编码的URI组件
escape() 对字符串进行编码
unescape() 对由escape()编码的字符串进行解码
三者区别:
进行编码的符号范围不同,实际开发中常使用第一种。
(2)强制转换
Number()
String()
Boolean()
(3) 转成数字
parseInt()
parseFloat()
(4)eval()方法
将字符串当作脚本进行解析运行
js的事件
事件
事件源
响应行为
js的常用事件:
onclick:点击事件
onblur: 元素失去焦点
onfocus:元素获取焦点
onchange用户改变域的内容
ondblclick onfocus onkeyup onload onmouseover onreset onsubmit onunload onmouseout
事件的绑定方式:
(1)将事件和响应行为都内嵌到html标签中
(2)将事件内嵌到html中,而响应行为用函数进行封装
(3)将事件和响应行为与html标签完全分离
this关键字
this经过事件的函数进行传递的是html标签对象
<label for="value">
for 属性规定 label 与哪个表单元素绑定
js代码中要用document,必须将它添加到后面,不要放到前面
onmouseover:鼠标悬浮的事件
onmouseout:鼠标离开的事件
css的background-color写到JavaScript代码中要用驼峰命名,backgroundColor
onload事件
window.onload=function(){};等页面加载完毕再执行此事件
3、阻止事件的默认行为
IE:window.event.returnValue = false; //阻止默认的事件
W3c(火狐谷歌):传递过来的事件对象.preventDefault();
通过事件返回false也可以阻止事件默认行为
4、阻止事件的传播
IE:window.event.cancelBubble = true;
W3c:传递过来的事件对象.stopPropagation();
if(e&&e.stopPropagation) 调用传入参数event
{
e.stopPropagation();
}else
{
window.event.cancelBubble = true;js的bom
(1)window对象
弹框的方法
提示框:alert("提示信息");
确认框: confirm("确认信息");
输入框:prompt("请输入密码");返回值就是输入的值
open方法
window.open("url地址");
定时器:
setTimeout(function,毫秒值);在某个毫秒值后执行函数
clearTimeout(定时器名称);
setInterval(function,毫秒值);
clearInterval(定时器名称);
(2)location
location.href="url地址";
(3)history
back() 上一页
forward() 下一页
go()跳转到哪一页
js的dom
1、理解一下文档对象模型
html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改。
在dom树种,一切皆为节点对象。
2、dom方法和属性
查找元素节点
getElementById()
getElementsByName()
getElementsByTagName()
查看是否存在子节点
hasChildNodes()
元素节点、文本节点、属性节点,每个节点都有nodeName、nodeType 只读属性
Node.ELEMENT_NODE ---1 元素节点
Node.ATTRIBUTE_NAME ---2 属性节点
Node.TEXT_NODE ---3 文本节点
nodeValue,返回给定节点的值 元素节点返回值是null 可读可写
<p id="pid">wenben</p>
var textNode = document.getElementById("pid").firstChild;
var p = node.getAttributeNode("id"); 根据属性来获得属性节点,不能写属性值
firstChild/lastChild
childNodes表示父节点下所有的子元素(数组)
替换节点
replaceChild()
element.replaceChild(newchild,oldchild)
获取父节点 parentNode
查找属性值
getAttribute(attributeName)
setAttribute(attributeName,attributeValue)
createElement()
createTextNode()
appendChild()
插入节点
insertBefore()
element.insertBefore(newNode,targetNode)
DOM没有提供insertAfter()方法
nextSibling 下一个兄弟
removeChild()删除
innerHTML
Ajax
function getXMLHttpRequest(){
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
window.onload = function()
{
var req = getXMLHttpRequest();
req.onreadystatechange = function()
{
if(req.readyStae == 4)
{
if (req.status == 200)
{
alert(req.responseText);
}
}
}
req.open("get","${pageContext.requset.contextPath}/servlet/servletDemo1");
req.send(null);
}
onblur 事件会在对象失去焦点时发生