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>