標籤：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事件的列表:
事件描述
onchangeHTML 元素改變
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筆記一
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
