js

js

js的引入方式
1.

<script type="text/javascript">
	<!--內容-->
</script>

2.

先在外面創建一個文件(文件名.js)
然後在裏面寫內容,如:
	alert("JavaScript大爺,你好");
	document.write("JavaScript大爺,你好啊");
然後在html中引入:
	<script type="text/javascript" src="文件名.js"></script>
即可引入

注1:正常js都是寫在head頭或者body裏
彈窗

<script type="text/javascript">
	alert("JavaScript大爺,你好");
</script>

在這裏插入圖片描述

向網頁中寫文檔

<script type="text/javascript">
	document.write("JavaScript大爺,你好啊");
</script>

在這裏插入圖片描述
注2:js中註釋和Java中一樣
注3:js是弱類型的語言,直接用var可以定義所有變量
注4:Undefined表示變量不含有值,null表示置空變量
注5:js的算術運算符和Java一樣,不過變量是弱類型的,
例:

var a=1;
var b='1';
a==b;		//爲真
但:
a===b		//爲假(js增加的比較,要求類型要相同(!==))

方法

function method1(/*可以傳參數*/){	//參數無需定義類型
//方法體
}

function method1(/*可以傳參數*/){
//方法體
return result;	//直接返回即可
}

DOM節點

js處理DOM事件:
<head>
<script type="text/javascript">
	function function1(){
		alert("點我幹嘛");
	}
</script> 
</head>
<body >
<input type="button" value="點我" onclick="function1()" />
</body>
關於DOM節點:
<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("這是p裏的數據,在上");
		para.appendChild(node);
		var paraent=document.getElementById("paraent");
		var son1=document.getElementById("son1");
		paraent.insertBefore(para,son1);
		
		var para2=document.createElement("p");
		var node2=document.createTextNode("這是p裏的數據,在下");
		para2.appendChild(node2);
		paraent.appendChild(para2);
		
	}
	
	function removeDOM(){
		var paraent=document.getElementById("paraent");
		var son1=document.getElementById("son1");
		paraent.removeChild(son1);
	}

</script>
	 
</head>
<body >
<div id="paraent">
	<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()" />
修改DOM節點CSS樣式
<head>
<script type="text/javascript">
	function modifyDOMCSS(){
		document.getElementById("chenxu").style.color="red";
	}
</script>
</head>
<body>
<p id="chenxu" >程序員</p>
<input type="button" value="修改DOM節點CSS" onclick="modifyDOMCSS()" />
</body>

js對象

<script type="text/javascript">
	function speak(str){
		alert(str);
	}

	var p = new Object();	//定義js對象
	alert(p);
	
	p.name="jack";		//動態添加屬性
	alert(p.name);
	
	p.func=speak;		//動態添加方法
	p.func("HelloWord!");
	
	delete p.name;		//刪除屬性
	alert(p.name);
	delete p.func;		//刪除方法
	alert(p.func);
	
	//或者直接賦undefined
	p.name = undefined;
	p.func = undefined;
	
	//js對象構造方法
	function person(name2,age2){
		this.name2 = name2;
		this.age2 = age2;
		
		//可以在方法裏構造
		function speak(str){
			alert(str);
		}
		this.func2=speak;
	}
	var p2 = new person("jack2",23);
	alert(p2.name2);
	p2.func2("hello,everyone");
	
</script>

js字符串實例化方法

<script type="text/javascript">
	var s1="實例化方法一"
	var s2=new String("實例化方法二");
	document.write(s1 + "<br/>");
	document.write(s2 + "<br/>");
	document.write("s2的長度是" + s2.length + "<br/>");	//返回字符串長度
	document.write(s2.indexOf("方法",0) + "<br/>")		//返回字符串所在位置,從零開始
	document.write(s2.replace("方法","fangfa") + "<br/>")	//替換字符串
</script>

js日期對象

<script type="text/javascript">
	/*
	getTime()方法,返回 1970 年 1 月 1 日至今的毫秒數。 
	getFullYear() 從 Date 對象以四位數字返回年份。 
	getMonth() 從 Date 對象返回月份 (0~11)。 
	getDate() 從 Date 對象返回一個月中的某一天 (1~31)。 
	getHours() 返回 Date 對象的小時 (0~23)。
	getMinutes() 返回 Date 對象的分鐘 (0~59)。 
	getSeconds() 返回 Date 對象的秒數 (0~59)。 
	getDay() 從 Date 對象返回一週中的某一天 (0~6)。
	 */
	 
	var date = new Date();
	document.write("從1970年到現在的毫秒數爲:" + date.getTime() + "<br/>");
</script>

js數組

/* 
 數組元素排序 sort()方法; 
數組元素組合成字符串 join()方法; 
合併數組元素 concat()方法; 
顛倒數組元素 reverse()方法;
*/

JavaScript 全局函數

/*
全局函數不屬於任何一個內置對象。
JS 包含以下 7 個全局函數,用於一些常用的功能
escape(),eval(),isNan(),isFinite(),parseFloat(),parseInt(),unescape(); 
Eval()方法:執行代碼*/

js對象常用方法及事件

/*
Alert();彈出消息框 			confirm() prompt() 
setTimeout();執行一次 
setinterval();執行多次 
open();打開窗口Window.onload 發生在文檔全部下載完畢的時候。 
Window.onresize 發生在窗口大小發生變化的時候
*/

<script type="text/javascript">
	window.alert("window對象的alert方法");
	function dzt(){
		alert("5秒後執行的")
	}
	window.setTimeout("dzt()",5000);
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章