JavaWeb | JavaScript基础
目录:
- 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>