目录:
- 1.JavaScript简介
- 2.JavaScript注释
- 3.JavaScript语法 :
- 变量的定义
- 函数的定义
- 4.JavaScript内置对象
- 4.1 window的作用 ：
- 出现提示框
- 打开关闭窗口
- 定时器
- 4.2 history的作用
- 4.3 document的作用 ：
- 在网页上输出
- 设置网页属性
- 访问文档元素，特别是表单元素
- 4.4 location的作用
1.JavaScript简介
JavasSript 是种网页脚本语言，虽然名字中含有Java，但它与Java语言是两种不同的语言。不过JavaScript 的语法和Java语言的语法非常类似。
JavasSript代码可以很容易地嵌入到到HTML页面中。浏览器对JavaScript脚本程序进行解释执行。
JavaScript 和 Java一样是 对大小敏感 的。
<html > <body> <script><!-- 弹出消息框 -->window.alert("第一个JavaScript"); </script> </body> </html>code.js
window.alert("第一个JavaScript文件。")在另外的HTML页面插入以来代码来导入该文件。
<script src="code.js" type="text/javascript"></script><!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注释内容 -->Java单行注释 、Java多行注释：
<script> //Java的单行注释方式/*Java的多行注释方式*/ </script>
3.JavaScript语法 :
变量的定义
JavaScript中的变量为 弱变量类型，即变量的类型根据它被赋值的类型改变。
var 变量名<script type="text/javascript">var score = 100; //弱类型，赋的值是什么类型该变量就是什么类型//100为int类型，则score则为int类型的变量 </script>JavaScript中变量未声明就使用是不会报错的，但容易出现不可预计的错误，所以要先声明再使用。
函数 Number(字符串) 可以将字符串转为数值；函数String(数值) 可以将数值转换为字符串。
函数的定义
JavaScript中函数的基本格式为 :
<script>//定义函数function 函数名(参数列表){return 值;} </script>定义匿名函数 ：
<script>//定义匿名函数var arg1 = function(参数列表) {return 值;} </script><script type="text/javascript">var arg0 = "欢迎使用JavaScript";showInfo(arg0)function showInfo(arg1){window.alert(arg1);} </script><script type="text/javascript">var score = 90;if (score >= 60) {window.alert("及格");} else {window.alert("不及格")} </script><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(“内容”): 出现输入框。
<!-- 出现提示框 --> <script type="text/javascript">window.alert("消息框") //出现提示框result = window.confirm("您确认要提交吗？") //出现确认框,根据你的选择会有一个返回值str = window.prompt("请输入一个字符串","") //出现输入框,获取输入的值 </script>
打开关闭窗口
window对象还用于控制窗口的状态 和 开/闭，打开窗口用window对象的open( )函数。
window.open( )方法参数有3个,第1个参数是 新窗口的地址 ； 第2个参数是 新窗口的名称，第3个参数是 新窗口的状态。
<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 : 各属性间用逗号隔开。newWindow = window.open("window.html", "new1", "toolbar=0,width=300,height=300,top=500,left=500");<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><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对象负责管理和控制页面的“定时器”，控制和操作页面的“定时器”。
定时器的作用: 让某个函数隔一段时间运行一次。
定时器格式:
timer = window.setTimeout("需要运行的函数","时间(用毫秒计)")清除定时器：
clearTimeout(timer)<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格页面。<html> <body> <a onclick="history.forward()">前进</a> <a onclick="history.back()">后退</a> </body> </html>
4.3 document的作用 ：
在网页上输出
在网页上输出 ： document.writeln( )
<script>//在网页上输出内容: 用document的.writenlen()方法document.writeln(“你好！”); </script><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来获取当前网页的地址等
<script type="text/javascript">//设置网页的属性 和 标题function fun() {document.title = "新的标题1";//获得当前网页的网址window.alert("该网页的网址是:" + document.location);} </script> <input type="button" onclick="fun()" value="按钮"/>
访问文档元素，特别是表单元素
- 使用document对象可以访问文档中的元素（例如图片、表单、表单中的控件等)
- 访问语法: document.元素名.子元素名
<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><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属性。
2. 定时跳转（该功能要结合window定时器使用）。<!-- 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><!--2.定时跳转（该功能要结合window定时器使用）--> 欢迎你登陆，3秒后跳转到首页..... <script type="text/javascript">window.setTimeout("toIndex()", 3000); //3秒后执行toIndex()方法function toIndex() {//进行网页跳转window.location.href = "img/2.png";} </script>
