java程序員第二課 JavaScript &&css 快速入門

CSS

1、css概述
* Cascading Style Sheets：層疊樣式表
** 層疊：一層一層（優先級，最終以哪個樣式爲準）
** 樣式表：很多的屬性和屬性值
* 增強頁面的顯示效果

*** CSS將網頁內容和顯示樣式進行分離，提高了顯示功能

* 要想使用css，必須要和html在一起使用

2、css和html的結合方式
（1）每個html標籤都有一個屬性 style，在style裏面設置樣式
*

天之道，損有餘而補不足，是故虛勝實，不足勝有餘。

* 格式 style=”屬性名1:屬性值1;屬性名2:屬性值2”
（2）使用html的一個標籤
* 一般style標籤寫在頭標籤裏面
* div {
background-color:black;
color:white;
}
* 應用場景：只是在一個頁面設置這個樣式，其他頁面設置其他的樣式

（3）在style標籤裏面使用語句
    * 首先創建一個css文件
    * <style type="text/css"> @import url(css文件路徑); </style>
    * <style type="text/css">
        @import url(div.css);
    </style>
    * 注意：在某些瀏覽器下不支持

（4）引入外部的css文件
    * 使用頭標籤 link
    * <link rel="stylesheet" type="text/css" href="css_3.css" />
    * 應用場景：比如現在有一萬個頁面，一萬個頁面需要相同的樣式

** css優先級
    * html代碼加載順序：從上到下加載
    * 一般情況下，後加載的優先級高

** 格式：屬性名:屬性值 ; 屬性名:屬性值;

3、css的基本選擇器
* 在哪個標籤上設置樣式
（1）標籤選擇器
* 使用標籤名作爲選擇器
* p {
background-color:green;
}
（2）class選擇器
* 每個html標籤都有一個屬性class
* .haha {
background-color:red;
color:green;
}

（3）id選擇器
    * 每個html標籤都有一個屬性id
    * #hehe {
        background-color:#990099;
        color:#ccff99;
     }
    * id建議不要相同，後面js獲取值

** 優先級
    style > id > class > 標籤選擇器

4、css的擴展選擇器
（1）關聯選擇器(設置嵌套標籤裏面的樣式)
*

aaaaa

*

bbbbb

** 設置div裏面的p標籤裏面的內容

    * div p {
        background-color:blue;
    }

（2）組合選擇器（設置不同的標籤具有相同的樣式）
    * <div>qqqqqq</div>
    * <p>wwwwww</p>
    ** 設置div和p具有相同的樣式

    * div,p {
        background-color:orange;
    }

（3）僞類元素選擇器(瞭解)
    * 實現一些簡單的動態效果
    * 不是一個真正的選擇器，css裏面提供的一些選擇器，可以直接使用
    ** 超鏈接的狀態
    * 原始狀態    鼠標放上去（懸停）   點擊（瞬間）  點擊之後
       :link        :hover              :active        :visited
    * 如何記憶：
        lv ha

5、CSS的盒子模型
* 要進行佈局，首先要把數據封裝到一塊區域裏面去（div）
* 邊框 border : border-width || border-style || border-color
** 上下左右 border-top border-bottom border-left border-right
* 內邊距：padding：length
** 有上下左右四個內邊距
* 外邊距 ：margin：length
** 有上下左右四個外邊距

6、css的佈局（漂浮）
* float屬性:left right

7、案例：實現圖文混排效果

8、css佈局（定位）
* position：absolute relative
** absolute：將對象從文檔流中拖出，使用 left ， right ， top ， bottom 進行定位
** relative: 不會把對象從文檔流中拖出，使用 left ， right ， top ， bottom 進行定位

9、案例：圖像簽名（在圖片上加文字）

1、javascript簡介
* javascript是一個基於對象和事件驅動的語言，應用與客戶端。

** 基於對象：
    - java是面嚮對象語言
    - js裏面提供了很多對象，直接使用
** 事件驅動：
    - 鼠標滑動，每次滑動都會變換一張圖片

** 客戶端
    - 瀏覽器

** html實現靜態的頁面效果，js實現一些動態的效果

* 特點
    ** 交互性：
    ** 安全性：js不可以直接訪問本地硬盤
    ** 跨平臺性：只要可以解析js的瀏覽器都可以運行

* javascript和java區別（雷鋒和雷峯塔）     
    - java是sun公司，現在是oracle公司；javascript是Netscape公司
    - java是面向對象，js是基於對象
    - javascript是若類型語言，java是強類型語言
        * 在java裏面,int i = 1;  int m = "1";
        * js裏面定義  var n = 1; var m = "12"; var flag = true;
    - java跨平臺基於jvm，js跨平臺基於瀏覽器

* javascript組成：
    1、ECMAScript（js的一些語法）
        * ECMA:組織，歐洲計算機協會
        * 語句，語法。。。
    2、BOM：browser object model
        * 瀏覽器對象模型
    3、DOM：document object model
        * 文檔對象模型

2、js與html結合方式 （兩種）
1、 通過html標籤
*
js代碼

2、使用外部引入js文件方式
    * 創建js文件
    * <script type="text/javascript" src="js路徑地址"></script>
    * 當使用了外部引入方式，引入js之後，在script標籤裏面不能寫js代碼
    * <script type="text/javascript" src="1.js"/>
* 使用 alert("要顯示的內容");

3、js的原始數據類型和變量聲明
* js的註釋
- 單行註釋 //
- 多行註釋 /* */
* 原始數據類型
* Boolean：布爾類型 true false
- var flag = true;

    * Number ：數字類型
        - var m = 1;

    * String：字符串 
        - var str = "abc";


    * Undefined：
        - 表示變量聲明，但是沒有賦值
        - var aa;
    * Null:
        - 表示引用類型爲空
        var date = null;
        - 所有引用類型都是object

* 聲明變量 
    - 任何的數據類型都是使用關鍵字 var

    - typeof(變量名稱):查看變量的類型

4、js的語句
* java裏面語句
- 循環 for while do-while
- if() { } else {}
- switch() String類型在jdk1.7開始支持
* js裏面的語句
- if else
* if(i == 3) {

        } else {}
    - 循環語句 for  while  do-while
        * document.write(""); 在頁面上顯示內容
        ** write("<br/>")：可以寫變量，寫html代碼
    - switch語句:(條件沒有類型的限制)
        switch(條件) {
            case 1:
                break;
            ......
            default:

        }

5、案例：實現99乘法表
* document.write(“

“);
//循環行
for(var i=1;i<=9;i++) {
document.write(““);
//循環列
for(var j=1;j<=i;j++) {
document.write(““);
}
//增加換行
//document.write(“
”);
document.write(““);
}
document.write(“

“);
document.write(j+”*”+i+”=”+i*j+” ”);
document.write(“

“);

6、js的運算符
* i++ ++i
* js的字符串的加減操作
- var str = “123”;
- document.write(str+7);//字符串拼接 = 1237
- document.write(str-1);//做相減操作 = 122

* boolean類型的加減操作
    - var flag = true;
    //document.write(flag+1); //true 值1 

    - var flag1 = false;
    document.write(flag1+1); //flase 值0

* 數字類型number操作(不區分整數和小數)
    - var mm = 123;
    //在java裏面值 0
    - document.write(123/1000*1000); //123

    * &&和||區別
    * &和|

7、js的數組
* 存很多值
** java裏面定義數組 int[] arr = {1,2,”3”};不正確

* 三種定義方式
    1、第一種 var arr = [];  var arr = [1,2,3]; var arr = [1,"a",3];
    2、第二種 var arr1 = new Array(3);傳入一個參數 ：表示定義了一個數組名稱arr1，並且數組的長度是3
        * arr1[0] = 1;
          arr1[1] = 2;
          arr1[2] = 3;

    3、第三種 var arr2 = new Array(4,5,6);
        * 表示定義一個數組名稱arr2，並且數組裏面的具體值是4 5 6

* js的數組裏面有一個屬性 length 查看數組的長度

8、js的函數（方法）
* java裏面定義方法
- public void/int 方法名(參數列表) {
方法體;
返回值;
}

* js裏面定義函數有三種方式
    1、使用一個關鍵字 function
        - 格式： function 方法名(參數列表) {
                方法體;
                //返回值可以有可以沒有;
            }
        //參數列表部分不加var，直接寫參數名稱
        * function add1(m,n) {
            var sum = m+n;
            //alert(sum);
            return sum;
        }

    2、動態函數(不建議使用)
        * 使用js內置對象 Function("方法的參數列表","方法體和返回值")
        * var param = "a,b";
          var methods = "var sum;sum=a+b;return sum;";
          var aa = new Function(param,methods);

    3、匿名函數
        * function(參數列表) {方法體和返回值;}
        * var bb = function(p,q) {
            var sum = p+q;
            return sum;
        }

9、js的全局變量和局部變量
* 全局變量：在script裏面定義的一個變量，這個變量在頁面中都有效
* 局部變量：在方法內部定義一個變量，這個變量只能在方法內部使用

** ie調試方式：直接打開ie瀏覽器f12，出現控制檯，看到js的錯誤信息

10、