知識點預習
1、js基本使用2、js變數定義及型別
3、js函式定義及預解析
4、js獲取標籤
5、js讀寫標籤屬性

00-JavaScript簡介
JavaScript是執行在瀏覽器端的腳步語言，JavaScript主要解決的是前端與使用者互動的問題，包括使用互動與資料互動。 JavaScript是瀏覽器解釋執行的，前端指令碼語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，需要外掛)等。
前端三大塊:

1、HTML：頁面結構2、CSS：頁面表現：元素大小、顏色、位置、隱藏或顯示、部分動畫效果 3、JavaScript：頁面行為：部分動畫效果、頁面與使用者的互動、頁面功能

01-js的三中書寫方式
行內式
嵌入式
外鏈式

注意點：如果一個 script標籤 連結了一個 js檔案, 這個script 就不能再做其他事情

02-變數的定義
變數可以單個定義，也可以一次定義多個，但要用逗號隔開

//1.定義一個
var iNumber = 100;
//2.定義多個
var iOne = 200,sTwo = "abc",iThree = 300;

變數的型別
基本資料型別

數字型別 int float
字串 string
布林型別 true false
未定義 undefined 變數未賦值就是undefined
空型別 null
複合型別 object

var oObj = {
    name:"張三",
    age:16,
}
 

typeof 獲取物件型別

04-變數和函式的命名規範
1、嚴格區分大小寫2、 首字元 : 字母 下劃線(_) $ 3、除了首字元之外的其他字元: 數字 字母 下劃線 $
匈牙利命名風格：

物件o Object 比如：oDiv陣列a Array 比如：aItems 字串s String 比如：sUserName 整數i Integer 比如：iItemCount 布林值b Boolean 比如：bIsComplete 浮點數f Float 比如：fPrice 函式fn Function 比如：fnHandler 正則表示式re RegExp 比如：reEmailCheck

05-js的語句和註釋
每條語句 結尾以 英文的分號結尾
變數 屬性 函式 名稱儘量見名知意
單行註釋

win系統:        ctrl + /
Mac系統: command + /

多行註釋

win系統:  alt + shift + a
mac系統: option + shift + a

06-js函式的定義
無引數的函式

function fnTest() {
    alert('hello');
}

// 函式呼叫/執行
fnTest();
有引數的函式

function fnResult(a,b) {
    return a + b;
}
var result = fnResult(1,2);

return關鍵字的作用:

1.返回函式中的值或物件
2.結束函式的執行

07-函式的預解析
變數的預解析:

如果前面先使用變數,後面寫變數的宣告,此時變數值為undefined

函式的預解析:

如果前面先寫執行,後面寫函式定義,系統會在執行的 檢查程式碼,能正常呼叫

08-條件語句
"==" js中會預設轉換資料型別,將資料型別轉換成統一型別後再比較"===" 不會轉換資料型別,如果型別不一樣就是不相等了 "&&" 一假則假,只要有一個條件不成立那就不成立
"||" 一真則真,只要有一個條件成立那就為真
"!" 取反 真變假 假變真

if (條件1) {

} else if (條件2){

} else {

}
-獲取元素標籤

//1.等window 視窗載入完畢的時候 才能獲取到標籤 
window.onload = function () {
// 1.1獲取id為div1的 標籤
var oDiv = document.getElementById("div1");
//驗證
alert(oDiv);
讀寫元素標籤的屬性
js中使用css樣式屬性是，把屬性中間的 - 去掉 後面的單詞首字母大寫

通過 點語法去讀寫屬性
class屬性在js中要寫成 className
css中的background-color 在js中要寫成 backgroundColor

屬性的值是什麼型別，可以把游標放在屬性上 看提示

11-標籤包裹的內容

• innerHTML 修改標籤中的內容
  匿名函式
  如果此函式只用一次,而且還是觸發事件後才執行的函式就可以簡化為匿名函式'沒有名字的函式'

單獨的匿名函式 報錯
匿名函式必須要賦值給變數或屬性
onclick 監聽按鈕點選事件，當按鈕點選時呼叫方法

13-網頁換膚案例

<link rel="stylesheet" href="./css/skin01.css" id="link01">
   <script>
       window.onload = function () {
           var oLink = document.getElementById('link01'),
           oBtn01 = document.getElementById('btn01'),
           oBtn02 = document.getElementById('btn02');

           oBtn01.onclick = function () {
           // 修改link標籤的href屬性
               oLink.href = 'css/skin01.css';
           }

           oBtn02.onclick = function () {
               oLink.href = 'css/skin02.css';
           }
       }
   </script>

列印名片

if (oInput01.value == '' || oInput02.value == '' || oInput03.value == '' || oInput04.value == '' || oInput05.value == '' || oInput06.value == '') {
    alert("請輸入內容!");
    return;
}

// 更換class來修改樣式

var sClassName = 'idcard0' + (parseInt(oInput07.value) + 1); oCard_wrap.className = sClassName;