js筆記一
.腳本可位於 HTML 的 <body> 或 <head> 部分中，或者同時存在於兩個部分中，也可以把腳本保存到外部文件中
<script src="myScript.js"></script>
.JavaScript 可以通過不同的方式來輸出數據：
使用 window.alert() 彈出警告框。
使用 document.write() 方法將內容寫到 HTML 文檔中。
使用 innerHTML 寫入到 HTML 元素。
使用 console.log() 寫入到瀏覽器的控制臺。
.JavaScript 對大小寫是敏感的。
.可以在文本字符串中使用反斜杠對代碼行進行換行
.對象定義
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
var person = {
firstName : "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
.在 HTML 中, 全局變量是 window 對象: 所有數據變量都屬於 window 對象。
.以下是 HTML 事件的實例：
HTML 頁面完成加載
HTML input 字段改變時
HTML 按鈕被點擊
<button onclick=‘getElementById("demo").innerHTML=Date()‘>現在的時間是??</button>
<button onclick="this.innerHTML=Date()">現在的時間是?</button>
.常見的HTML事件
下面是一些常見的HTML事件的列表:
事件 描述
onchange HTML 元素改變
onclick 用戶點擊 HTML 元素
onmouseover 用戶在一個HTML元素上移動鼠標
onmouseout 用戶從一個HTML元素上移開鼠標
onkeydown 用戶按下鍵盤按鍵
onload 瀏覽器已完成頁面的加載
.For/In 循環---JavaScript for/in 語句循環遍歷對象的屬性：
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
.constructor 屬性
constructor 屬性返回所有 JavaScript 變量的構造函數。
實例
"John".constructor // 返回函數 String() { [native code] }
(3.14).constructor // 返回函數 Number() { [native code] }
false.constructor // 返回函數 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函數 Array() { [native code] }
{name:‘John‘, age:34}.constructor // 返回函數 Object() { [native code] }
new Date().constructor // 返回函數 Date() { [native code] }
function () {}.constructor // 返回函數 Function(){ [native code] }
.typeof 操作符
你可以使用 typeof 操作符來查看 JavaScript 變量的數據類型。
實例
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:‘John‘, age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 沒有聲明)
typeof null // 返回 object
.使用 constructor 屬性來查看對象是否為數組 (包含字符串 "Array"):
實例
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
.將數字轉換為字符串
全局方法 String() 可以將數字轉換為字符串。
該方法可用於任何類型的數字，字母，變量，表達式：
實例
String(x) // 將變量 x 轉換為字符串並返回
String(123) // 將數字 123 轉換為字符串並返回
String(100 + 23) // 將數字表達式轉換為字符串並返回
Number 方法 toString() 也是有同樣的效果。
實例
x.toString()
(123).toString()
(100 + 23).toString()
eg1:
document.getElementById("demo").innerHTML=Date();
eg2:
document.write("<h1>這是一個標題</h1>");
eg3:
alert(‘歡迎!‘)
eg4:
function changeImage()
{
element=document.getElementById(‘myimage‘)
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改變樣式
}
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是數字");
}
}
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
document.getElementById("demo1").innerHTML = "不加括號輸出函數表達式：" + person.fullName;
document.getElementById("demo2").innerHTML = "加括號輸出函數執行結果：" +
person.fullName();
eg5:
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
eg6:
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
js筆記一