一.Javascript概述
什么是Javascript：
是一种网页的编程技术，实现页面的动态交互效果，是一种基于对象和事件驱动的解释性语言。
Javascript的作用：
常用于实现页面验证，动态显示等效果
Javascript的写法
方式一：直接定义在事件中
方式二：方法写在<head>里的<script>中
方式三：将代码写在单独的js文件中，在html页面的<head>里使用<script>引入
错误的查看：不同的浏览器下有不同的方式
Firefox：错误控制台
二.基础语法
---js特有的，与corejava不同的地方
标识符的规则：
变量名，方法名等，由字母，数字，下划线和$组成，不以数字开头，不能与关键字重名
变量：
以var关键字声明，声明的时候不确定类型，变量的类型以赋值为准
var x,y,y;
x = 10;
y = "mary";
z = true:
数据类型:
简单类型
String：一对单引号或者双引号，特殊字符需要转义
number：不区分整数和小数
boolean：true，false
数据类型之间的转换
隐式转换：直接转---默认的规则
显式转换：利用转换的方法
toString
parseInt()--能转
parseFloat()
isNaN()--判断文本是否转换为数值is not a number --数学计算---NaN---not a number
使用方法查询数据类型
typeof ()--返回数据类型
特殊类型
null
underfined
运算符：
算术，逻辑，关系等。。
==：比较的值
===：严格相等，比较值和类型
表达式？value1：value2；
流程控制：
程序默认情况下顺序执行，改变或者控制执行顺序
条件
if/else
swich/case
循环
for
while
三.常用内置对象：
1.js中的对象：
内置对象，浏览器对象，DOM对象等内置对象
简单内置对象：
string，number，boolean
组合对象：
Array，Date，Math
复杂对象：
Function,RegExp
2.String对象
创建
var s = "mary"
var s = new String("mary");
属性
length
方法
toLowerCase/toUpperCase
indexOf/lastIndexOf
substring(start,,end)
charAt/charCodeAt
replace(旧的，新的）
split() a,b,c
String对象有几个方法可以结合正则表达式使用
replace("js","*");
match---得到匹配的结果
search---得到匹配的位置
正则表达式：
纯文本的表达式，表示某种匹配模式\d或者[a-z]{3,5}
在不同的语言环境下，执行或者使用正则表达式，实现文本的各种处理
匹配模式：
g---global,全局
m---multilin,多行
i---忽略大小写
3.Array对象
--一列多个数据
只有数组没有集合
创建方式：
方式一：var arr=["mary",10,true];
方式二：var arr = new Array("mary",10,true);
方式三：var arr = new Array();
arr[0] = "mary";
arr[1] = 10;
arr[2] = true;
alert(arr[3]);--undefined
数组的属性：
length
数组的方法：
xxx.toString()---输出数组的内容，形如10，20，30
xxx.join("*")---10*20*30
xxx.concat---数组的相加
xxx.slice(start,end)--截取
xxx.reverse()--反转
xxx.sort()--排序，默认按照字符串排序
4.Math对象
---数学计算相关的
不需要创建，直接使用var data = Math.Pi;
数学常数，比如pi
计算方法
Math.random();---0=<x<1 小数
Math.floor();--地板
Math.ceil();--天花板
5.Number对象：
toString:数值转换为字符串
toFixed:数值转换为字符串，并保留小数点后一定位数
6.正则表达式对象 :
js中，正则表达式的应用分为两类：
一类：和String对象的三个方法结合使用，实现对string的操作--replace/match/search
二类：正则表达式对象
var r = /\d{{6}/;r是一个对象
r.test(string)---true/false
适用于输入验证：邮编\d{6}
7.Date对象:
创建对象
var d = new Date();//当前日期和时间
var d = new Date("2018/8/30/20:20:20");
方法
getXXX
getDay/getDate/getMonth/getFullYear/....
setXXX
setDay/setDate/...
toXXX--得到字符串格式的表示 ，
页面显示
toString
toDateString
toTimeString
toLocaleTimeString
//js代码
function secondMethod(){
alert("function in js file");
}
//计算录入数值的平方
function getSquare(){
//得到录入的文本
var s = document.getElementById("txtNumber").value;
//判断
if(isNaN(s)){
alert("录入错误！");
}else{
//转换为数值类型
var data = parseInt(s);
//计算平方
alert(data*data);
}
}
//计算从1累加到20的和：实验js中循环的写法
function getSum(){
var data = 0;
for(var i=0;i<=20;i++)
{
data += i;
}
alert(data);
}
//使用String对象的方法，将所有js都替换为*
function replaceString(){
//得到文本
var s = document.getElementById("txtString").value;
//判断s中是否还有js ajsbjs
/*
//循环的方式实现
var index = s.indexOf("js");
while(index>-1){
s = s.replace("js","*");//a*bjs
index = s.indexOf("js");//a*b*
}*/
//用正则表达式实现：js中的正则表达式写在两个/中间
//s = s.replace(/js/gi,"*");
//将录入的所有的数字替换为*
s = s.replace(/\d+/g,"*");
document.getElementById("txtString").value = s;
}
function operateArray(type){
//得到文本
var s = document.getElementById("txtArray").value;
//拆分为数组
var array = s.split(",");
//根据类型做操作
switch(type){
case 1:
array.reverse();
break;
case 2:
array.sort();
break;
case 3:
array.sort(sortFunc);//将方法对象作为参数传入
break;
}
//显示
alert(array.join("|"));
}
//排序的比较方法
function sortFunc(a,b){
return a-b;
//降序return b-a;
}
//随机数
function getRandom(){
//1--34之间
var min = 1;
var max = 34;
var seed = Math.random();
var n = Math.floor(seed*(max-min)+min);
alert(n);
}
//输入验证
function valiData(){
var s = document.getElementById("txtName").value;
//验证：3到5位的小写字母
//var reg = /^[a-z]{3,5}$/;
//3个汉字
var reg = /^[\u4e00-\u9fa5]{3}$/;
if(reg.test(s))
alert("正确");
else
alert("请重新录入");
}
<html>
<head>
<script language="javascript" type="text/javascript">
/*代码---浏览器用哪种语言规则解释？？---依靠默认设置*/
//封装--方法
function firstMethod(){
alert("hello java");
alert("\u4e00");
alert("\u9fa5");
}
</script>
<script language="javascript" src="Myscript.js"></script>
</head>
<body>
<form>
<input type="button" value="第一个按钮" onclick="alert('hello world');" />
<br />
<input type="button" value="第二个按钮" onclick="firstMethod();" />
<br />
<input type="button" value="第三个按钮" onclick="secondMethod();" />
<br />
<input type="text" id="txtNumber" />
<br />
<input type="button" value="计算平方" onclick="getSquare();" />
<br />
<input type="button" value="计算累加到20的和" onclick="getSum();" />
<br />
文本框，录入文本，录入完毕（失去焦点），将文本框中的js替换为*--模拟过滤敏感字符
<input type="text" id="txtString" onblur="replaceString();" />
<br />
文本框，录入逗号隔开的数值：
<input type="text" value="1,23,4,100,76" id="txtArray" />
<input type="button" value="反转" onclick="operateArray(1);" />
<input type="button" value="排序(按照字符串）" onclick="operateArray(2);" />
<input type="button" value="排序（按照数字）" onclick="operateArray(3);" />
<br />
<input type="button" value="随机数" onclick="getRandom()" />
<br />
输入验证：<input type="text" onblur="valiData();" id="txtName" />
</form>
</body>
</html>
8.Function对象
a.js中，没有传统意义上的重载（方法名称相同，但是参数不同）
如果方法名称相同，则以最后一次定义的为准---js中如果需要实现类似于重载的效果，使用arguments：代表当前方法被传入的所有的参数，形成一个数组。
b.js中，如何创建一个方法
方式一：使用function关键字明文的声明一个方法
function test(a,b) {alert(a+b);} ---最常用，用于功能相关的方法
方式二：创建一个Function对象，最后一个参数是方法体，前面的其他参数是方法的参数
var f = new Function("a","b","alert(a+b);");
f(10,20);//30
---需求：有些方法不需要显示的存在，只是为其他方法里所使用
---缺陷：方法体不能复杂
方式三：匿名方法
var f = function(a,b){alert(a+b);} f(11,22);
9.全局函数
某个对象的方法
自定义的方法
全局函数：
并非特定于某个对象，比如
parseInt/parseFloat
isNaN
encodeURI/decodeURI：实现对uri的编码和解码
eval:计算表达式或者执行语句
四.应用：
DHTML--动态效果，比如浏览器信息，屏幕信息等
1.将整个窗口均实现对象化，
结构如下
window
document--html文档
screen
history
location
event
navigator
2.window对象：
父对象
打开对话框窗口：
window.alert("ss");
window.confirm();
window.prompt();
打开新窗口：
window.open(url);//重复打开
window.open(url,name);//命名以避免重复打开
window.open(url,name,config);//设置窗口的外观，如高和宽等。
周期性定时器：
setInterval(func,time);
clearInterval
一次性定时器：
setTimeout(func,time);
clearTimeout
3.document对象：
整个html文档，操作文档中的任何内容，通过document---将整个html文档作为一颗节点树（树形结构）---DOM
a)找到目标节点
方式一：精确查找（与位置无关）：document.getElementById(idValue)--返回元素对象
方式二：根据上下层次关系
xxx.parentNode/firstChild/lastChild/childNodes
方式三：根据元素的名称找（在某个节点的所有后代里查找某种类型的元素）
xxx.getElementsByTagName
如：
document.getElementsByTagName("a")
tableObj>getElementsByTagName("td");
b)读取或者修改节点信息
规则一：将html标签对象化
aObj代表的是一个<a href="">元素</a>
只能aObj.href，而不能aObj.value或者aObj.src
简单属性：.value/src
<input type="text" value="mary" />
<img src="" />
复杂属性：.style.color/fontSize
<p style="color:red;"></p>
规则二：元素标签中间的内容--innerHTML
规则三：修改样式
xxx.className = "";
规则四：得到某个元素对象，其类型未知xxx.nodeName--当未知节点类型时，使用该属性获得节点的名称，全大写方式
if(xxx.nodeName == "IMG") xxx.src = " " ;
写死在页面上：display：none;
div.style.display = "block";
div.style.display = "none";
c)增加新节点
第一步：创建一个新元素
document.createElement("a/input/option")
第二步：为新元素设置相关的数据
第三步：新节点加入树上--新元素加入文档--作为树上某个节点的子节点存在
xxx.appendChild(newNode);//追加
xxx.insertBefore(newNode,oldNode);
d)删除节点：
父节点删除子节点
假如希望删除节点xxx
xxx.parentNode.removeChild(xxx);
4.HTML DOM:
对DOM操作进行了封装，实现代码的简化
浏览器兼容性：
W3C,各浏览器特殊的地方
table对象：
用HTML DOM的方式操作表格
table.insertRow(index);---返回row对象
row.insertCell(index)
createElement
.innerHTML
append
var obj = new Option("text","value");
selObj.options[i] = obj;
删除所有的option--循环
selObj.options.length = 0;
<html>
<head>
<script language="javascript" src="MyScript1.js"></script>
<style>
h2.style1{
border-top:1px solid red;
border-right:2px solid blue;
}
span.success{
color:green;
border:1px solid black;
}
span.fail{
color:red;
border:1px solid red;
}
</style>
</head>
<body>
<form>
模拟实现方法的重载：
<input type="button" value="重载" onclick="testMethod(10,60);" />
<br />
<input type="button" value="实现数组的按照数值的排序 (Function和匿名函数)" onclick="testFunction();" />
<br />
<input type="button" value="实现全局函数" onclick="test1();" />
<br />
<input type="button" value="1" onclick="calculater(1);" />
<input type="button" value="2" onclick="calculater(2);" />
<input type="button" value="3" onclick="calculater(3);" />
<input type="button" value="+" onclick="calculater('+');" />
<input type="button" value="-" onclick="calculater('-');" />
<input type="button" value="=" onclick="calculater('=');" />
<br />
<input type="text" id="txtNumber" />
<br />
<input type="button" value="delete" onclick="testConfirm();" />
<br />
<input type="text" id="txtTime" />
<input type="button" value="启动时钟" onclick="startClock();" />
<input type="button" value="停止时钟" onclick="stopClock();" />
<br />
<input type="button" value="5s后将弹出一个hello" onclick="wait();" />
如果想取消请点击
<a href="javascript:cancelAlert();">这里</a>
<br />
<br />
<input type="button" value="实验操作" onclick="testDocument();" />
<select id="sel1">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
<option>ddd</option>
</select>
<h2>h2标记文本</h2>
<p id="p1">段落文本</p>
<img id="img1" src="b.jpg" />
<br />
Name:<input type="text" id="txtName" onblur="validName();" />
<span id="nameInfo">3-5个小写字母</span>
<br />
Age:<input type="text" id="txtAge" onblur="validAge();" />
<span id="ageInfo">2位数字</span>
<br />
<input type="submit" value="保存" onclick="return valiDatas();" />
<br />
<h2>购物车</h2>
<table border="1" id="shoppingCart">
<tr>
<td>价格</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>10.00</td>
<td>
<input type="button" value="-" onclick="sub(this);" />
<input type="text" value="1" />
<input type="button" value="+" onclick="add(this);" />
</td>
<td>20.00</td>
</tr>
<tr>
<td>20.00</td>
<td>
<input type="button" value="-" onclick="sub(this);" />
<input type="text" value="1" />
<input type="button" value="+" onclick="add(this);" />
</td>
<td>30.00</td>
</tr>
<tr>
<td>20.00</td>
<td>
<input type="button" value="-" onclick="sub(this);" />
<input type="text" value="1" />
<input type="button" value="+" onclick="add(this);" />
</td>
<td>30.00</td>
</tr>
</table>
总计：<span id="spanTotal">60.00</span>
</form>
</body>
</html>//模拟一个方法的重载：一个参数计算平方；两个参数算和
function testMethod() {
if(arguments.length == 1){
var data = arguments[0];
data = parseInt(data);
alert(data * data);
}
else if(arguments.length == 2){
alert(arguments[0] + arguments[1]);
}
}
function testFunction(){
var array = [12,3,45,9];
//方式1：使用Function对象
var f = new Function("a","b","return a-b;");
array.sort(f);
//方式2：使用匿名函数
// var f = function(a,b){return a-b;};
// array.sort(f);
alert(array.toString());//3,9,12,45
}
function test1(){
var s= "http://sss.jsp?name=张三&code=李四";
var r = encodeURI(s);
alert(r);
var s1 = "1+2+3";
alert(s1)
var s2 = eval(s1);
alert(s2)
}
//简单计算器
function calculater(s){
//如果单击的是=，计算；否则，拼接
if(s == "="){
var s1 = document.getElementById("txtNumber").value;
var r = eval(s1);
document.getElementById("txtNumber").value = r;
}else{
document.getElementById("txtNumber").value += s;
}
}
function testConfirm(){
// var r = window.confirm("Are you really...");
// alert(r);
// window.prompt("请输入ID： ");
window.open("https://blog.csdn.net/qq_38826019","name","width=666,height=666");
}
function showTime(){
//将当前时间显示在一个文本框中
var t = new Date();
document.getElementById("txtTime").value = t.toLocaleTimeString();
}
var timer;
//启动时钟
function startClock(){
timer = window.setInterval(showTime,1000);
}
//停止时钟
function stopClock(){
window.clearInterval(timer);
}
//5s后弹出hello
var timer1;
function wait(){
timer1 = window.setTimeout("alert('hello');",5000);
}
function cancelAlert(){
window.clearTimeout(timer1);
}
//实验document的操作
function testDocument(){
// 知道选择列表有多少个选项
var obj = document.getElementById("sel1");
alert(obj.getElementsByTagName("option").length);
// 只统计option的个数，而不是所有子节点的个数
var count = 0;
for(var i=0;i<obj.childNodes.length;i++)
{
if(obj.childNodes[i].nodeName == "OPTION")
count++;
}
alert(count);
//修改图片的显示
var imgObj = document.getElementById("img1");
imgObj.src = "b.jpg";
// 修改段落：字体颜色，背景色，字体大小，段落文本
var pObj = document.getElementById("p1");
pObj.style.color = "red";
pObj.style.backgroundColor = "silver";
pObj.style.fontSize = "25";
pObj.innerHTML = "new text";
//修改某元素的样式：样式复杂
// document.getElementById("h2").className = "style1";
alert(imgObj.nodeName);
}
//验证用户名
function validName(){
//得到录入的用户名
var name = document.getElementById("txtName").value;
//验证
var r = /^[a-z]{3,5}$/;
//根据验证结果显示不同的样式
if(r.test(name))
document.getElementById("nameInfo").className = "success";
else
document.getElementById("nameInfo").className = "fail";
//添加返回
return t.test(name);
}
//验证年龄：两位数字
function validAge(){
var age = document.getElementById("txtAge").value;
var r = /^\d{2}$/;
if(r.test(age))
document.getElementById("ageInfo").className = "success";
else
document.getElementById("ageInfo").className = "fail";
//添加返回
return t.test(age);
}
//验证所有的数据
function valiDatas(){
//验证name和age,return true或者false
var r1 = validName();
var r2 = validAge();
return r1&&r2;
}
//增加购物数量
function add(btnObj){
//得到td
var tdObj = btnObj.parentNode;
//得到td的所有子元素，找到那个文本框
for(var i=0;i<tdObj.childNodes.length;i++)
{
var childNode = tdObj.childNodes[i];
if(childNode.nodeName == "INPUT" &&
childNode.type == "text")
{
//得到旧数据，操作，并显示
var data = parseInt(childNode.value);
data++;
childNode.value = data;
}
}
calTotal();
}
//增加购物数量
function sub(btnObj){
//得到当前按钮所在的td
var tdObj = btnObj.parentNode;
//得到td的所有子元素，找到那个文本框
for(var i=0;i<tdObj.childNodes.length;i++)
{
var childNode = tdObj.childNodes[i];
if(childNode.nodeName == "INPUT" &&
childNode.type == "text")
{
//得到旧数据，操作，并显示
var data = parseInt(childNode.value);
if(data >=0){
data--;
childNode.value = data;
}
}
}
calTotal();
}
//计算小计和总计
function calTotal(){
//得到表格的所有的行
var tableObj = document.getElementById("shoppingCart");
var rows = tableObj.getElementsByTagName("tr");
//循环从第二行开始
var total = 0;
for(var i=1;i<rows.length;i++){
var curRow = rows[i];
//得到第一格中的价格
var price = curRow.getElementsByTagName("td")[0].innerHTML;
//得到第二格中的第二个input的value--数量
var q = curRow.getElementsByTagName("td")[1].getElementsByTagName("input")[1].value;
//算完，写入第三格
var sum = parseFloat(price) * parseFloat(q);
curRow.getElementsByTagName("td")[2].innerHTML = sum.toFixed(2);
//总计
total += sum;
}
document.getElementById("spanTotal").innerHTML = total.toFixed(2);
}
<html>
<head>
<script language="javascript" src="MyScript2.js"></script>
</head>
<body>
<form id="form1">
<input type="button" value="添加新节点" onclick="addNewNode();" />
<br />
<select id="sel1" onchange="showCities();">
<option>请选择</option>
<option>北京</option>
<option>河北</option>
</select>
<select id="sel2">
<option>请选择</option>
</select>
<br />
<input type="button" value="增加" onclick="modiTable();" />
<table id="t1" border="1">
</table>
</form>
</body>
</html>//添加新节点
function addNewNode(){
var formObj = document.getElementById("form1");
//form添加一个文本框
var obj = document.createElement("input");
obj.value = "mary";
formObj.appendChild(obj);
//form最后添加一个超级链接<a href="tts3">click me</a>
var aObj = document.createElement("a");
aObj.href = "https://blog.csdn.net/qq_38826019";
aObj.innerHTML = "click me";
formObj.appendChild(aObj);
//在原有按钮的前面加入一个按钮，文本是new button,单击后弹出hello
var btnObj = document.createElement("input");
btnObj.type = "button";
btnObj.value = "new button";
btnObj.onclick = function(){
alert("Hello");
};//function方法
formObj.insertBefore(btnObj,formObj.firstChild);
}
//设计一个二维数组，存储城市数据
var array = new Array();
array[0] = ["请选择"];
array[1] = ["海淀","朝阳","西城","东城"];
array[2] = ["石家庄","邢台","保定"];
//根据省显示城市
function showCities(){
//得到第一个选择框的选中的选项的索引
var i = document.getElementById("sel1").selectedIndex;
//先删除第二个选择框中原有的元素
var selObj = document.getElementById("sel2");
while(selObj.childNodes.length>0){
selObj.removeChild(selObj.firstChild);
}
//根据索引找到城市数据
var cities = array[i];
//循环城市数据，创建option元素，文本写入
for(var index=0;index<cities.length;index++){
var newNode = document.createElement("option");
newNode.innerHTML = cities[index];
document.getElementById("sel2").appendChild(newNode);
}
}
//使用HTML DOM的方式实现省市菜单的例子
function showCities(){
//得到第一个选择框的选中的选项的索引
var i = document.getElementById("sel1").selectedIndex;
//删除原有的选项
var selObj = document.getElementById("sel2");
selObj.options.length = 0;
//根据索引找到城市数据
var cities = array[i];
//循环城市数据，创建option元素，文本写入
for(var index = 0;index<cities.length;index++){
var newNode = new Option(cities[index]);
selObj.add(newNode);
}
}
//为表格添加一行：两个单元格
function modiTable(){
var table = document.getElementById("t1");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.innerHTML = "age";
var cell2 = row.insertCell(1);
cell2.innerHTML = "23";
}5.screen
---封装了屏幕相关的信息，供读取
var n = screen.width;//ok
scrreen.width = 1000;//error
6.history
---封装了历史访问记录
history.back();
history.forward();
history.go(n);
7.location
---地址栏
location.href = "url";
location.replace("url");
window.open---打开新的窗口或者页签
location.href---在当前窗口中打开，保留历史访问记录
location.replace()---在当前窗口中打开，不保留历史访问记录
8.event
a)事件的类别
鼠标事件
onclick/ondblclick/onmouseover/onmouse
键盘事件
onkeydown/onkeyup
状态改变事件
onblur/onfocus/onchange/onload(body里）/onsubmit(form里)
b)事件可以被取消
onXXX = "return false;"--取消某事件
c)定义事件
<标签里 onxxx="代码"---静态，写在html代码
obj.onclick=funciton;
获得event对象
firefox：只能在html页面获得，而不能在js中其他浏览器：既可以在js中，也可以在html中获得
获得引发事件的对象
firefox：target
其他浏览器：srcElement
兼顾兼容问题：在html上使用event关键字获得事件对象，传入js代码里，使用target||srcElement得到引发事件的对象
五，面向对象基础
封装，继承，多态
定义一个对象（包含数据和行为）
方式一：使用Object---简单的封装，不方便重用
var s = new Object();
s.name = "mary";
s.age = 18;
s.sing = function(){alert("hello");};
alert(s.name);
alert(s.age);
s.sing();
方式二：自定义对象的模板---可重用的 封装建议使用
function Student(n1,a1)
{
this.name = n1;
this.age = a1;
this.introduceSelf = function(){
alert("I am" + this.name +",I am " + this.age + " years old");
}
}
方式三：使用JSON的方式封装，常用于数据交换
//添加新节点
function addNewNode(){
var formObj = document.getElementById("form1");
//form添加一个文本框
var obj = document.createElement("input");
obj.value = "mary";
formObj.appendChild(obj);
//form最后添加一个超级链接<a href="tts3">click me</a>
var aObj = document.createElement("a");
aObj.href = "https://blog.csdn.net/qq_38826019";
aObj.innerHTML = "click me";
formObj.appendChild(aObj);
//在原有按钮的前面加入一个按钮，文本是new button,单击后弹出hello
var btnObj = document.createElement("input");
btnObj.type = "button";
btnObj.value = "new button";
btnObj.onclick = function(){
alert("Hello");
};//function方法
formObj.insertBefore(btnObj,formObj.firstChild);
}
//设计一个二维数组，存储城市数据
var array = new Array();
array[0] = ["请选择"];
array[1] = ["海淀","朝阳","西城","东城"];
array[2] = ["石家庄","邢台","保定"];
//根据省显示城市
function showCities(){
//得到第一个选择框的选中的选项的索引
var i = document.getElementById("sel1").selectedIndex;
//先删除第二个选择框中原有的元素
var selObj = document.getElementById("sel2");
while(selObj.childNodes.length>0){
selObj.removeChild(selObj.firstChild);
}
//根据索引找到城市数据
var cities = array[i];
//循环城市数据，创建option元素，文本写入
for(var index=0;index<cities.length;index++){
var newNode = document.createElement("option");
newNode.innerHTML = cities[index];
document.getElementById("sel2").appendChild(newNode);
}
}
//使用HTML DOM的方式实现省市菜单的例子
function showCities(){
//得到第一个选择框的选中的选项的索引
var i = document.getElementById("sel1").selectedIndex;
//删除原有的选项
var selObj = document.getElementById("sel2");
selObj.options.length = 0;
//根据索引找到城市数据
var cities = array[i];
//循环城市数据，创建option元素，文本写入
for(var index = 0;index<cities.length;index++){
var newNode = new Option(cities[index]);
selObj.add(newNode);
}
}
//为表格添加一行：两个单元格
function modiTable(){
var table = document.getElementById("t1");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.innerHTML = "age";
var cell2 = row.insertCell(1);
cell2.innerHTML = "23";
}
function testHistory(){
history.back();
alert(history.length);
}
function testLocation(){
// location.href = "https://blog.csdn.net/qq_38826019";
location.replace("https://blog.csdn.net/qq_38826019");
}
//location.href等同于location["href"]
//遍历navigator对象的所有属性
function testNavigator(){
var s = "";
for(var p in navigator)//p代表对象中的每一个属性
{
s += p+":"+navigator[p]+"\n";
}
alert(s);
}
function testEvent(){
alert(event.srcElement.nodeName);
}
//改进简单计算器
function cal(e){
//获得被单击的对象
var obj = e.target || e.srcElement;
//判断：只有单击的是<input type="button"
if(obj.nodeName=="INPUT" && obj.type == "button")
{
//=按钮，eval;其他按钮，拼接
if(obj.value == "="){
var s = document.getElementById("txtNumber").value;
var data = eval(s);
document.getElementById("txtNumber").value = data;
}
}
}
//实验使用Object创建对象以实现封装
function testObject(){
//创建对象，封装数据和行为
var s = new Object();
s.name = "mary";
s.age = 18;
s.sing = function(){alert("hello");};//匿名方法
//测试
alert(s.name);
alert(s.age);
s.sing();
}
//定义一个对象的模板：Student
function Student(n1,a1)
{
this.name = n1;
this.age = a1;
this.introduceSelf = function(){
alert("I am" + this.name +",I am " + this.age + " years old");
};
}
//测试自定义的Student对象
function testOwnObject(){
var p1 = new Student("mary",18);
var p2 = new Student('john",20);
alert(p1.name);//mary
alert(p2.age);//20
p1.introduceSelf();
p2.introduceSelf();
}
function testJSON(){
var s = {
"name":"mary",
"age":18,
"isGraduated":true}
};
alert(s.name);
alert(s.age);
}<html>
<head>
<script language="javascript" src="MyScript2.js"></script>
</head>
<body>
<form id="form1">
<input type="button" value="添加新节点" onclick="addNewNode();" />
<br />
<select id="sel1" onchange="showCities();">
<option>请选择</option>
<option>北京</option>
<option>河北</option>
</select>
<select id="sel2">
<option>请选择</option>
</select>
<br />
<input type="button" value="增加" onclick="modiTable();" />
<table id="t1" border="1">
</table>
<input type="button" value="使用history" onclick="testHistory();" />
<input type="button" value="使用location" onclick="testLocation();" />
<input type="button" value="遍历navigator的所有属性" onclick="testNavigator();" />
<!-- <br /> -->
<!-- <div style="width:100px;height:100px;border:1px solid red;" onclick="testEvent();"> -->
<!-- <p onclick="alert('2');" style="border:1px solid green;"> p text <input type="button" value="1" onclick="alert('1');"/> </p> -->
<!-- </div> -->
<!-- <br /> -->
实现简单计算器，使用event简化代码：
<div style="border:1px solid red;" onclick="cal(event);">
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
<input type="button" value="+" />
<input type="button" value="-" />
<input type="button" value="=" />
<br />
<input type="text" id="txtNumber" />
</div>
<input type="button" value="测试使用 object创建对象" onclick = "testObject();"/>
<input type="button" value="测试自定义对象" onclick="testOwnObject();"/>
</form>
</body>
</html>