什么是JavaScript
脚本语言(Scriping Language)
不需要事先编译,只要有适应的解释器就可以解释执行
分为两种:服务器脚本语言和客户端脚本语言
网景公司开发
跨平台,面向对象
动态类型语言,使用松散的数据类型JavaScript作用
将动态的文本放入HTML页面
对事件作出响应
读写HTML元素内容
用来验证数据
检测浏览者使用的浏览器
可以用来创建Cookies开启浏览器对javascript的支持
Internet选项->自定义级别->安全设置
启用脚本中java小程序脚本和活动脚本状态指定脚本语言的MIME类型
<script type='text/javascript'>
window.document.writeln('使用JavaScript')
</script>
<script type='text/vbscript'>
window.document.writeln('使用VBScript')
</script>
<script type='text/jscript'>
window.document.writeln('使用JScript')
</script>
<script type='text/livescript'>
window.document.writeln('使用LiveScript')
</script>defer属性
javascript可以放在HTML的任何位置,因此,浏览器解析HTML文档时,一旦遇到script脚本,就会停止解析文档,等待脚本执行.
如果在scritp脚本没有输出语句(例如doucment.wirte()的文字输出),就可以在设置defer属性,设置之后浏览器解析HTML遇到script不会停下来等待脚本的执行引用外部JavaScript
<script src="../temp.js">
//加载位于HTML文件上级目录下的temp.js文件
</script>
Javascript:的调用
调用方法
<a href="javascript:alert('单击了这个超链接')">点击</a>
调用函数
<a href="javascript:onclikLink()">点击</a>JavaScript注释
//单行注释
/**/多行注释JavaScript的变量
变量对大小写敏感
变量必须以字母(_和$也可以使用但不推荐)
当把数值赋值给变量时,不能加引号,如果使用引号,该值会被作为文本来处理
声明变量
声明
var name;
声明并赋值
var name="Lwc";
一条语句声明多个变量
var name="lwc",age="18",sex="boy"
如果为声明变量但没有赋值,那么变量的值为undefined
JavaScript变量均为对象,当您声明一个变量时,就创建了一个新的对象
JavaScript对象
JavaScript所有事物都是对象,对象拥有属性和方法
属性是与对象的相关的值
方法是能够在对象上执行的动作
JavaScript提供了多个内建对象,比如String,Date,Array等等
访问对象属性
var message="Hello World!";
var x=message.length;
访问对象方法
var message="Hello world!";
var x=message.toUpperCase();
创建自定义对象
直接创建对象
var lwc = new Object();
lwc.name="Lwc";
lwc.age="18";
或者
var lwc={
name:"Lwc",
age:18
};
访问
对象的属性以名称和值对的形式 (name:value)来定义,属性由逗号分隔 ,两种寻址方法
alert(lwc.name);
alert(lwc["age"]);
使用对象函数创建对象
创建函数
function lwc(name,age){
this.name=name;
this.age=age;
}
使用函数创建对象
var lwc = new lwc("lwc",18);
创建对象并访问对象的方法
function getName(){
return "Lwc"
}
var lwc = new Object();
lwc.name=getName();
alert(lwc.name);
function lwc(n,a){
this.name=n;
this.age=a;
//增加属性
this.changeName=changeName;
function changeName(str){
this.name=str
};
}
var lwc = new lwc("lwc",18);
lwc.changeName("nxj");
alert(lwc.name);
字符串对象String
var name="lwc";
方法和属性
length
toUpperCase()
数字对象Number
var age=18;
所有 JavaScript 数字均为 64 位
精度
整数不使用小数点或指数计数法,最多为 15 位
小数的最大位数是 17,但是浮点运算并不总是 100% 准确
0.2 + 0.1 = 0.30000000000000004
方法和属性
MAX VALUE,MIN VALUE
toString(),valueOf()
日期对象Date
Date 对象用于处理日期和时间
var myDate=new Date()
操作时间
var myDate=new Date()
myDate.setFullYear(2008,7,9)
注意:月份的参数介于 0 到 11 之间
方法和属性
prototype,constructor
getDate(),getTime()
布尔对象Boolean
var myBoolean=new Boolean();
var flag=true;
数组对象Array
数组对象用来存储一系列的对象
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
var cars=new Array("Audi","BMW","Volvo");
var cars=["Audi","BMW","Volvo"];
访问
alert(cars[0]);
null
特殊的数据类型,代表空没有值,什么数据类型也不是
可以通过将变量的值设置为 null 来清空变量
undefined
特殊的数据类型,使用一个未定义的变量或者使用一个不存在的对象,就会返回
算数Math对象
执行常见的算数任务
算数值,JavaScript 提供 8 种可被 Math 对象访问的算数值：
常数
圆周率
2 的平方根
1/2 的平方根
2 的自然对数
10 的自然对数
以 2 为底的 e 的对数
以 10 为底的 e 的对数
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
算数方法
Math.round(),Math.random()
RegExp对象
RegExp正则表达式的缩写
定义 RegExp
var patt1=new RegExp("e");//定义了名为 patt1 的 RegExp 对象,其模式是 "e"
对象方法
test(),方法检索字符串中是否存在指定值,返回值是 true 或 false
var patt1=new RegExp("e");
patt1.test("free")//返回true
exec(),方法检索字符串中是否存在指定值,返回值是被找到的值,没有则返回 null
//返回e
var patt1=new RegExp("e");
patt1.test("free")
//返回eenull
var patt1=new RegExp("e","g");
do{
result=patt1.exec("free");
document.write(result);
}
while (result!=null)
第二个参数代表global,如果找到第一个e,存放位置,下一次继续从g位置可以找
compile(),方法用于改变 RegExp,既可以改变检索模式,也可以添加或删除第二个参数
//第一次返回 true,第二次改变了模式返回了false
var patt1=new RegExp("e");
document.write(patt1.test("free"));
patt1.compile("d");
document.write(patt1.test("free"));
Javascript运算符
算术运算符
运算符 描述 例子 结果
+ 加 x=y+2 x=7
- 减 x=y-2 x=3
* 乘 x=y*2 x=10
/ 除 x=y/2 x=2.5
% 求余数 (保留整数) x=y%2 x=1
++ 累加 x=++y x=6
-- 递减 x=--y x=4
赋值运算符
运算符 例子 等价于 结果
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
比较运算符
运算符 描述 例子
== 等于 x==8 为 false
=== 全等（值和类型） x===5 为 true；x==="5" 为 false
!= 不等于 x!=8 为 true
> 大于 x>8 为 false
< 小于 x<8 为 true
>= 大于或等于 x>=8 为 false
<= 小于或等于 x<=8 为 true
逻辑运算符
运算符 描述 例子
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true
条件运算符
variablename=(condition)?value1:value2
JavaScript循环
For 循环
<script type="text/javascript">
for (i = 0; i <= 5; i++){
document.write("数字是 " + i)
document.write("<br />")
}
</script>While循环
<script type="text/javascript">
i = 0
while (i <= 5){
document.write("数字是 " + i)
document.write("<br />")
i++
}
</script>
Do While循环
<script type="text/javascript">
i = 0
do{
document.write("数字是 " + i)
document.write("<br />")
i++
}while (i <= 5)
</script>
for...in 语句
<!--
for...in 语句用于对数组或者对象的属性进行循环操作
for...in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作
-->
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"
//x变量 mycars对象
for (x in mycars){
document.write(mycars[x] + "<br />")
}
</script>
JavaScript switch语句
switch(n)
{
case 1:
执行代码块 1
break
case 2:
执行代码块 2
break
default:
如果n即不是1也不是2，则执行此代码
}
有两种可以用在循环中的语句:break 和 continue
使用 break 语句来终止循环
使用 continue 语句来终止当前的循环,然后从下一个值继续执行
JavaScript Try...Catch 语句
<script type="text/javascript">
var txt=""
function message(){
try{
adddlert("Welcome guest!")
}catch(err){
txt="本页中存在错误";
alert(txt);
}
}
</script>
JavaScript Throw 声明
<script type="text/javascript">
var x=prompt("请输入 0 至 10 之间的数：","")
try{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
else if(isNaN(x))
throw "Err3"
}catch(err){
if(err=="Err1")
alert("错误!该值太大!")
if(err == "Err2")
alert("错误!该值太小!")
if(err == "Err3")
alert("错误!该值不是数字!")
}
</script>
JavaScript 消息框
警告框alert("我是警告框!!")
alert("再次向您问好!在这里,我们向您演示" + '\n' + "如何向警告框添加折行.")
<script type="text/javascript">
function show_confirm(){
var r=confirm("Press a button!");
if (r==true){
alert("You pressed OK!");
}else{
alert("You pressed Cancel!");
}
}
</script>
<script type="text/javascript">
function disp_prompt(){
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!=""){
document.write("你好！" + name + " 今天过得怎么样？")
}
}
</script>
JavaScript HTML DOM
案例
<html>
<head>
<script type="text/javascript">
//如果在文档已完成加载后执行 document.write整个HTML页面将被覆盖
document.write("<h1>This is a heading</h1>");
function changeInputAndP1(){
var elementInput = document.getElementById("input");
elementInput.value = "Nxj"
var elementP1 = document.getElementById("p1");
elementP1.innerHTML = "This is a new student"
}
function changeP2Color(){
var elementP2 = document.getElementById("p2");
elementP2.style.color="#ff0000";
}
</script>
</head>
<body>
<input id="input" type="text" value="Lwc"/>
<p id="p1">This is a paragraph</p>
<button type="button" onclick="changeInputAndP1()">改变值</button>
<p id="p2">我现在是黑色</p>
<button type="button" onclick="changeP2Color()">改变颜色</button>
<br>
<input type="text" value="必须输入数字" onfocus="javascript:this.value=''"
onblur="yanZheng(this)"/>
</body>
</html>知识点
HTML DOM文档对象模型
当网页被加载时,浏览器会创建页面的文档对象模型Document Object Model
JavaScript通过HTML DOM有能力来创建动态的 HTML
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通过 id 找到 HTML 元素
var elementP1 = document.getElementById("p1");
通过标签名找到 HTML 元素
var elementInput = document.getElementsByTagName("input");
通过类名找到 HTML 元素
改变 HTML 元素的内容
var elementInput = document.getElementById("input");
elementInput.value = "Nxj"
var elementP1 = document.getElementById("p1");
elementP1.innerHTML = "This is a new student"
var elementP2 = document.getElementById("p2");
elementP2.style.color="#ff0000";
HTML DOM 事件
查看API
http://www.w3school.com.cn/jsref/dom_obj_event.asp
HTML DOM 元素(节点)
创建新的 HTML 元素
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
//创建新的 <p> 元素
var p=document.createElement("p");
//创建了一个文本节点
var node=document.createTextNode("这是新段落");
//向 <p> 元素追加这个文本节点
p.appendChild(node);
//找到一个已有的元素
var element=document.getElementById("div1");
/向这个已有的元素追加新元素
element.appendChild(p);
</script>
删除已有的 HTML 元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
//找到 id="div1" 的元素
var parent=document.getElementById("div1");
//找到 id="p1" 的 <p> 元素
var child=document.getElementById("p1");
//父元素中删除子元素
parent.removeChild(child);
</script>
JavaScript Window浏览器对象模型
Window 对象
表示浏览器窗口
显示浏览器窗口的高度和宽度,不包括工具栏/滚动条
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
其他方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
Screen对象
window.screen 对象包含有关用户屏幕的信息
属性
screen.availWidth - 可用的屏幕宽度,以像素计
screen.availHeight - 可用的屏幕高度,以像素计
Location对象
window location对象用于获得当前页面的地址 URL,并把浏览器重定向到新的页面
例子
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.href 返回当前页面的 URL
location.assign("http://www.w3school.com.cn")加载新的文档
History对象
window.history,为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制
例子
history.back()
方法加载历史列表中的前一个 URL,这与在浏览器中点击后退按钮是相同的
history.forward()
方法加载历史列表中的下一个 URL,与在浏览器中点击按钮向前相同
Navigator对象
window.navigator
JavaScript Timing计时
通过使用 JavaScript我们有能力做到在一个设定的时间间隔之后来执行代码,
而不是在函数被调用后立即执行,我们称之为计时事件
计时事件两个关键方法
setTimeout() 未来的某时执行代码
var t=setTimeout("alert('我延迟了1000毫秒才弹出来的')",1000)
clearTimeout() 取消setTimeout()
JavaScript Cookies
cookie 用来识别用户
是存储于访问者的计算机中的变量,每当同一台计算机通过浏览器请求某个页面时,
就会发送这个 cookie,你可以使用 JavaScript 来创建和取回 cookie 的值
创建和存储 cookie
function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
扫一扫
14万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
