JavaScript介紹
JavaScript 是運行在瀏覽器端的腳步語言,JavaScript 主要解決的是前端與用戶交互的問題,包括使用交互與數據交互。 JavaScript 是瀏覽器解釋執行的,前端腳本語言還有JScript(微軟,IE 獨有),ActionScript(Adobe公司,需要插件)等。
前端三大塊
1、HTML:頁面結構
2、CSS:頁面表現:元素大小、顏色、位置、隱藏或顯示、部分動畫效果
3、JavaScript:頁面行爲:部分動畫效果、頁面與用戶的交互、頁面功能
JavaScript嵌入頁面的方式
1、行間事件(主要用於事件)
<input type="button" name="" οnclick="alert('Hello World!');">
2、頁面script標籤嵌入
<script type="text/javascript">
var a = 'Hello World!';
alert(a);
</script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
JavaScript 語句與註釋與斷點調試
1、一條 javascript 語句應該以“;”結尾
<script type="text/javascript">
var a = 123;
var b = 'str';
function fn(){
alert(a);
};
fn();
</script>
2、javascript註釋
<script type="text/javascript">
// 單行註釋
var a = 123;
/*
多行註釋
1、...
2、...
*/
var b = 'str';
</script>
3、斷點調試
藉助谷歌和火狐等瀏覽器進行斷點調試
變量
1、JavaScript 是一種弱類型語言
javascript 的變量類型由它的值來決定。 定義變量需要用關鍵字 var
var a = 123;
var b = 'asd';
//同時定義多個變量可以用","隔開,公用一個‘var’關鍵字
var c = 45,d='qwe',f='68';
2、變量類型
5種基本數據類型:
number、string、boolean、undefined、null
1種複合類型:
object
3、變量、函數、屬性、函數參數命名規範
1、區分大小寫
2、第一個字符必須是字母、下劃線(_)或者美元符號($)
3、其他字符可以是字母、下劃線、美元符或數字
獲取元素方法
可以使用內置對象 document
上的 getElementById
方法來獲取頁面上設置了 id 屬性的元素,獲取到的是一個 html 對象,然後將它賦值給一個變量,比如:
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">這是一個div元素</div>
上面的語句,如果把 javascript 寫在元素的上面,就會出錯,因爲頁面上從上往下加載執行的,javascript 去頁面上獲取元素 div1 的時候,元素 div1 還沒有加載,解決方法有兩種:
第一種方法:將 javascript 放到頁面最下邊
....
<div id="div1">這是一個div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>
第二種方法:將javascript語句放到window.onload觸發的函數裏面,獲取元素的語句會在頁面加載完後才執行,就不會出錯了。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">這是一個div元素</div>
操作元素屬性
獲取的頁面元素,就可以對頁面元素的屬性進行操作,屬性的操作包括屬性的讀和寫。
操作屬性的方法
1、“.” 操作
2、“[ ]”操作
屬性寫法
1、 html 的屬性和 js 裏面屬性寫法一樣
2、“class” 屬性寫成 “className”
3、“style” 屬性裏面的屬性,有橫槓的改成駝峯式,比如:“font-size”,改成”style.fontSize”
通過“.”操作屬性:
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 讀取屬性值
var val = oInput.value;
var typ = oInput.type;
var nam = oInput.name;
var links = oA.href;
// 寫(設置)屬性
oA.style.color = 'red';
oA.style.fontSize = val;
}
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.baidu.com" id="link1">百度</a>
通過“[ ]”操作屬性:
<script type="text/javascript">
window.onload = function(){
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oA = document.getElementById('link1');
// 讀取屬性
var val1 = oInput1.value;
var val2 = oInput2.value;
// 寫(設置)屬性
// oA.style.val1 = val2; 沒反應
oA.style[val1] = val2;
}
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.baidu.com" id="link1"></a>
innerHTML
innerHTML可以讀取或者寫入標籤包裹的內容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//讀取
var txt = oDiv.innerHTML;
alert(txt);
//寫入
oDiv.innerHTML = '<a href="http://www.baidu.com">百度<a/>';
}
</script>
......
<div id="div1">這是一個div元素</div>