JavaScript基础
来源：互联网 发布：java tree 遍历 编辑：程序博客网 时间：2024/06/05 00:23
一、初识JavaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
二、入门JavaScript
一般JavaScript是用于页面的动态效果展示。JavaScript可以在<head>标签中写相应的语句，也可以在<body>中写语句实现功能。
<!DOCTYPE html> <html charset=utf-8> <head> <title></title> <script type="text/javascript"> document.write("第一个JavaScript页面"); </script> </head> <body> <script type="text/javascript"> document.write("hello world!"); </script> </body> </html>JavaScript有很多开源框架，由于JavaScript编程灵活多变，基于JavaScript的开源项目很多，优秀的开源框架也有很多，比如jQuery，angularJs，等等。在实际开发中，我们可以在HTML中 引入外部的.js文件，前段开发常用的js库有jQuery库，功能强大，容易上手
<head><script type=”text/javascript” src=”.js文件的路径”></script><script type="text/javascript" src="../js/demo.js"></script></head>JavaScript代码如果是直接执行放在那里都可以，如果是调用函数，实现页面功能，放在中比较合适。
在JavaScript中变量用var声明，数据类型分为，数值型：如123,1.223；字符型：（在JavaScript中不区分字符和字符串）如‘adaf’,”dsaffg”,”小明”；布尔型：true，false。
变量的声明：
var i = 10;var str = "asdf";var f = 1.23;基本语句
ifforwhiledo.......whileswitch函数：javascript中的函数用function关键字来修饰，函数本身是可以用返回值的，但是在声明的时候不需要写返回值类型，如果有返回值就写return，否则就不写。
函数也可以有参数，写参数的时候只写形参的名字就可以了
Function 函数名（[参数1，参数2.。。。。]） ｛
｝
<script type="text/javascript"> var i = fun3(1,2);//调用fun3 document.write();//写入内容可以输出在页面上 function fun1(){ for (var i = 0; i < 10; i++) { document.write(i + "<br/>"); } } function fun2(a,b){ document.write(a+b+"<br/>"); } function fun3(a,b){ return a+b; } </script>三大提示框：
alert（“提示内容”）
<script type="text/javascript"> function fun1() { alert("这是一个提示窗口"); } function fun2() { if(confirm("您确定删除吗？")) { document.write("确定"); }else { document.write("取消"); } } function fun3() { var a = prompt("请输入内容","请按指定格式输入"); alert(a); } </script> </head> <body> <form> <p> <input type="button" value="alert按钮" onclick="fun1()"/> </p> <p> <input type="button" value="confirm按钮" onclick="fun2()"/> </p> <p> <input type="button" value="prompt按钮" onclick="fun3()"/> </p> </form> </body>confirm(“提示内容”)
confirm提示框是不返回值的，当点击确定按钮时返回true,当点击取消按钮时返回false
prompt(“提示内容”)
prompt(“提示内容1”，”提示内容2”);
prompt的返回值是输入的内容
<script type="text/javascript"> function calculate() { var baseprice = document.myform.baseprice.value; var num = document.myform.num.value; var cost = document.myform.cost.value; if(num=="") { alert("请输入数量"); }else { document.myform.cost.value = baseprice * num; //此语法错误 cost = baseprice * num; } } </script> </head> <body> <h2>Q币充值</h2> <form name="myform"> <input type="image" src="../img/logo.gif"/><br/> <input type="image" src="../img/qie.jpg"/><br/> 单价：<input type="text" value="10" disabled="disabled" name="baseprice"/><br/> 数量：<input type="text" name="num"/><br/> 总价：<input type="text" readonly="readonly" name="cost"/><br/> <input type="button" value="结算" onclick="calculate()"/> <input type="reset"/> </form> </body>如何获得标签中的属性的值，document.表单name.标签name.属性
Javascript中的注释和java一样
<script type="text/javascript"> function calculate() { var baseprice = document.myform.baseprice.value; var num = document.myform.num.value; var cost; if(num=="") { alert("请输入数量"); }else { cost = baseprice * num; if(cost>=3000) { alert("充值金额超过3000，赠送30天QQ会员"); }else if(cost>=2000) { alert("充值金额超过2000，赠送15天QQ会员"); }else if(cost>=1000) { alert("充值金额超过1000，赠送7天QQ会员"); } document.myform.cost.value = cost; //此语法错误 cost = baseprice * num; } } </script> </head> <body> <h2>Q币充值</h2> <form name="myform"> <input type="image" src="../img/logo.gif"/><br/> <input type="image" src="../img/qie.jpg"/><br/> 单价：<input type="text" value="10" disabled="disabled" name="baseprice"/><br/> 数量：<input type="text" name="num"/><br/> 总价：<input type="text" readonly="readonly" name="cost"/><br/> <input type="button" value="结算" onclick="calculate()"/> <input type="reset"/> </form> </body>简易计算器JavaScript实现：
<head> <script type="text/javascript"> function cal() { var num1 = document.myform.num1.value; var num2 = document.myform.num2.value; var se = document.myform.se.value; //这里选择也可以使用switch。 if(se=="+") { document.myform.result.value = parseFloat(num1) + parseFloat(num2); }else if(se=="-") { document.myform.result.value = num1 - num2; }else if(se=="*") { document.myform.result.value = num1 * num2; }else if(se=="/") { document.myform.result.value = num1 / num2; } } </script> </head> <body> <form name="myform"> <input type="text" name="num1"/> <select name="se"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" name="num2"/>= <input type="text" name="result" readonly="readonly"/><br/> <input type="button" value="计算" onclick="cal()"/> <input type="reset"/> </form> </body> 三、浏览器对象：
Window、Document、Location、History
Window是javascript中所有对象的根对象，默认在使用的时候可以不直接写出，例如经常使用的alert()
Window.open窗口
格式：Window.open(“url”,”窗口的名字（可以不写）”,”窗口属性的设置”);
‘page.html’ 弹出窗口的文件名；
‘newwindow’ 弹出窗口的名字（不是文件名），非必须，可用空”代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
<html> <head> <title>javascript1.html</title> <script type="text/javascript"> function fun() { window.open("adv.html","","width=800,height=150") } </script> </head> <body onload="fun()"> <form> <input type="button" value="open窗口" onclick="fun()"/> </form> </body></html>onload事件写在body中。
<html> <head> <title>javascript2.html</title> <script type="text/javascript"> function fun(color) { document.bgColor = color; } </script> </head> <body> <a onmouseover="fun('red')">红色</a>| <a onmouseover="fun('yellow')">黄色</a>| <a onmouseover="fun('blue')">蓝色</a> </body></html>document.bgColor设置背景颜色。
<html> <head> <title>javascript3.html</title> <script type="text/javascript"> function fun() { var url = document.myform.se.value; location.href = url; } </script> </head> <body> <form name="myform"> <select onchange="fun()" name="se"> <option>--请选择--</option> <option value="1.html">第一个页面</option> <option value="2.html">第二个页面</option> </select> </form> </body></html>使用location.href实现页面跳转。。。
history.back()后退（等同于history.go(-1)）
history.forward()前进(等同于history.go(1))
实例练习：
<html> <head> <title>javascript4.html</title> <style type="text/css"> body { background-color: #99ffcc; } </style> <script type="text/javascript"> function validate() { var username = document.getElementById("username").value; var pwd = document.getElementById("pwd").value; var repwd = document.getElementById("repwd").value; if(username=="") { alert("用户名不能为空！"); }else if(pwd=="" || repwd=="") { alert("密码或确认密码不能为空！"); }else if(pwd!=repwd) { alert("两次输入密码不一致"); } } </script> </head> <body> <form action=""> <table align="center"> <tr> <td colspan="2"> <img src="../img/logo1.gif" width="120"/> <img src="../img/reg.gif" width="120"/> </td> </tr> <tr> <td>用户名：</td> <td> <input type="text" id="username"/> </td> </tr> <tr> <td>密码：</td> <td> <input type="password" id="pwd"/> </td> </tr> <tr> <td>确认密码：</td> <td> <input type="password" id="repwd"/> </td> </tr> <tr> <td colspan="2" align="center"> <input type="button" value="提交" onclick="validate()"/> </td> </tr> </table> </form> </body></html><html> <head> <title>javascript5.html</title> <style type="text/css"> body { background-color: #99ffcc; } </style> <script type="text/javascript"> function validate() { var username = document.getElementById("username").value; var pwd = document.getElementById("pwd").value; var repwd = document.getElementById("repwd").value; var gender = document.getElementsByName("gender"); if(username=="") { alert("用户名不能为空！"); return false; }else if(pwd=="" || repwd=="") { alert("密码或确认密码不能为空！"); return false; }else if(pwd!=repwd) { alert("两次输入密码不一致"); return false; }else if(!(gender[0].checked || gender[1].checked)) { alert("请选择性别！"); return false; }else { return true; } } </script> </head> <body> <form action="welcome.html" onsubmit="return validate()"> <table align="center"> <tr> <td colspan="2"> <img src="../img/logo1.gif" width="120"/> <img src="../img/reg.gif" width="120"/> </td> </tr> <tr> <td>用户名：</td> <td> <input type="text" id="username"/> </td> </tr> <tr> <td>密码：</td> <td> <input type="password" id="pwd"/> </td> </tr> <tr> <td>确认密码：</td> <td> <input type="password" id="repwd"/> </td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="gender" value="male"/>男 <input type="radio" name="gender" value="female"/>女 </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="提交" /> </td> </tr> </table> </form> </body></html><html> <head> <title>javascript6.html</title> <script type="text/javascript"> function fun() { var str = ""; if(confirm("您确定已选择好商品了吗？")) { var ch = document.getElementsByName("ch"); for(var i=0;i<ch.length;i++) { if(ch[i].checked) { str += ch[i].value + ","; } } document.write("您选择的商品是：" + str.substring(0,str.length-1)); } } </script> </head> <body> <form action=""> <table align="center"> <tr> <td colspan="4"> <img src="../img/logoe.gif"/> </td> </tr> <tr> <td> <img src="../img/logoe1.jpg"/> </td> <td> <img src="../img/logoe2.jpg"/> </td> <td> <img src="../img/logoe3.jpg"/> </td> <td> <img src="../img/logoe4.jpg"/> </td> </tr> <tr> <td> <input type="checkbox" name="ch" value="国服金币"/>国服金币 </td> <td> <input type="checkbox" name="ch" value="游戏装备"/>游戏装备 </td> <td> <input type="checkbox" name="ch" value="副本攻略"/>副本攻略 </td> <td> <input type="checkbox" name="ch" value="游戏周边"/>游戏周边 </td> </tr> <tr> <td align="center" colspan="4"> <input type="button" value="确认" onclick="fun()"/> </td> </tr> </table> </form> </body></html><html> <head> <title>javascript7.html</title> <script type="text/javascript"> function del() { var se = document.getElementById("se"); se.remove(se.selectedIndex); /* for(var i=0;i<se.length;i++) { if(se[i].selected) { alert(se[i].text); } } */ } function add() { var se = document.getElementById("se"); var o = new Option(); o.text = "新水果"; se.add(o); } </script> </head> <body> <form action=""> <select id="se"> <option>苹果</option> <option>香蕉</option> <option>桔子</option> </select> <input type="button" value="增加" onclick="add()"/> <input type="button" value="删除" onclick="del()"/> </form> </body></html><html> <head> <title>javascript8.html</title> </head> <body> <form> <table align="center" border="1" width="50%"> <tr> <td> <input type="checkbox"/>全选 </td> <td>姓名</td> <td>性别</td> <td>地址</td> <td>部门</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>Jim</td> <td>男</td> <td>海淀区万寿路</td> <td>营销部</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>James</td> <td>男</td> <td>丰台区航天科工大院</td> <td>市场部</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>Lucy</td> <td>女</td> <td>东城区牛街</td> <td>人事部</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>Lily</td> <td>女</td> <td>西城区旧鼓楼大街</td> <td>市场部</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>Henry</td> <td>男</td> <td>长安街故宫</td> <td>教学部</td> </tr> </table> </form> </body></html>习题1：
<html> <head> <title>javascript8.html</title> <script type="text/javascript"> function chooseAll() { var all = document.getElementById("all"); var ch = document.getElementsByName("ch"); for(var i=0;i<ch.length;i++) { ch[i].checked = all.checked; } } </script> </head> <body> <form action=""> <table border="1" width="50%" align="center"> <tr> <td> <input type="checkbox" id="all" onclick="chooseAll()"/>全选 </td> <td>姓名</td> <td>性别</td> <td>地址</td> <td>部门</td> </tr> <tr> <td> <input type="checkbox" name="ch"/> </td> <td>Jim</td> <td>男</td> <td>海淀区万寿路</td> <td>市场部</td> </tr> <tr> <td> <input type="checkbox" name="ch"/> </td> <td>James</td> <td>男</td> <td>东城区牛街</td> <td>财务部</td> </tr> <tr> <td> <input type="checkbox" name="ch"/> </td> <td>Lucy</td> <td>女</td> <td>西城区旧鼓楼大街</td> <td>技术部</td> </tr> <tr> <td> <input type="checkbox" name="ch"/> </td> <td>Lily</td> <td>女</td> <td>丰台区永定河畔</td> <td>财务部</td> </tr> <tr> <td> <input type="checkbox" name="ch"/> </td> <td>Henry</td> <td>男</td> <td>长安街故宫</td> <td>市场部</td> </tr> </table> </form> </body></html>习题2：
<html> <head> <title>homework2.html</title> <script type="text/javascript"> function del() { var se = document.getElementById("se"); if(se.length>0 && se.selectedIndex!=-1) { se.remove(se.selectedIndex); } } function add() { var se = document.getElementById("se"); var fruit = document.getElementById("fruit").value; var o = new Option(); o.text = fruit; var flag = true; for(var i=0;i<se.length;i++) { if(se[i].text==fruit) { flag = false; } } if(flag) { se.add(o); } } </script> </head> <body> <form action=""> <select multiple="multiple" id="se"> <option>苹果</option> <option>桔子</option> </select> <input type="button" value="删除一个水果" onclick="del()"/> <input type="text" id="fruit"/> <input type="button" value="增加一个水果" onclick="add()"/> </form> </body></html>习题3：
<html> <head> <title>homework3.html</title> <script type="text/javascript"> function add() { var s1 = document.getElementById("s1"); var s2 = document.getElementById("s2"); var o = new Option(); o.text = s1[s1.selectedIndex].text; if(s2.length==0) { s2.add(o); }else { var flag = true; for(var i=0;i<s2.length;i++) { if(s2[i].text==o.text) { flag = false; } } if(flag) { s2.add(o); } } } function del() { var s2 = document.getElementById("s2"); if(s2.length>0 && s2.selectedIndex!=-1) { s2.remove(s2.selectedIndex); } } </script> </head> <body> <form action=""> <table align="center"> <tr> <td> <select id="s1" multiple="multiple" style="width: 200;height:150"> <option>美元/英镑</option> <option>美元/港币</option> <option>美元/新加坡元</option> <option>美元/日元</option> <option>美元/加拿大元</option> <option>美元/欧元</option> </select> </td> <td> <input type="button" value="增加" onclick="add()"/><br/> <input type="button" value="删除" onclick="del()"/> </td> <td> <select id="s2" multiple="multiple" style="width: 200;height:150"></select> </td> </tr> </table> </form> </body></html>设置标签样式中的display，可以将标签设置成隐藏和显示，当值为none的时候是隐藏，当值为inline的时候是显示
<html> <head> <title>javascript8.html</title> <script type="text/javascript"> function chooseAll() { var all = document.getElementById("all"); var ch = document.getElementsByName("ch"); for(var i=0;i<ch.length;i++) { ch[i].checked = all.checked; } } function fun1() { var ta = document.getElementById("ta"); ta.style.display = "none"; } function fun2() { var ta = document.getElementById("ta"); ta.style.display = "inline"; } function add() { location.href = "addPerson.html"; } </script> </head> <body> <form action=""> <table border="1" width="50%" align="center" id="ta" > <tr> <td> <input type="checkbox" id="all" onclick="chooseAll()"/>全选 </td> <td>姓名</td> <td>性别</td> <td>地址</td> <td>部门</td> </tr> <tr> <td> <input type="checkbox" name="ch"/> </td> <td>Jim</td> <td>男</td> <td>海淀区万寿路</td> <td>市场部</td> </tr> <tr> <td> <input type="checkbox" name="ch"/> </td> <td>James</td> <td>男</td> <td>东城区牛街</td> <td>财务部</td> </tr> <tr> <td> <input type="checkbox" name="ch"/> </td> <td>Lucy</td> <td>女</td> <td>西城区旧鼓楼大街</td> <td>技术部</td> </tr> <tr> <td> <input type="checkbox" name="ch"/> </td> <td>Lily</td> <td>女</td> <td>丰台区永定河畔</td> <td>财务部</td> </tr> <tr> <td> <input type="checkbox" name="ch"/> </td> <td>Henry</td> <td>男</td> <td>长安街故宫</td> <td>市场部</td> </tr> <tr> <td colspan="5"> <input type="button" value="增加" onclick="add()"/> </td> </tr> </table><br/> <input type="button" value="隐藏" onclick="fun1()"/> <input type="button" value="显示" onclick="fun2()"/> </form> </body></html><html> <head> <title>addPerson.html</title> <script type="text/javascript"> function chooseDept() { window.open("chooseDept.html","","width=100,height=200"); } function setValue(element) { var dept = document.getElementById("dept"); dept.value = element; } </script> </head> <body> <form action=""> <table> <tr> <td>姓名：</td> <td> <input type="text"/> </td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="gender"/>男 <input type="radio" name="gender"/>女 </td> </tr> <tr> <td>地址：</td> <td> <input type="text"/> </td> </tr> <tr> <td>部门：</td> <td> <input type="text" id="dept" readonly="readonly"/> <input type="button" value="选择部门" onclick="chooseDept()"/> </td> </tr> <tr> <td colspan="2"> <input type="button" value="确定"/> </td> </tr> </table> </form> </body></html><html> <head> <title>chooseDept.html</title> <script type="text/javascript"> function sure() { var dept = document.getElementsByName("dept"); for(var i=0;i<dept.length;i++) { if(dept[i].checked) { window.opener.setValue(dept[i].value);//在页面调用父页面的setValue函数 window.close(); } } } </script> </head> <body> <form> <table border="1"> <tr> <td>选择</td> <td>部门名称</td> </tr> <tr> <td> <input type="radio" name="dept" value="市场部"/> </td> <td>市场部</td> </tr> <tr> <td> <input type="radio" name="dept" value="营销部"/> </td> <td>营销部</td> </tr> <tr> <td> <input type="radio" name="dept" value="人事部"/> </td> <td>人事部</td> </tr> <tr> <td> <input type="radio" name="dept" value="财务部"/> </td> <td>财务部</td> </tr> <tr> <td> <input type="radio" name="dept" value="研发部"/> </td> <td>研发部</td> </tr> <tr> <td colspan="2"> <input type="button" value="确定" onclick="sure()"/> </td> </tr> </table> </form> </body></html>Open窗口父子页面传值，采用子页面调用父页面函数的方式传值，形式如下：
在子页面中这样调用 window.opener.父页面函数，如果要传值的话，被调用的父页面的函数一定要有参数
成对儿的标签中间夹的那部份内容叫做innerHTML
<html> <head> <title>javascript2.html</title> <script type="text/javascript"> function fun() { var p = document.getElementById("p"); var dv = document.getElementById("dv"); p.innerHTML = "这是一个p标签"; dv.innerHTML = "这是一个dv标签"; } </script> </head> <body> <p id="p">P</p> <div id="dv">dv</div><br/> <input type="button" value="innerHTML按钮" onclick="fun()"/> </body></html>动态增加删除表格：
insertRow()增加一行
insertCell()增加一列
deleteRow()删除一行
<html> <head> <title>javascript3.html</title> <script type="text/javascript"> function add() { var ta = document.getElementById("ta"); var row = ta.insertRow(); row.insertCell().innerHTML = "<input type='radio' name='r'/>"; row.insertCell().innerHTML = "<input type='text'/>"; row.insertCell().innerHTML = "<select><option>电话</option><option>SMS</option><option>Email</option></select>"; } function del() { var r = document.getElementsByName("r"); var ta = document.getElementById("ta"); for(var i=0;i<r.length;i++) { if(r[i].checked) { ta.deleteRow(i+1); break; } } } </script> </head> <body> <form action=""> <table id="ta" border="1"> <tr> <td>选择</td> <td>顺序</td> <td>回复方式</td> </tr> </table> <input type="button" value="增加" onclick="add()"/> <input type="button" value="删除" onclick="del()"/> </form> </body></html><html> <head> <title>javascript4.html</title> <script type="text/javascript"> function fun1() { var myform = document.getElementById("myform"); myform.submit(); } function fun2() { if(event.keyCode==13) { var myform = document.getElementById("myform"); myform.submit(); } } </script> </head> <body> <form action="welcome.html" id="myform"> 用户名：<input type="text"/><br/> 密码：<input type="password" onkeydown="fun2()"/><br/> <input type="button" value="提交" onclick="fun1()"/> </form> </body></html><html> <head> <title>welcome.html</title> </head> <body> <h1>欢迎登录！</h1> </body></html> 0 0
- javaScript基础
- JAVASCRIPT 基础
- JavaScript基础
- JAVASCRIPT基础
- JavaScript 基础
- javascript基础
- javascript基础
- JavaScript 基础
- JavaScript基础
- javascript基础
- JavaScript基础
- javascript基础
- javascript基础
- Javascript基础
- JavaScript基础
- JavaScript基础
- javascript基础
- javascript基础
- WCF服务编程-契约回调
- mina服务器、客户端
- 常用工具网站
- 正向渲染路径细节 Forward Rendering Path Details
- Redis集群
- JavaScript基础
- Juery 获得select的值
- JavaScript模板引擎原理，几行代码的事儿
- POJ 1833 排列（字典序全排列、next_permutation()、copy+流迭代器）
- oracle clob 最大存储
- 值得关注的Android6.0上的重要变化
- UVA 12338 Anti-Rhyme Pairs (字符串哈希+二分)
- Retrofit+RxJava 优雅的处理服务器返回异常、错误
- #include<algorithm>里的函数
