JavaScript(基础)
JavaScript 组成部分
第二章 JavaScript基本语法
第一节：JavaScript引入方式
内部(一般写在head 或者 body 里面)； 外部（注意JS文件的编码统一）；
第三节：JavaScript变量
JavaScript 是弱类型语言，统一用 var 来定义变量；
第四节：JavaScript基本数据类型
数值类型；字符串类型；布尔类型； Undefined(表示变量不含有值) Null(置空变量)
<html> <head> <meta charset="UTF-8"> <title>JavaScript基本数据类型</title> </head> <body> <script type="text/javascript"> var a=1; document.write("数值类型a="+a+"<br/>"); var b=1.2; document.write("数值类型b="+b+"<br/>"); var c='我是人'; document.write("字符串类型c="+c+"<br/>"); var d=false; document.write("布尔类型d="+d+"<br/>"); var e; // 表示变量不含有值 document.write("e="+e+"<br/>"); var f="你好"; document.write("f="+f+"<br/>"); f=null; // 变量置空 document.write("f="+f+"<br/>"); </script> </body> </html>
第五节：JavaScript运算符
1，算术运算符；
2，赋值运算符；
3，比较运算符；(=== 表示类型要用相同， ！== 也是要比较类型的)
4，逻辑运算符；
5，三目运算符；
5，字符串连接“+”
第六节：JavaScript选择与循环语句
1，if...else 语句；
2，switch 语句；
3，for 循环语句；
4，while/do..while 语句；
第七节：JavaScript函数
第八节：Break VS Continue
break 结束整个循环， continue 跳过当前一次循环。
第三章 JavaScript操作 DOM节点
第一节：JavaScript处理 DOM 事件
第二节：JavaScript操作 DOM 节点 (没有jQuery 简单)
1，JavaScript 修改 DOM 节点
2，JavaScript 添加 DOM 节点
3，JavaScript 删除 DOM 节点
<html> <head> <meta charset="UTF-8"> <title>JavaScript操作DOM节点</title> <script type="text/javascript"> function modifyDOM(){ document.getElementById("txt").innerHTML="用户名："; document.getElementById("userName").value="Jack"; } function addDOM(){ var para=document.createElement("p"); var node=document.createTextNode("...前..."); var para2=document.createElement("p"); var node2=document.createTextNode("...后..."); para.appendChild(node); para2.appendChild(node2); var parent=document.getElementById("parent"); var son1=document.getElementById("son1"); parent.insertBefore(para, son1); parent.appendChild(para2); } function removeDOM(){ var parent=document.getElementById("parent"); var son1=document.getElementById("son1"); parent.removeChild(son1); } </script> </head> <body> <div id="parent"> <div id="son1"> <font id="txt">:</font><input type="text" id="userName" name="userName"/> </div> </div> <input type="button" value="修改DOM节点" onclick="modifyDOM()"/> <input type="button" value="添加DOM节点" onclick="addDOM()"/> <input type="button" value="删除DOM节点" onclick="removeDOM()"/> </body> </html>
第三节：JavaScript修改 DOM 节点 CSS 样式
<title>JavaScript修改DOM节点CSS样式</title> <script type="text/javascript"> function modifyDOMCSS(){ document.getElementById("gril").style.color="red"; } </script> </head> <body> <p id="gril">女程序猿</p> <input type="button" value="修改DOM节点样式" onclick="modifyDOMCSS()"/> </body> </html>
第四章 JavaScript对象
第一节：JavaScript对象
1，JavaScript 对象定义
2，JavaScript 动态的添加属性和方法
3，JavaScript 动态的删除属性和方法
4，JavaScript 对象构造方法
<title>JavaScript对象</title> </head> <body> <script type="text/javascript"> /* function speak(something){ alert(something); } */ /* var p=new Object(); p.name="Jack"; // 动态的添加属性 p.func=speak; // 动态的添加方法 alert(p.name); p.func("Hello,Hello,大家好！"); */ // 动态的删除属性和方法 /* delete p.name; alert(p.name); delete p.func; p.func("Hello,Hello,大家好！"); */ /* p.name=undefined; p.func=undefined; alert(p.name); p.func("Hello,Hello,大家好！"); */ //构造方法,基于原型object.protetype function person(name,age){ this.name2=name; this.age2=age; function speak(something){ alert(something); } this.func=speak; } var p1=new person("Jack",12); alert(p1.name2); p1.func("Hello,EveryOne!"); </script> </body> </html>
第二节：JavaScript字符串对象
1，字符串对象实例化方法
2，字符串 length 属性
3，字符串 indexOf 方法 使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置
4，字符串 replace()方法 使用 replace() 方法在字符串中用某些字符替换另一些字符
<html> <head> <meta charset="UTF-8"> <title>JavaScript字符串对象</title> </head> <body> <script type="text/javascript"> var s1="实例化字符串方式一"; var s2=new String("实例化字符串abc方式二"); document.write(s1+"<br/>"); document.write(s2+"<br/>"); document.write(s2+" 的长度是："+s2.length+" <br/>"); document.write(s2.indexOf("abc", 0)+"<br/>"); document.write(s2.replace("abc", "java1234")+"<br/>"); </script> </body> </html>
第三节：JavaScript日期对象
1，日期对象实例化
2，getTime()方法，返回 1970 年 1 月 1 日至今的毫秒数。
3，getFullYear() 从 Date 对象以四位数字返回年份。
4，getMonth() 从 Date 对象返回月份 (0 ~ 11)。
5，getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
6，getHours() 返回 Date 对象的小时 (0 ~ 23)。
7，getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
8，getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
9，getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
<title>JavaScript日期对象</title> </head> <body> <script type="text/javascript"> var date=new Date(); document.write(date.getTime()+"<br/>"); document.write(date.getFullYear()+"<br/>"); document.write((date.getMonth()+1)+"<br/>"); document.write(date.getDate()+"<br/>"); var today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"; document.write(today+"<br/>"); document.write(date.getHours()+"<br/>"); document.write(date.getMinutes()+"<br/>"); document.write(date.getSeconds()+"<br/>"); today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); document.write(today+"<br/>"); var day=date.getDay(); var week; switch(day){ case 0:week="星期日";break; case 1:week="星期一";break; case 2:week="星期二";break; case 3:week="星期三";break; case 4:week="星期四";break; case 5:week="星期五";break; case 6:week="星期六";break; } document.write(week+"<br/>"); today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); document.write(today+"<br/>"); </script> </body> </html>
第四节：JavaScript数组
1，数组的声明；
2，数组的遍历；
3，数组元素排序 sort()方法；
4，数组元素组合成字符串 join()方法；
5，合并数组元素 concat()方法；
6，颠倒数组元素 reverse()方法；
<title>JavaScript数组</title> </head> <body> <script type="text/javascript"> var arr=new Array(); var arr2=new Array(3); arr[0]="jack"; arr[1]="marry"; arr[2]="tom"; arr[3]="lucy"; arr[4]="june"; arr2[0]=2; arr2[1]=1; arr2[2]=5; for(var i=0;i<arr.length;i++){ document.write(arr[i]+"<br/>"); } document.write("<hr/>"); var o; for(o in arr2){ document.write(o+" "+arr2[o]+"<br/>"); } document.write("<hr/>"); document.write("sort()"+arr.sort()+"<br/>"); document.write("sort()"+arr2.sort()+"<br/>"); document.write("<hr/>"); document.write("join()"+arr.join()+"<br/>"); document.write("join()"+arr2.join(".")+"<br/>"); document.write("<hr/>"); document.write("concat()"+arr.concat(arr2)+"<br/>"); document.write("<hr/>"); document.write("reverse()"+arr.reverse()+"<br/>"); </script> </body> </html>
第五章 JavaScript常用函数
第一节：JavaScript全局函数
全局函数不属于任何一个内置对象。
JS 包含以下 7 个全局函数， 用于一些常用的功能： escape(),eval(),isNan(),isFinite(),parseFloat(),parseInt(),unescape();
Eval()方法：执行代码；
参考手册： http://www.w3school.com.cn/jsref/index.asp
第二节：JavaScript window对象常用方法及事件
Alert();弹出消息框 confirm() prompt()
setTimeout()；执行一次
setinterval()；执行多次
open();打开窗口
Window.onload 发生在文档全部下载完毕的时候。
Window.onresize 发生在窗口大小发生变化的时候。
<title>JavaScript window对象常用方法及事件</title> <script type="text/javascript"> /* window.onload=function(){ alert("文档加载完毕了"); } */ function init(){ alert("文档加载完毕了"); } window.onresize=function(){ alert("窗体大小发生了变化！"); } </script> </head> <body onload="init()"> <script type="text/javascript"> window.alert("window对象的alert方法"); function dzt(){ alert("5秒后屌炸天"); } function setDateTime(){ var date=new Date(); var day=date.getDay(); var week; switch(day){ case 0:week="星期日";break; case 1:week="星期一";break; case 2:week="星期二";break; case 3:week="星期三";break; case 4:week="星期四";break; case 5:week="星期五";break; case 6:week="星期六";break; } var today=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); document.getElementById("today").innerHTML=today; } window.setTimeout("dzt()", 5000); window.setInterval("setDateTime()", 1000); window.open("http://www.java1234.com"); </script> <div id="today"></div> </body> </html>
浙公网安备 33010602011771号