JavaScript
JavaScript的基本结构
<script type="text/javascript"> <!-- JavaScript语句; --> </script>
JavaScript的应用(输出第一个helloworld)
<!DOCTYPE html> <html> <head> <title>第一个JavaScript</title> <meta charset="utf-8"> <script type="text/javascript"> document.write("<h1>Hello World.</h1>") </script> </head> <body> </body> </html>
需要知道的是：<script>...</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可。
页面引入JavaScript（三种方式）
1.使用<script></script>
<script type="text/javascript"> alert("欢迎您"); </script>
2.使用外部JavaScript文件
<script type="text/javascript" src="hello.js"></script>
3.在HTML中直接使用JavaScript
<input type="button" name="btn" value="弹出消息框" onclick="javascript:alert('欢迎您');"/>
变量
方式一：在JavaScript中，先声明变量再赋值。例如：var width; width=5;在这里，var是用于声明变量的关键字，width是变量名
方式二：同时声明和赋值变量。例如：var catName="皮皮"; var x,y,z=10;
方式三：不声明直接赋值。例如：width=5；
总结：变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用。
数据类型
undifined
例：var width; 变量width没有初始值，将被赋予值undefined
null
表示一个空值，与undefined相等
Number
例：var iNum=23; //整数 var iNum=23.4;//浮点数
boolean
true和false
string
一组被引号（单引号或双引号）括起来的文本。例：var string1="This is a string";
typeof运算符
typeof检测变量的返回值
type运算符返回值如下：
1.undefined：变量被声明后，但未被赋值
2.string：用单引号或双引号来声明的字符串
3.boolean：true或false
4.number：整数或者浮点数
5.object：JavaScript中的对象、数组、和null
运算符号
算术运算符：+ - * / % ++ --
赋值运算符：=
比较运算符：> < >= <= == !=
逻辑运算符：&& || ！
JavaScript的逻辑控制语句
if...else条件语句
switch多分支语句
for循环语句
while循环语句
使用break进行循环中断
注释
单行注释以//开始，以行末结束。
多行注释以/*开始，以*/开始，符号/*......*/指示中间的语句是该程序中的注释。
常用的输入输出
1.alert()
alert("欢迎您");
2.prompt()
prompt("提示信息","输入框的默认信息");
prompt("请输入姓名","张三");
语法约定
1.代码区分大小写
1.1 javascript的关键字，例如for和if，永远都是小写
1.2 内置对象，例如Math和Date是以大写字母开头
1.3 DOM对象的名称通常是小写，但是方法名采用驼峰命名法
2.变量、对象和函数的名称
1名称可以包含大小写英文字母，数字，下划线，和美元符号
JavaScript和java的区别
变量声明：java需要制定数据类型，JavaScript是弱变量，使用var声明
数据类型：数据类型不同，JavaScript使用number
运算符：相同
条件结构：相同
循环结构：java的foreach循环用于遍历集合元素，格式为for(变量：集合){...}。而JavaScript格式为：for(变量 in 对象){...}，用于遍历数组或对象的属性
JavaScript函数
函数的含义：类似于java中的方法，是完成特定任务的代码语句块。使用更简单，不用定义属于某个类，直接使用
函数的分类：系统函数，自定义函数（有参函数、无参函数、参数的调用）
常用的系统函数
parseInt()：将字符串转换为整型数字，例如：parseInt("86")将字符串"86"转换为整型值86
parseFloat()：将字符串转换为浮点型，如：parseFloat（“23.33”）将字符串转换为浮点值23.33
isNaN()：判断非数组，如var str=isNaN("123");将返回false
eval()：计算表达式的值，例如，eval("2+2);返回5
自定义函数
创建函数：
无参函数：
function name(){
//javascript代码;
}
有参函数：
function name(参数1,参数2,参数3,...){
//javascript代码;
}
调用函数
方法一：函数调用一般和表单元素的时间一起使用，例：
事件名=函数名()
例：
oncllick="函数名()";
方法二：直接使用函数名（传递的实参值）例如：
var result=add(2,3);
程序调试
1.alert方法
2.IE开发人员工具：单步进入、单步跳过、单步退出
BOM（浏览器对象模型）
1.BOM是Browser Object Model的缩写，简称浏览器对象模型
2.BOM提供了独立于内容而与浏览器窗口进行交互的对象
3.由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是Windows
4.BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
Window对象
Window对象是BOM的顶层（核心）对象，所有对象都是通过它延伸出来的，也可以成为window的子对象
由于window对象表示当前窗口对象，是一个全局对象。JavaScript中的任何一个全局函数或变量都是window的属性
window对象的常用属性
screen：有关客户端的屏幕和显示性能的信息
history：有关客户访问过的url的信息
location：记录当前URL的信息
prompt：显示可提示用户输入的对话框
alert：显示带有一个提示信息和一个确定按钮的警示框
confirm：显示一个带有提示信息、确定和取消按钮的对话框
close ：关闭浏览器窗口
open：打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout：在指定毫秒数后调用函数或计算表达式
setInterval：按照指定的周期（以毫秒计）来调用函数或表达式
关闭浏览器窗口：
function close1(){
window.close();
}
打开一个新的窗口：
function openWindow(){
window.open("http://www.google.com",'','width=1200px,height=400px, menubar=1;');
}
JavaScript的Date可以用来获取系统时间（完整实例）：
<!DOCTYPE html> <html> <head> <title>time</title> <meta charset="utf-8"> </head> <body> <!-- 显示系统时间--> <div id="timeDiv">显示系统时间</div> <script type="text/javascript"> //获得年月日，时分秒 function shijian(){ var date=new Date(); //获得年份 var year=date.getFullYear(); //获得月份 var month=date.getMonth()+1; //获得日子 var day=date.getDate(); //获得小时 var hour=date.getHours(); //获得分钟 var min=date.getMinutes(); //获得秒 var sec=date.getSeconds(); var time=year+"年"+month+"月"+day+"日 "+hour+":"+min+":"+sec; //获得DIV对象 var div=document.getElementById("timeDiv"); //div调用属性 div.innerHTML=time; } shijian(); </script> </body> </html>
运行效果为：
2018年4月16日 19:52:56
innerHTML与innerText的区别:
div.innerHTML="<h1>aaaaaa</h1>"//可以解析<h1>标签
div.innerText="<h1>aaaaaa</h1>"//当成字符串
JavaScript在网页中动态显示时间
可通过
window.setInterval('displayTime()',1000);
每隔1s调用一次displayTime()方法，达到时间动态显示的效果
方法的递归调用
setTimeout('displayTime()',1000);
通过setTimeout方法，1s调用一次本方法，自己调用自己成为方法的递归
操纵HTML属性
<!DOCTYPE html> <html> <head> <title>操纵属性</title> </head> <body> <span id="my_span">span的内容</span> <div> 看书<input type="checkbox" name="love" value="看书"> 写字<input type="checkbox" name="love" value="写字"> 上网<input type="checkbox" name="love" value="上网"> </div> <p>11</p> <p>11</p> <p>11</p> <p>11</p> </body> </html> <script type="text/javascript"> //dom对象获得标签 var sp=document.getElementById("my_span"); sp.innerText="hahah";//更改值 sp.style.backgroundColor="blue";//背景颜色 //得到对象数组 var cks=document.getElementsByName("love"); //cks[0].value 通过下标取值 //cks.item(0).value document.write(cks.length+" "+cks[0].value+" "+cks.item(0).value); //通过标签名称得到对象数组 var biaoqian=document.getElementsByTagName("p"); document.write(biaoqian); </script>
JavaScript循环获取属性，改变属性值，达到全选与取消全选的操作：
<!DOCTYPE html> <html> <head> <title></title> </head> <body> 全选 <input type="checkbox" id="all" onchange="sel()"> <br/> <input type="checkbox" id="all" name="hobby">11 <input type="checkbox" id="all" name="hobby">22 <input type="checkbox" id="all" name="hobby">33 <input type="checkbox" id="all" name="hobby">44 <input type="checkbox" id="all" name="hobby">55 <input type="checkbox" id="all" name="hobby">66 </body> </html> <script type="text/javascript"> function sel(){ var all=document.getElementById("all"); //获得5个复选框对象 var cks=document.getElementsByName("hobby"); //复选框被选中返回true var result=all.checked; if(result==true){ //循环cks数组 for (var i = 0; i<cks.length; i++) { //全部选中 cks.item(i).checked=true; } }else{ //全不选 //循环cks数组 for (var i = 0; i<=cks.length; i++) { //全不选 cks.item(i).checked=false; } } } </script>
JavaScript实现表单的删除、新增、改变标题操作
<!DOCTYPE html> <html> <head> <title>JS实现功能</title> <meta charset="utf-8"> <style type="text/css"> .title{ font-size: 30px; background-color: #cccccc; } </style> </head> <body> <div style="float: left;"> <table border="2px" cellspacing="0" cellpadding="0" width="400px" height="100px" id="mt"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <th>小黄</th> <th>40</th> </tr> <tr> <th>小邱</th> <th>64</th> </tr> <tr> <th>小董</th> <th>40</th> </tr> </table> </div> <div> <button onclick="add()">添加一行</button> <button onclick="del()">删除一行</button> <button onclick="update()">修改标题</button> </div> </body> </html> <!--添加JS代码--> <script type="text/javascript"> //获得表格对象 var table=document.getElementById("mt"); //添加一行操作 function add(){ //添加一行 var newTr=table.insertRow(); //设置内容居中 newTr.align="center"; //背景颜色 //newTr.style.backgroundColor='blue'; newTr.style.fontWeight='bold'; //添加单元格td var td1=newTr.insertCell(); var td2=newTr.insertCell(); //给单元格添加内容 td1.innerText="小黑"; td2.innerText=22; } //删除一行操作 function del(){ //获得表格的行数 var len=table.rows.length; //删除行(每次删除最后一行) table.deleteRow(len-1); } //修改标题 function update(){ //修改表格中的第一行 var fisrtRow=table.rows[0];//tr fisrtRow.className='title'; } </script>
JavaScript横向菜单，达到移动到菜单位置改变其背景颜色
<!DOCTYPE html> <html> <head> <title>横向菜单</title> <meta charset="utf-8"> <style type="text/css"> ul li{ list-style: none; float: left; margin: 20px; color: #FFFFFF; width: 80px; height: 30px; background-color: #cccccc; text-align: center; font-weight: bold; font-size: 18px; } </style> </head> <body> <ul> <li>首页</li> <li>电视剧</li> <li>电影</li> <li>综艺</li> <li>公开课</li> </ul> </body> </html> <script type="text/javascript"> //返回所有li标签对象 var lis=document.getElementsByTagName("li"); //得到每一个li对象 for (var i = 0; i < lis.length; i++) { //鼠标放上触发一个时间onmouseover lis.item(i).onmouseover=function(){ //给每个li添加一个背景颜色 this.style.backgroundColor='red'; } //光标移开 lis.item(i).onmouseout=function(){ //给每个li添加一个背景颜色 this.style.backgroundColor='#cccccc'; } } </script>
下拉列表框对象，实现省市级联列表
<!DOCTYPE html> <html> <head> <title>下拉列表框对象</title> <meta charset="utf-8"> <style type="text/css"> select{ width: 300px; height: 30px; font-size: 16px; } </style> </head> <body> <!--下拉列表--> <select id="pro" onclick="getCity()"> <option value="河北">河北</option> <option value="河南">河南</option> <option value="广西">广西</option> <option value="山东">山东</option> </select> <!--城市列表--> <select id="city"></select> </body> </html> <script type="text/javascript"> //获得省的对象 var pro=document.getElementById("pro"); //城市列表对象 var city=document.getElementById("city"); //获得具体的城市信息 function getCity(){ //得到具体省的信息 var proValue=pro.value; city.options.length=0; if ('河南'==proValue) { //向城市下拉列表中添加信息 city.add(new Option('郑州市','郑州')); city.add(new Option('商丘市','商丘')); city.add(new Option('信阳市','信阳')); city.add(new Option('周口市','周口')); }else if('河北'==proValue){ //向城市下拉列表中添加信息 city.add(new Option('石家庄市','石家庄')); city.add(new Option('保定市','保定')); city.add(new Option('张家口市','张家口')); city.add(new Option('秦皇岛市','秦皇岛')); }else if('广西'==proValue){ //向城市下拉列表中添加信息 city.add(new Option('百色市','百色')); city.add(new Option('桂林市','桂林')); city.add(new Option('玉林市','玉林')); }else if('山东'==proValue){ city.add(new Option('济南市','济南')); city.add(new Option('青岛市','青岛')); city.add(new Option('潍坊市','潍坊')); city.add(new Option('烟台市','烟台')); } } </script>
数组
取值：
alert(arr[0]+arr[1]+arr[2]);
排序：
arr.sort(); for (var i = 0; i <arr.length; i++) { document.write(arr[i]); }
添加分隔符：
var a=arr.join("/"); for (var i = 0; i <a.length; i++) { document.write(a[i]); }
复杂的省市级联列表
<!DOCTYPE html> <html> <head> <title>复杂省市级联</title> </head> <body> <!--省的下拉列表--> <select id="pro" onchange="getCity()"> <option>请选择省</option> </select> <!--城市的下拉列表--> <select id="city"></select> </body> </html> <script type="text/javascript"> var cityList = new Array(); cityList['河北省'] = ['邯郸市','石家庄市','秦皇岛市','张家口市','天津市']; cityList['河南省'] = ['郑州市','洛阳市','商丘市','新郑市','焦作市','周口市']; cityList['湖北省'] = ['武汉市','宜昌市','恩施市','孝感市','十堰市']; //初始化省份信息 window.onload=initPro;//initPro这个名字是随便起的 function initPro(){ //获得省的对象 var pro=document.getElementById("pro"); //cityList数组中的文字下标 for(var i in cityList){ //添加下拉列表项 pro.add(new Option(i,i)); } } //获得城市信息 function getCity() { //获得所选省份的名称 var proName=document.getElementById("pro").value; //获得城市下拉列表对象 var city=document.getElementById("city"); //重置城市的下拉列表 city.options.length=0; for(var i in cityList){ //判断文字下标时候和选择的proName一致 if (i==proName) { //添加对应省份的城市信息 for(var j in cityList[i]){ city.add(new Option(cityList[i][j],cityList[i][j])) } } } } </script>
需求：制作使用prompt()函数在页面中弹出提示，根据用户输入的周一到周日的不同，弹出不同的信息提示框：
<!DOCTYPE html> <html> <head> <title>prompt</title> <meta charset="utf-8"> </head> <body> <script type="text/javascript"> var zhuangtai=prompt("请输入今天是周几"); if(zhuangtai=="周一"){ alert("新的一周开始了！") }else if(zhuangtai=="周二"){ alert("周二啦，加油！") }else if(zhuangtai=="周三"){ alert("周三啦，过去一半了！") }else if(zhuangtai=="周四"){ alert("周四啦，坚持住!") }else if(zhuangtai=="周五"){ alert("周五，放假倒计时~") }else if(zhuangtai=="周六"||zhuangtai=="周日"){ alert("周末啦，睡觉吧！") }else if(zhuangtai==null||zhuangtai==""){ alert("好懒，都不输入.") } </script> </body> </html>
需求：使用Date对象获取当前的日期和时间，根据不同时间显示不同的问候语。
<!DOCTYPE html> <html> <head> <title>获取时间</title> <meta charset="utf-8"> </head> <body> <h1 id="hello"></h1> <hr> <p id="year"></p> <p id="day"></p> </body> </html> <script type="text/javascript"> function datemsg(){ var myDate=new Date(); var Y=myDate.getFullYear(); var M=myDate.getUTCMonth()+1; var D=myDate.getDate(); var H=myDate.getHours(); var T=myDate.getUTCMinutes(); var S=myDate.getUTCSeconds(); var msg=document.getElementById("year"); msg.innerHTML="今天日期："+Y+"年"+M+"月"+D+"日"+"<br/>"; msg=document.getElementById("day"); msg.innerHTML="现在时间："+H+":"+T+":"+S; msg=document.getElementById("hello");{ if(H>=0&&H<=12){ msg.innerHTML="上午好，欢迎来到贵美"; }else{ msg.innerHTML="下午好，欢迎来到贵美"; } } //方法的递归调用 setTimeout('datemsg()',1000); } datemsg(); </script>