javascript初学者入门小例子

整理之前自己学javascript时写的练手小例子发出来，以便偶尔来回顾一下

1、显示当前时间信息

function getTime() {
var now = new Date();
var outStr = "time is : " + now;
outStr += "<br/>年:" + now.getFullYear();
//0~11, 0表示1月
outStr += "<br/>月:" + now.getMonth();
outStr += "<br/>日：" + now.getDate();
outStr += "<br/>星期：" + now.getDay();
outStr += "<br/>小时："  + now.getHours();
outStr += "<br/>分钟："  + now.getMinutes();
outStr += "<br/>秒："  + now.getSeconds();
//alert(outStr);
//document代表body里的内容，通过id得到time的div
document.getElementById("time").innerHTML = "<p>" + outStr + "</p>";
}

2、参数解析，遍历数组

function testDataType(){

//isNaN方法判断参数是否是非数值型
var boo = isNaN(3);//false
document.write("3 is word? : " + boo +"<br/>");
boo = isNaN(3.14);//false
document.write("3.14 is word? : " + boo +"<br/>");
boo = isNaN("string");//true
document.write("string is word? : " + boo +"<br/>");

//parseFloat解析字符串返回第一个浮点数
document.write(parseFloat("21.4") +"<br/>");//21.4
document.write(parseFloat("87 abc") +"<br/>");//87
document.write(parseFloat("the 123") +"<br/>");//NaN
//parseInt解析字符串返回第一个整数，第二个参数指定进制数
document.write(parseInt(18.95, 10) +"<br/>"); //18
document.write(parseInt("12px", 10) +"<br/>"); //12
document.write(parseInt("1110", 2) +"<br/>")//14,返回二进制整数型
document.write(parseInt("hello") +"<br/>"); //NaN

//数组
var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var message = "";
//遍历数组
for(var i in days){
message += 'Day ' + i + ' is ' + days[i] + '<br/>';
}
message += '<br/>';

//遍历数组2
var array = [0,1,2,3,4,5,6,7,8,9];
var length = array.length;
for (var i=0; i < length; i++) {
   message += array[i] + '-';
}
message += '<br/>';

// 遍历数组3，最快
//var array = [0,1,2,3,4,5,6,7,8,9];
// for 循环
for (var i = array.length; i--;) {
   message += array[i] + '-';
}
message += '<br/>';

// 最快且优雅的代码,等价于遍历3
var array = [0,1,2,3,4,5,6,7,8,9];
// while 循环
var i = array.length;
while (i--) {
   message += array[i] + "-";
}

document.write(message);
}

3、javascript对象，OOP

function testOOP(){
//创建一个对象
//方法1,普通赋值方法
objectOne = new Object();
objectOne.info = "i am one";
objectOne.showInfo = function(){
alert(this.info);
}
//方法2，构造方法
function ObjectTwo(){
this.info = "i am two";
this.showInfo = function (){
alert(this.info);
}
}
var objectTwo = new ObjectTwo();

//方法3, 使用JSON
var objectThree = {
"info" : "i am three",
"showInfo": function (){
alert(this.info);
}
}
//调用三个对象的方法
objectOne.showInfo();
objectTwo.showInfo();
objectThree.showInfo();

//使用prototype扩展对象
ObjectTwo.prototype.setInfo = function (info){
this.info = info;
}

objectTwo.setInfo("changed two");
objectTwo.showInfo();

//使用prototype继承对象
function Dog () {
this.name = "dog";
this.showName = function (){
alert("i am dog");
}
}
//继承ObjectTwo
Dog.prototype = new ObjectTwo();
var myDog = new Dog();
myDog.showName();

myDog.showInfo();
myDog.setInfo("i am changed dog");
myDog.showInfo();

//封装属性和方法
function Box(width, length, height){
//此处的属性和方法没有用this引用，所以属性name和方法volume是私有的，外部不准访问
name = "box";
function volume(a, b, c){
return a*b*c;
}
this.boxVolume = volume(width, length, height);
}
var b = new Box(10, 12, 15);
//alert(b.volume(10, 12, 15));//报错，因为方法是私有的
//只有这样才能访问volume
alert(b.boxVolume);

}

4、使用JSON

function testJSON(){
var user = '{"username" : "root", "password" : "1234"}';
var myObject = eval('(' + user + ')');//eval能执行任意的javascript代码，可能会导致不安全因素
alert(myObject.username);
alert(myObject["password"]);

//用parse直接解析字符串生成JSON对象
var myObject2 = JSON.parse(user);
alert(myObject2.username);
//JSON对象序列化成一组字符串
alert(JSON.stringify(myObject2));

}

5、javascript时间机制

//当页面载入的时候
window.onload = function(){
//为按钮添加响应onclick方法
//document.getElementById("add").onclick = testEvent2;
//document.getElementById("cancel").onclick = testEvent2;
document.getElementById("add").onclick = testEvent3;
document.getElementById("cancel").onclick = testEvent3;
}

//添加事件
//方法1，在标签中使用内联事件处理器，例<input type="button" onClick="submit()">
//步骤略

//方法2，document.getElementById("submit").onClick = function(){...}，添加事件，设为null，取消事件
function testEvent2(){
//跨游览器获取event，事件对象
if(!e) var e = window.event;
//跨游览器获取发出事件的对象
var element = (e.target) ? e.target : e.srcElement;

if(element.id == "add")
document.getElementById("submit").onclick = clickButton;
else if(element.id == "cancel")
document.getElementById("submit").onclick = null;
}

//方法3，使用addEventListener为element添加事件，removeEventListener取消事件
function testEvent3(e){
//跨游览器获取event，事件对象
if(!e) var e = window.event;
//跨游览器获取发出事件的对象
var element = (e.target) ? e.target : e.srcElement;

var button = document.getElementById("submit");
var eventType = 'click';

if(element.id == "add")
addEventHandler(button, eventType,clickButton);
else if(element.id == "cancel")
removeEventHandler(button, eventType,clickButton);

}

//事件处理方法
function clickButton(e){
var text = document.getElementById("text");
if(text.value == "" || text.value == null){
alert("name not be null");
}else{
alert(text.value);
}
}
//跨游览器添加事件的方法
function addEventHandler(element, eventType, handlerFunction){
if(element.addEventListener){
//W3C
element.addEventListener(eventType, handlerFunction, false);
}else if(element.attachEvent){
//IE
element.addEventListener('on'+eventType, handlerFunction);
}
}
//跨游览器取消事件的方法
function removeEventHandler(element, eventType, handlerFunction){
if(element.removeEventListener){
//W3C
element.removeEventListener(eventType, handlerFunction, false);
}else if(element.detachEvent){
//IE
element.detachEvent('on'+eventType, handlerFunction);
}
}

6、操作DOM节点

function node(){
var ol = document.getElementById("toDoList");
//得到ol内的子节点
var list = ol.childNodes;
var count = 0;
for(var i=0; i < list.length; i++){
//nodeTpye==1，代表元素节点
if(list[i].nodeType == 1) count++;
}
alert("this list has " + count + " lines");
//getElementsByTagName，根据标签返回一个数组
var list2 = ol.getElementsByTagName("li");
alert("this list has " + list2.length + " lines");

//firstChild, lastChild,访问子节点列表第一个和最后一个
//麻烦的方法：var last = ol.childNodes[ol.childNodes.length - 1];
var last = ol.lastChild;
var first = ol.firstChild;

//nextSibling, previousSibling前一个和后一个兄弟节点
var mid = last.previousSibling;
var mid2 = first.nextSibling;
//nodeValue保存节点里的值
alert(mid.nodeValue == mid2.nodeValue);//true

var text = "";
for(var i=0; i < list.length; i++){
//nodeTpye==3，代表文本节点 包括空白
if(list[i].nodeType == 3) text += list[i].nodeValue;
}
alert(text);

//创建一个div
var newDiv = document.createElement("div");
//创建一个文本节点
var newTextNode = document.createTextNode("this is new TextNode");
//将文本节点添加到div里，作为div的子节点
newDiv.appendChild(newTextNode);
//克隆一个newDiv节点，布尔值参数表示是否复制所有子节点
var cloneDiv = newDiv.cloneNode(true);
//选择一个节点，把新的节点插入到它前面
cloneDiv.insertBefore(document.createTextNode("this is pre Text"), cloneDiv.firstChild);
alert(cloneDiv.childNodes[0].nodeValue + "\n" + cloneDiv.childNodes[1].nodeValue);
//删除一个子节点
cloneDiv.removeChild(cloneDiv.lastChild);
//用一个新节点代替旧节点
cloneDiv.replaceChild(document.createTextNode("replaced"), cloneDiv.firstChild);
alert(cloneDiv.childNodes[0].nodeValue);


//设置标签属性
ol.setAttribute("title", "new Title");

//动态添加javascript文件
var script = document.createElement("script");
script.setAttribute("src", "newScript.js");
document.head.appendChild(script);

}

7、修改标签的CSS效果

<style type="text/css">
body{
background-color: black;
color: yellow;
font: italic bold 24px "Times New Roman", serif;
padding: 20px;
}
</style>
<style type="text/css">
body{
background-color: white;
color: red;
font: normal 24px arial, helvetica, sans-serif;
padding: 20px;
}
</style>
<script type="text/javascript">
//直接修改节点内的style属性
function toggle(){
var span = document.getElementById("span");
if(span.style.backgroundColor == 'red'){
span.style.backgroundColor = 'yellow';
span.style.color = 'red';
}else if(span.style.backgroundColor == 'yellow'){
span.style.backgroundColor = 'blue';
span.style.color = 'yellow';
}else{
span.style.backgroundColor = 'red';
span.style.color = 'white';
}
}

//在<style>标签中定义.class，按照class类别修改节点的style
function toggleClass(){
var div = document.getElementById("div");
if(div.className == "classA"){
div.className = "classB";
}else{
div.className = "classA";
}
}

var sheet = 0;
document.styleSheets[1].disabled = true;
//定义style，根据stylesheets属性数组来选择style
function toggleStyleSheets(){
document.styleSheets[sheet].disabled = true;
sheet = (sheet == 1)? 0 : 1;
document.styleSheets[sheet].disabled = false;
}

var auto1;
var auto2;
var auto3;
var boo = 0;
function startAuto(){
//为0时表示停止，为1时表示开始
boo = (boo == 1)? 0 : 1;
if(boo){
//setInterval表示开始循环执行某方法，第二个参数表示间隔毫秒数，返回一个循环对象
//setTimeout只是在规定某个时间后，执行一次方法,setInterval表示循环反复执行
auto1 = setInterval("toggle()", 1000);
auto2 = setInterval("toggleClass()", 1000);
auto3 = setInterval("toggleStyleSheets()", 1000);
}else{
//clearInterval用来清除循环对象
clearInterval(auto1);
clearInterval(auto2);
clearInterval(auto3);
}

}

window.onload = function(){
document.getElementById("b").onclick = toggle;
document.getElementById("b2").onclick = toggleClass;
document.getElementById("b3").onclick = toggleStyleSheets;
document.getElementById("b4").onclick = startAuto;
}
</script>
<style type="text/css">
.classA{
width: 180px;
border:3px solid black;
background-color: white;
color: red;
font: normal 24px arial, helvetica, sans-serif;
padding: 20px;

}
.classB{
width: 180px;
border:3px dotted white;
background-color: black;
color: yellow;
font: italic bold 24px "Times New Roman", serif;
padding: 20px;

}
</style>