目录:
-
- 1.JavaScript简介
- 2.JavaScript注释
- [3.JavaScript语法 :](#3.JavaScript语法 :)
- 4.JavaScript内置对象
1.JavaScript简介
JavasSript 是种网页脚本语言,虽然名字中含有Java,但它与Java语言是两种不同 的语言。不过JavaScript 的语法和Java 语言的语法非常类似。
JavasSript 代码可以很容易地嵌入 到到HTML页面中。浏览器对JavaScript脚本程序 进行解释执行。
JavaScript 和 Java 一样是 对大小敏感 的。
html<html > <body> <script> <!-- 弹出消息框 --> window.alert("第一个JavaScript"); </script> </body> </html>
code.js
jswindow.alert("第一个JavaScript文件。")
在另外的HTML页面 插入以来代码 来导入该文件。
html<script src="code.js" type="text/javascript"></script>
html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导入JS文件</title> </head> <body> <!-- 导入code.js文件--> <script src="code.js" type="text/javascript"></script> </body> </html>
2.JavaScript注释
在JavaScript 中注释有3种写法 :
HTML注释 :
html<!-- HTML注释内容 -->
Java单行注释 、Java多行注释:
js<script> //Java的单行注释方式 /* Java的多行注释方式 */ </script>
3.JavaScript语法 :
变量的定义
JavaScript 中的变量 为 弱变量类型,即变量的类型 根据它被赋值的类型改变。
jsvar 变量名
js<script type="text/javascript"> var score = 100; //弱类型,赋的值是什么类型该变量就是什么类型 //100为int类型,则score则为int类型的变量 </script>
JavaScript 中变量未声明就使用是不会报错 的,但容易出现不可预计的错误 ,所以要先声明再使用。
函数 Number(字符串) 可以将字符串 转为数值;函数String(数值) 可以将数值 转换为字符串。
函数的定义
JavaScript 中函数的基本格式为 :
js<script> //定义函数 function 函数名(参数列表){ return 值; } </script>
定义匿名函数 :
js<script> //定义匿名函数 var arg1 = function(参数列表) { return 值; } </script>
js<script type="text/javascript"> var arg0 = "欢迎使用JavaScript"; showInfo(arg0) function showInfo(arg1){ window.alert(arg1); } </script>
js<script type="text/javascript"> var score = 90; if (score >= 60) { window.alert("及格"); } else { window.alert("不及格") } </script>
js<script type="text/javascript"> for (var i = 0; i < 10; i++) { window.alert(i); } </script>
4.JavaScript内置对象
JavaScript 的 内置对象由浏览器提供 ,可以直接使用 ,不用事先定义。
JavaScript 的四个内置对象 分别是: ①window ②document ③history ④location
window :负责操作浏览器窗口 ,负责窗口的状态、开 /闭。
document : 负责操作浏览器载入的文档 (HTML文件 ),从属于Window。
history : 可以代替后退 ( 前进 )按钮 访问历史记录,从属于window。
location : 访问地址栏,也从属于window。
4.1 window的作用 :
出现提示框
window 对象可以 跳出提示框,主要有如下功能。
- window . alert ("内容"): 出现消息框。
- window . confirm ("内容"): 出现确认框。
- window . prompt ("内容"): 出现输入框。
js<!-- 出现提示框 --> <script type="text/javascript"> window.alert("消息框") //出现提示框 result = window.confirm("您确认要提交吗?") //出现确认框,根据你的选择会有一个返回值 str = window.prompt("请输入一个字符串","") //出现输入框,获取输入的值 </script>
打开关闭窗口
window 对象还用于控制窗口的状态 和 开/闭,打开窗口用window对象的open( )函数。
window.open ( )方法参数有3 个,第1个参数 是 新窗口的地址 ; 第2个参数 是 新窗口的名称,第3个参数 是 新窗口的状态。
js<script> //窗口的状态栏,显示的字符串为: "出现新窗口" window.status = "出现新窗口"; /* 创建/打开一个新窗口window1.html,命名为: new1,并指定其属性 */ newWindow = window.open("window.html", "new1", "width=300,height=300,top=500,left=500"); //关闭窗口 newWindow.close(); </script>
新窗口状态 (第三个参数 ) 可设置如下属性 。
toolbar : 是否有工具栏 ,可选值为1 和0 。
location : 是否有地址栏 ,可选值为1和0。
status : 是否有状态栏 ,可选值为1和0。
menubar : 是否有菜单栏 ,可选值为1和0。
scrollbars : 是否有滚动条 ,可选值为1和0。
resizable : 是否能改变大小 ,可选值为1和0 。
width 和 height : 窗口的宽度和高度 ,用像素 表示。
left 和 top : 窗口左上角相对于桌面左上角 的x 和y坐标 。
ps : 各属性间用逗号隔开。
jsnewWindow = window.open("window.html", "new1", "toolbar=0,width=300,height=300,top=500,left=500");
js<script> window.status = "出现新窗口"; /* 创建/打开一个新窗口window1.html,命名为: new1,并指定其各项属性 */ newWindow = window.open("window.html", "new1", "toolbar=0,width=300,height=300,top=500,left=500"); //关闭窗口 newWindow.close(); </script>
js<script> //窗口的状态栏,显示的字符串为: "出现新窗口" window.status = "出现新窗口"; /* 创建/打开一个新窗口window1.html,命名为: new1,并指定宽度、高度和 "其的位置" */ //打开新窗口 (html名,窗口名,设置该窗口的宽高位置) newWindow = window.open("window.html", "new1", "width=300,height=300,top=500,left=500"); //通过返回值来控制窗口 //关闭窗口 newWindow.close(); </script> </body> </html>
定时器
定时器 : window对象负责管理和控制页面的"定时器",控制和操作页面的"定时器"。
定时器的作用: 让某个函数隔一段时间运行一次。
定时器格式:
jstimer = window.setTimeout("需要运行的函数","时间(用毫秒计)")
清除定时器:
jsclearTimeout(timer)
js<script type="text/javascript"> //setTimeout 让函数在某段时间之后运行一次,参数是2毫秒 timer = window.setTimeout("fun1()", 1000); //1秒后执行该函数 var i = 0; //弱类型变量 function fun1() { i++; window.status = i; if (i == 100) { //i到达100就清除该定时器 window.clearTimeout(timer); return; } timer = window.setTimeout("fun1()", "1000"); //继续调会fun1()函数 } </script>
4.2 history的作用
history 包含用户浏览等 历史信息,使用这个对象可以替代后退/前进按钮 访问历史记录 。该对象
从属于window。
history 对象常用的函数:
history.back() : 返回上一页 ,相等于点击浏览器上的后退按钮 。
history.forward() : 返回下一页 ,相当于点击浏览器上的前进按钮。
window.history.go(on) : n 为整数,整数表示向前进n格 页面,负数表示向后退n格页面。
js<html> <body> <a onclick="history.forward()">前进</a> <a onclick="history.back()">后退</a> </body> </html>
4.3 document的作用 :
在网页上输出
在网页上输出 : document.writeln( )
js<script> //在网页上输出内容: 用document的.writenlen()方法 document.writeln("你好!"); </script>
js<script type="text/javascript"> // 展示 8X8的国际象棋 // table标签 document.writeln("<table width=400 height=400 border=1>") for (i = 1; i <= 8; i++) { //tr开始标签 document.writeln("<tr>"); for (j = 1; j <= 8; j++) { color = "black"; //黑色 if ((i + j) % 2 == 0) { color = "white"; //白色 } //td标签 document.writeln("<td bgcolor=" + color + "></td>"); } document.writeln("</tr>"); } document.writeln("</table>") </script>
设置网页属性
使用document对象 可以进行一简单网页属性的设置,例如网页的标题 、颜色 等,并且可以得到 网页的某些属性,例如当前地址。
其比较常用的设置包括 document.title 来访问标题、document.location来获取当前网页的地址等
js<script type="text/javascript"> //设置网页的属性 和 标题 function fun() { document.title = "新的标题1"; //获得当前网页的网址 window.alert("该网页的网址是:" + document.location); } </script> <input type="button" onclick="fun()" value="按钮"/>
访问文档元素,特别是表单元素
- 使用document 对象可以访问文档中的元素 (例如图片 、表单 、表单中的控件等)
- 访问语法 : document .元素名 .子元素名
js<script type="text/javascript"> function add() { //得到这两个文本框的内容(且都转换为数字类型) n1 = Number(document.form1.txt1.value) n2 = Number(document.form1.txt2.value) //给表单中的txt3赋值 document.form1.txt3.value = n1 + n2; } </script> <form name="form1"> <input name="txt1" type="text"><br> <input name="txt2" type="text"><br> <input type="button" onclick="add()" value="求和"><br> <input name="txt3" type="text"><br> </form>
js<script type="text/javascript"> function validate() { //得到这两个文本的内容 account = document.loginForm.account.value; password = document.loginForm.password.value; //验证这两个的内容 if (account == "") { window.alert("账号不能为空!"); //将鼠标光标聚焦在账号栏上 document.loginForm.account.focus(); return; }else if (password == "") { window.alert("密码不能为空!"); document.loginForm.password.focus(); return; } //密码和账号都不为空,才提交该表单 document.loginForm.submit(); } </script> 欢迎您登录: <form name="loginForm"> 输入账号: <input name="account" type="text"><br> 输入密码: <input name="password" type="password"><br> <input type="button" onclick="validate()" value="登录"> </form>
4.4 location的作用
location对象 可以访问浏览器的地址栏,从属于window对象。
其常见的功能 :
1.跳转到下一个网页,跳转方法 是修改 location对象 中的href属性。
- 定时跳转(该功能要结合window定时器使用)。
js<!-- 1.用location内置对象进行网页跳转--> <script type="text/javascript"> function locationTest() { //location为内置对象,直接.href,修改属性的值,即可实现跳转到下一个网页 location.href = "./img/2.png"; } </script> <input type="button" onclick="locationTest()" value="按钮"> <a href="img/2.png">到图片</a>
js<!--2.定时跳转(该功能要结合window定时器使用)--> 欢迎你登陆,3秒后跳转到首页..... <script type="text/javascript"> window.setTimeout("toIndex()", 3000); //3秒后执行toIndex()方法 function toIndex() { //进行网页跳转 window.location.href = "img/2.png"; } </script>