Javascript 作用 
 1.  網頁特效 
 
   2. 用戶交互
 
  3. 表單驗證
 
Js  就是可以用來控制   結構  和 樣式 。  
 
1.2     體驗js  
   認識常用的三個輸出語句。  都屬於 js 內置對象 。 
 大家買手機，手機裏面有麽有裝好一些軟件。 
 
提供我們直接使用的功能就是 內置對象功能。
1.2.1    Alert()  彈出警示框
完整的寫法  :  window.alert(“執行語句”);
Window 對象  窗口    一般情況是可以省略的。 
Alert(“123”);
1.2.2    Console 控制臺輸出
 一般用於 測試用。   
  
Console    
使用代碼    作用
Console.log()    控制臺輸出  普通輸出語句
Console.warn()     控制臺警示
Console.error();    錯誤提示
 
1.2.3    document.write()  文檔打印輸出
document   文檔對象  它不可以省略    
Alert()  非常少。   用戶體驗      
Console  用戶看不見 
document.write() 直接在文檔中顯示。
1.3    熟悉js 用途
我們js 的主要目的 ，  控制 web標準中的前兩種。  
結構
樣式
行為
Js 怎麽來控制樣式和結構呢？
  我們班級有130人，我想要提問某個同學問題。 我應該怎麽做？
   首先我應該 點名字 找到這個同學。 他才能回答問題。
Js 怎麽來控制樣式和結構呢？
  首選先找人。找準對象。
 
   我們前面學過    div 一類人  span 都是 
                   類名 好多個   
                   Id 是永遠是唯一的。  不會沖突。
getElementById("demo")
 
   Get 獲取   element 元素   by 通過   id 名字
  通過 id 名字為 demo的  得到這個元素
  因為這個div  是在  文檔中，文檔中很多個div其中的一個。所以我們
先document
document.getElementById("demo").style.width = "200px";
 文檔的 id為demo的 樣式的 寬度的 值為 200px
borderTop    
1.4    變量
變量的命名規則!
1.變量命名必須以字母或是下標符號”_”或者”$”為開頭。
2.變量名長度不能超過255個字符。
3.變量名中不允許使用空格。
4.不用使用腳本語言中保留的關鍵字及保留符號作為變量名。
5.變量名區分大小寫。(javascript是區分大小寫的語言)
1  var a = 10;
2      function fun()
3      { a = "global"; }
4      console.log(a);
5      //輸出 ？
6      var a;
7      function fun()
8      { a = "global"; }
9      fun();
10      console.log(a);
1.4.1    變量的作用域
  根據變量的作用範圍   可以分為  全局變量 和 局部變量
  全局變量：
    1. 在最外層聲明的變量。
    2. 在函數體內部，但是沒有聲明var 的變量也是全局變量
  局部變量：
     在函數體內部的 聲明的變量
   小知識點：
     隱式的全局變量  
11  在函數體內部，但是沒有聲明var 的變量也是全局變量。
12  var a = 1 
13  function func() { 
14      a = b = 2 
15  } 
16  func() 
17  alert(a) 
18  alert(b)  

1.5    事件三要素
 
  
把等打開燈 要做這樣的事情 。
我們用我們的手    去 按 一下開關    燈亮了。  
事件源    事件    事件處理程序  
1.5.1    事件源  
 要觸發的對象     手    用手去觸發的。  誰觸發了
 一般情況下 是 個名詞    
 發起者   
 被觸發者    開關按鈕  
1.5.2    事件 
  怎麽觸發的這個事情     按    
  一般情況下這個是 動詞   點擊  鼠標經過   按鍵盤 
事件名    說明
onclick    鼠標單擊
ondblclick    鼠標雙擊
onkeyup    按下並釋放鍵盤上的一個鍵時觸發 
onchange     文本內容或下拉菜單中的選項發生改變
onfocus     獲得焦點，表示文本框等獲得鼠標光標。
onblur     失去焦點，表示文本框等失去鼠標光標。
onmouseover     鼠標懸停，即鼠標停留在圖片等的上方
onmouseout     鼠標移出，即離開圖片等所在的區域
onload    網頁文檔加載事件
onunload    關閉網頁時
onsubmit    表單提交事件
onreset    重置表單時

1.5.3    事件處理程序
發生了什麽事       燈亮了     
=  function(){  } 
1.5.4    總結

   
 事件三要素：  
    事件源    三藏
    事件      念 
    事件處理程序   悟空頭疼





案例1 ：
 
  事件三要素：
       事件源：  x 盒子  
       事件:     點擊 
       事件處理程序：  關閉 這個大的banner  
  案例2 ：
     
      事件源：    關註京東的這個盒子
      事件：       鼠標滑過  經過
      事件處理程序：   下拉菜單就會顯示出來
事件源.事件 = function(){  事件處理函數 }
     
    
    事件源：  按鈕
    事件  點擊 
    事件處理程序：  盒子的寬度改變  400
    代碼:
     
 
<script>
19      /*要操作先找人*/
20      var demo = document.getElementById("demo");  //獲得id為demo的div盒子給demo
21      var btn = document.getElementById("btn"); // 獲得按鈕
22      /*事件三要素*/
23      /*事件源.事件 = fucntion(){}*/
24      btn.onclick = function(){
25          demo.style.width = "400px";
26      }
27  </script
 
>


1.6    隱藏樣式
 Display: none           display: block ;  顯示的意思 
 Visibility: hidden;       visibility: visible  顯示的意思
 Display  隱藏不占位置
 Visibility:hidden 隱藏占有位置   停職留心
 Overflow:hidden;   隱藏超出的部分。
1.7    入口函數 
 window.onload = function(){ 
     內部放js
  }
這個函數的意思就是說，當我們頁面加載完畢之後，采取執行函數體裏面的js部分。  就是說等 頁面的結構 樣式  節點等加載完畢。。。
所以，這句話也可以頁面的頂端即可。
 
<script>
    window.onload = function(){
        /*要做事，先找人*/
        var pic1 = document.getElementById("pic1");
        var pic2 = document.getElementById("pic2");
        var pic3 = document.getElementById("pic3");
        pic1.onclick = function(){
            document.body.style.backgroundImage = "url(images/1.jpg)";
        }
        pic2.onclick = function(){
            document.body.style.backgroundImage = "url(images/2.jpg)";
        }
        pic3.onclick = function(){
            document.body.style.backgroundImage = "url(images/3.jpg)";
        }
    }
</script>
1.8    模態框
 

   <script type="text/javascript">
        window.onload = function(){
             //事件源:  登錄
            var login = document.getElementById("login");
            var mask = document.getElementById("mask");
            var box = document.getElementById("box");
            login.onclick = function(){
               // 當我們點擊登錄，會彈出灰色的大盒子和白色的小盒子
                mask.style.display = "block";
                box.style.display = "block";
            }
           // 事件源 span x
            var close_all = document.getElementById("close_all");
            close_all.onclick = function(){
                mask.style.display = ‘none‘;
                box.style.display = "none";
            }
        }
    </script>
</head>

1.9    Padding 
內邊距  會影響盒子大小   
行內元素   盡量不用  上下的padding和margin  
繼承的寬度 padding不會擠開 。 
1.10    Js 的書寫位置 
Js 的書寫位置非常的自由。  
也可以參照 css 的位置來分類。
1.10.1     行內式 
<button onclick="alert(‘你好嗎‘)">點擊我</button>
一般情況，單雙引號是一樣 的 但是出現 了包裹的情況。
我們一般采取的是 外雙內單的格式。
<a href=”javascript:;”></a>
<a href=”javascript:void(0);”></a>

1.10.2     內嵌式
 <script type=”text/javascript”>  </script>  任何一個地方
1.10.3     外鏈式
<script type=”text/javascript” src=”xx.js”></script>
    這對標記之間不能寫任何的東西。
 
1.11    數據類型
 Js 的數據類型分為：
  字符型     數值型   布爾型   null    undefined  
 Js 是一個是一種弱數據類型 。
 Var  Aa = 10;
Var  aa:int = 10;
 Js 的變量你給什麽值，他就是什麽數據類型。  
1.11.1     字符型 (string)
  String   
  轉換為字符型: 
  1. 利用 “”  (雙引號)
   加了引號的都是字符型。
  2. 利用String();  轉換為字符型
1.11.2      布爾型 (boolean)
  就兩個值   正確的和錯誤的   true  和  false
  數據類型轉換為布爾型：
  1. 利用 !!   
   console.log(typeof !!num);
  2. 利用 Boolean()  
 false、undefined 、null、0、””  為 false 
 true、1、”somestring”、[Object]  為 true
1.11.3     數值型
 Var  num = 10
 數值的前面帶  0  表示 八進制  
 Var num = 020;   
  0*80+2*81  = 16  
 數值的前面帶  0x  表示 十六進制 
  var result = 0xb;   11  
  轉換為數值型:
  1. 利用 -  *  / 都可以轉換 
  2  利用Number( )  
  
1.11.4     ParseInt()  parseFloat()  
parseInt(值, 進制);
NOT a number   
MMD 
BBD     
parseInt(110,2) 
 表示2進制        吧10 這個2進制轉換為 10進制   
 0*20+1*21  + 1*22   =  6  

1.var a="15.15abc" , b=‘10.15‘ , c=‘10.0abc‘;
alert(parseInt(a)+Number(b)+parseFloat(c));
1.11.5     Null  undefined 
Null  空的       沒有值 。
Undefined  未定義的    應該有值，但是沒有給。
Null        “”  

後天 函數 for if switch

js基本知識1