WEB前端--Day4 (javascript基礎)

阿新 • • 發佈：2018-12-07

一、css的屬性

1.形變和過渡

形變：tranform

過渡：transition

1.1形變

rotate(degree):旋轉，指定的標籤需要旋轉的度數，degree表示度數

scale():指定的標籤放大或者縮小【拉伸或者縮放】

程式碼演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #transform{
                width: 200px;
                height: 200px;
                background-color: orange;
                
                /*外邊距*/
                margin: 100px;
                
                
                /*設定旋轉點*/
                /*center left right top bottom*/
                transform-origin: center left;
                
                /*設定旋轉的角度*/
                /*預設情況下沿著z軸旋轉的
                 * rotateX()
                 * rotateY()
                 * deg--->degree
                 */
                /*transform: rotate(60deg);*/
                
                /*拉伸形變*/
                /*預設情況下橫向拉伸和縱向拉伸是同時進行的
                 * scaleX(num)   scaleY(num)
                 * num > 1  :表示放大num倍
                 * 0<num<1 :表示縮小num倍
                 */
                /*transform: scale(1);*/
                
                transform: scale(2) rotate(30deg);  
            }
        </style>
    </head>
    <body>
        <div id="transform"></div>
    </body>
</html>

1.2過渡

transition-duration：過渡的時間

transition-property：需要過渡的標籤

程式碼演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #transition{
                width: 200px;
                height: 200px;
                background-color: orange;
                
                /*外邊距*/
                margin: 100px;
                
                transform: rotate(-90deg);
                
                color: white;
                
                /*新增過渡
                 * 哪個標籤需要過渡
                 * 發生過渡的時間
                 */
                transition-duration: 5s;
                transition-property: all;
                
            }
        </style>
    </head>
    <body>
        <div id="transition">形變和過渡</div>
    </body>
</html>

1.3案例：照片牆

程式碼演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                width: 100%;
                height: 700px;
                /*auto:表示自動適配*/
                margin: 50px auto;
                
                background-color: orange;
            }
            
            /*共性*/
            img{
                width: 180px;
                height: 220px;
                border: solid 3px white;
                
                margin: 15px;
                
                /*過渡*/
                transition-duration: 2s;
                /*指定某個屬性發生變化的時候觸發過渡屬性*/
                transition-property: transform;
            }
            
            /*個性*/
            /*每張圖片旋轉不同的角度*/
            div img:nth-child(1){
                transform: rotate(15deg);
            }
            div img:nth-child(2){
                transform: rotate(5deg);
            }
            div img:nth-child(3){
                transform: rotate(-15deg);
            }
            div img:nth-child(4){
                transform: rotate(10deg);
            }
            div img:nth-child(5){
                transform: rotate(-5deg);
            }
            div img:nth-child(6){
                transform: rotate(15deg);
            }
            div img:nth-child(7){
                transform: rotate(5deg);
            }
            div img:nth-child(8){
                transform: rotate(-10deg);
            }
            div img:nth-child(9){
                transform: rotate(15deg);
            }
            
            /*設定滑鼠懸浮*/
            #box > img:hover{
                transform: scale(1.2) rotate(0deg); 
            }
            
        </style>
    </head>
    <body>
        <div id="box">
            <img src="img/photowall/pic1.jpg"/>
            <img src="img/photowall/pic2.jpg"/>
            <img src="img/photowall/pic3.jpg"/>
            <img src="img/photowall/pic4.jpg"/>
            <img src="img/photowall/pic5.jpg"/>
            <img src="img/photowall/pic6.jpg"/>
            <img src="img/photowall/pic7.jpg"/>
            <img src="img/photowall/pic8.jpg"/>
            <img src="img/photowall/pic9.jpg"/>
        </div>
    </body> 
</html>

2.動畫

2.1使用

animation，主要是結合形變和過渡使用

程式碼演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: purple;
                
                /*設定旋轉的軸點*/
                transform-origin: left top;
                
                /*給標籤新增動畫*/
                /*引數：動畫名稱  動畫持續的時間  動畫的形式  動畫執行的次數
                 
                 * 動畫名稱：自定義
                 * 動畫持續的時間：單位為秒，表示當整個動畫執行一次需要的時間
                 * 動畫的形式：
                 *      線性動畫:linear
                 *      由快到慢:ease
                 * 
                 *動畫執行的次數：預設為1次，無限次：infinite 
                 * 
                 * */
                animation:animate  5s  linear;
            }
            
            /*使用animation的時候，動畫需要手動設定
             
             * animate-----》動畫的名稱
             * 表示方法一
             * from：起始動畫狀態
             * to：最終動畫狀態
             * 
             * 表示方法二
             * 可以使用百分比，取值範圍0%~100%
             * 
             * */
            /*注意：動畫執行完畢之後會恢復到最初狀態*/
            @keyframes animate{
                /*from{margin-left: 200px;}
                to{transform: rotate(180deg);}*/
                
                0%{
                    background-color: blue;
                }
                10%{
                    background-color: green;
                }
                
                25%{
                    transform: rotate(50deg);
                }
                
                60%{
                    background-color: orange;
                    transform: scale(1.2);
                }
                
                100%{
                    margin-right: 10px;
                }
            }
            
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

2.1案例：時鐘

程式碼演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #clock{
                width: 300px;
                height: 300px;
                
                border-radius: 50%;
                border: solid 10px gray;
                
                margin: 150px auto;
                
                /*設定父標籤的有效定位，充當其他標籤的參照物*/
                position: relative;
            }
            
            /*刻度*/
            /*共性*/
            #clock .line{
                width: 5px;
                height: 310px;
                
                position: absolute;
                left: 50%;
                
                background-color: gray; 
            }
            
            /*個性*/
            .line2{
                transform: rotate(30deg);
            }
            .line3{
                transform: rotate(60deg);
            }
            .line4{
                transform: rotate(90deg);
            }
            .line5{
                transform: rotate(1200deg);
            }
            .line6{
                transform: rotate(150deg);
            }
            
            
            /*覆蓋層*/
            #cover{
                position: absolute;
                width: 260px;
                height: 260px;
                border-radius: 50%;
                background-color: white;
                
                left:20px;
                top:20px;
                
                z-index: 1;
            }
            
            /*設定針*/
            #clock .zhen{
                position: absolute;
                /*設定旋轉點*/
                transform-origin: center bottom;
            }
            
            /*秒針*/
            #clock .seconds{
                width: 2px;
                height: 140px;
                
                background-color: blue;
                
                top:10px;
                left:151.5px;
                
                z-index: 2;
                
                animation: circle  60s steps(60) infinite;
            }
            
            /*分針*/
            #clock .minute{
                width: 4px;
                height: 120px;
                
                background-color: purple;
                
                top:30px;
                left:149.5px;
                
                z-index: 2;
                
                animation: circle  3600s infinite linear;
            }
            
            /*時針*/
            #clock .hour{
                width: 6px;
                height: 100px;
                
                background-color: red;
                
                top:50px;
                left:148px;
                
                z-index: 2;
                
                animation: circle  43200s infinite linear;
            }
            
            /*圓心*/
            #dotted{
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: gray;
                
                position: absolute;
                left:141px;
                top:140px;
                
                z-index: 3;
            }
            
        
            @keyframes circle{
                from{transform: rotate(0deg);}
                to{transform: rotate(360deg);}
            }
            
            
            
            
            
        </style>
    </head>
    <body>
        <div id="clock">
            <!--覆蓋層-->
            <div id="cover"></div>
            <!--時分秒-->
            <div class="hour zhen"></div>
            <div class="minute zhen"></div>
            <div class="seconds zhen"></div>
            <!--刻度-->
            <div class="line line1"></div>
            <div class="line line2"></div>
            <div class="line line3"></div>
            <div class="line line4"></div>
            <div class="line line5"></div>
            <div class="line line6"></div>
            <!--圓心-->
            <div id="dotted"></div>
        </div>
    </body>
</html>

二、綜合案例

三、javascript簡介

1.概念

是基於物件和事件驅動的指令碼語言，主要應用在客戶端【瀏覽器】，簡稱js

MoCha

基於物件：提供好了很多物件，可以直接使用

事件驅動：html做網站靜態效果，js實現動態效果【可以和使用者互動】

js的作用：操作html和css

2.特點

a.互動性【實現資訊的動態互動】

b.安全性【不可以直接訪問磁碟上的檔案】

c跨平臺型【只要是可以解析js的瀏覽器都可以執行，與平臺無關】

3.和java的關係

a.開發公司

Java是由Sun公司開發的，後來被Oracle收購了

js是Netscape【網景公司】開發的

b.物件

Java是面向物件

js是基於物件

c.資料型別

Java是強型別語言【每種變數都有確定的資料型別】 int num = 10

js是弱型別語言，類似於Python【變數的型別由值決定】var num = 10

4.組成

a.ECMAScript

由ECMA定義的基本語法，包括變數，語句，函式，運算子等

b.BOM

Broswer Object Model，瀏覽器物件模型

c.DOM

Document Object Model，文件物件模型

5.和html的結合方式

5.1使用script標籤

注意：可以寫在head中，也可以寫在body中

程式碼演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            alert("head~~~~~hello")
        </script>
    </head>
    <body>
        <script>
            alert("body~~~~~hello~~~~~~1")
        </script>
        
        <script>
            alert("body~~~~~hello~~~~~~2")
        </script>
        
        <!--script標籤可以額出現在head或者body中
            在同一個html檔案中，script標籤可以出現多次，按照先執行head，然後執行body中【按照順序執行】
        -->
    </body>
</html>

5.2引入外部的js檔案

仍然使用scrip標籤，只是引入一個外部的js檔案

程式碼演示：

js檔案

alert("hello  你好啊")

html檔案

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/text01.js">
            
        </script>
        <script>
            alert("hgisijrhksrhsekhjt")
        </script>
        
        <!--注意：在一個script標籤中如果引用了外部的就是檔案，則將不能在標籤中再書寫js程式碼，否則無效-->
        <!--注意：一般將script標籤寫在body中，原因：先載入head，然後載入body，
        而js的作用就是為了操作html和css，當script標籤寫在head中的時候，如果要操作某個html標籤，則這個標籤還未加載出來-->
    </head>
    <body>
    </body>
</html>

6.註釋

html：<!-- xxx -->
css:/* xxx */
js:
    單行註釋：//xxxxxxx【ctrl+/】                 #
    多行註釋：/* xxx */【ctrl+shift+/】           """"""

四、ECMAScript基本語法

1.變數的定義

使用關鍵字var定義變數，其他的寫法和Python完全相同

舉例：

Python：num = 10

js: var num = 10;

注意：在js中，每條語句的結尾最好新增一個分號，表示語句的結束

程式碼演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            //1.先宣告，後賦值
            var age;
            age = 18;
            
            //2.在宣告的同時給變數賦值
            var age1 = 20;
            
            //3.可以同時定義多個變數
            //注意：多個變數之間使用逗號隔開，var關鍵字只需要出現一次
            var name = "hello",age2 = 10;
            
            //4.js是弱型別的語言
            //特點：容錯性較高，在賦值的時候才能確定變數的資料型別
            var b;
            b = 15;
            b = "abc";
            
            //5.列印語句
            //彈出一個提示框
            //alert(age);
            //向瀏覽器的文件物件中寫入一個數據
            document.write(age);
            //在控制檯列印日誌
            console.log(age)
            
        </script>
    </body>
</html>

2.命名規範

a.變數名可以是字母，數字，下劃線以及美元符[$]

b.第一個字元不能為數字

c.不能使用關鍵字

d.區分大小寫

e.遵循駝峰命名法

3.資料型別

Python：數字型別，字元型，列表，元組，字典，集合，函式，類，布林

3.1一般資料型別

Boolean:布林型別

Number：數字型別【整型和浮點型】

String：字串型別

Object：物件型別

Array：陣列

Function：函式

RegExp:正則表示式

3.2特殊資料型別

Null：是一個只有一個值的資料型別，null，他表示一個空物件的引用【指標】，類似於Python中的None，使用typeof操作符檢測null返回的結果為object

Undefined：未定義的變數，定義一個變數，但是沒有給該變數父初始值【var a; a是Undefined型別】

NaN:Not A Number,不是一個數字

程式碼演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            //1.null
            var c = null;
            document.write(c);
            
            
            //注意：在js中如果要操作html的標籤，不能直接使用，必須通過js程式碼操作
            document.write("<br />");
            
            
            document.write("hello");
            
            document.write("<br />");
            
            //2.Undefined
            //注意：在使用變數之前最好能賦值
            var b;
            document.write(b);
            
            document.write("<br />");
            
            //undefined派生自null，表示值相同的
            document.write(undefined == null);//true
            //型別，兩個變數屬於不同的資料型別
            document.write(typeof c == typeof b);//false
            
            document.write("<br />");
            
            //3.NaN
            var a = 0 / 0;
            document.write(a);
            
            //isNaN():判斷一個變數是否不是一個數字，是number返回false，不是數字返回是true
            document.write(isNaN("hello"));
            document.write("<br />");
            
            //注意：isNaN除了可以判斷之外，還可以將字串試圖轉換，如果能轉換為number則仍然返回false
            document.write(isNaN("123"));
            document.write("<br />");
            
            document.write(isNaN(123));
            document.write("<br />");
            
            //注意：在js中，布林值可以被當做數字使用，true代表是1，false代表的是0
            document.write(isNaN(true));
            document.write("<br />");
            
            document.write(1 + true);
            document.write("<br />");
            document.write(1 + false);
        
        </script>
    </body>
</html>

4.運算子

4.1算術運算子

++：自增運算子

--：自減運算子

程式碼演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            //++和--一般使用在變數的前面或者後面
            //基本用法：可以讓變數本身增1或者減1，可以單獨使用
            var n = 2;
            var r = ++n;
            
            var n1 = 2;
            var r1 = n1++;
            
            
            document.write(n);  //3
            document.write("<br />");
            document.write(n1);  //3
            document.write("<br />");
            
            document.write(r);   //3
            document.write("<br />");
            document.write(r1);  //2
            document.write("<br />");
            //注意1；不管++出現在變數的前面還是後面，變數本身都自增了1
            //注意2：將n++或者++n賦值給某一個變數，該變數的值取決於++出現在變數的前面還是後面
            //如果++出現在變數的前面，先原變數自增1，然後將結果賦值給新變數
            //如果++出現在變數的後面，先將原變數的值賦值給新變數，然後原變數自增1
            
            //參與運算
            //++
            var num1 = 3;
            var r1 = ++num1 + 2;
            document.write(num1); //4
            document.write("<br />");
            document.write(r1);  //6
            document.write("<br />");
            
            
            var num2 = 3;
            var r2 = num2++ + 2;
            document.write(num2); //4
            document.write("<br />");
            document.write(r2);  //5
            document.write("<br />");
            
            //--
            num1 = 3;
            r1 = --num1 + 2;
            document.write(num1); //2
            document.write("<br />");
            document.write(r1);  //4
            document.write("<br />");
            
            
            num2 = 3;
            r2 = num2-- + 2;
            document.write(num2); //2
            document.write("<br />");
            document.write(r2);  //5
            document.write("<br />");
            
            
            var a = 3;
            //a++  ++a
            a = a + 1
            a += 1
            
            //+:拼接運算子
            //在Python中，只能拼接字串
            //在js中，字串和任意型別的變數相加，得到的結果都是字串
            document.write("abc" + 10);
            document.write("<br />");
            document.write("abc" + true);
            document.write("<br />");
            document.write("abc" + "123");
            document.write("<br />");
            document.write("abc" + null);
            document.write("<br />");
            document.write("abc" + undefined);
            document.write(typeof ("abc" + 10));
                
        </script>
    </body>
</html>

4.2關係運算符

作用：

a.應用在if語句或者迴圈語句中

b.運算的結果都是布林值

c.如果兩個number'型別的變數比較大小，則比較大小

d.如果是兩個字母比較，則比較的是字元的ASCII

4.3邏輯運算子

與：&&

或：||

非：！

注意：和Python中的and，or和not的用法相同的，也存在短路原則

4.4三目運算子【三元運算子】

格式：關係運算符？值1：值2；

說明：

a.值1和值2可以是常量，可以是變數，也可以是表示式

b.工作原理：如果關係運算符成立，則整個運算子的結果是值1，否則為值2

c.作用：實際上實現了二選一的操作，類似於if-else語句

程式碼演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            //需求：判斷一個數是否是偶數
            var num = 10;
            
            //常量
            var result1 = num % 2 == 0?"偶數":"奇數";
            document.write(result1);
            var result2 = num % 2 == 0?true:false;
            
            
            //變數
            var r1 = true;
            var r2 = false;
            var result3 = num % 2 == 0?r1:r2;
            
            //表示式
            var result4 = num % 2 == 0?3 != 5:3 == 5;
            
            //注意：三目運算子本質上是一個運算子，所以運算完成之後必定會得到一個結果，一般使用一個 變數將結果接出來
            
            //實現了二選一的操作
            /*result = ""
             * if num % 2 == 0:
             *      result = "偶數"
             * else:
             *      result = "奇數"
             */
            
        </script>
    </body>
</html>

4.5賦值運算子

=

+= -=

4.6特殊用法

程式碼演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            //1.除法只有一個:/    
            //Python: /   //
            
            //2.js中的字串可以進行相加或者相減的操作
            var str = "456";
            
            //注意：字串和基本資料型別使用+，則表示拼接，得到的結果為字串
            document.write(str + 1);
            document.write("<br />"); //4561
            //如果字串可以轉換為數字，使用-則表示數學上的減法運算,否則結果為NaN
            document.write(str - 1);  //455
            document.write("<br />");
            document.write("abc" - 1);//NaN
            
            
            //3.boolean型別也可以進行相加或者相減的操作
            document.write(true + 10); //11
            document.write(false + 10); //10
            
            document.write("<br />");
            
            
            //4.== ===
            //==比較的值，不關心型別
            var aa = "5";
            if (aa == 5){
                document.write("ok");
            }
            else{
                document.write("不ok");
            }
            //ok
            
            //===比較的是型別和值
            if (aa === 5){
                document.write("ok");
            }
            else{
                document.write("不ok");
            }
            //不ok
        </script>
    </body>
</html>

5.js中的語句

三大流程控制語句

順序：

分支：

迴圈：

Python ：

分支：if,if-else,if-elif-else

迴圈：while for-in

js:

分支：if ,if-else,if-else if -else,switch-case

迴圈;簡單for，for-in，while，do-while

5.1f語句

語法：

單分支：

if (條件表示式){

}

雙分支：

if (條件表示式){

}else{

}

多分支：

if (條件表示式1){

} else if(條件表示式2){

}

...

else{

}

說明：如果執行語句只有一行程式碼，則可以省略花括號

程式碼演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            //單分支：要麼執行，要麼不執行
            var num1 = 10;
            if (num1 < 100){
                document.write("hello");
            }
            
            
            //雙分支：實現了二選一的操作，類似於三目運算子，可以進行相互轉換
            if (num1 % 2 == 0){
                document.write("偶數");
            }else{
                document.write("奇數");
            }
            
            //多分支：實現多選一的操作【每次只執行其中的一個分支，執行完成之後則整個多分支語句結束】
            var n = 3;
            if(n > 1){
                document.write("1");
            }else if(n > 2){
                document.write("2");
            } else if(n > 3){
                document.write("3");
            }else{
                document.write("4")
            }
            
            //巢狀if語句
            if(n > 1){
                if(n > 2){
                    document.write("ok");
                }
            }
            
            //等價於
            if(n > 1 && n > 2){
                document.write("ok");
            }
            
            //書寫一個永遠成立的if語句
            if(true){
                
            }
            if(1){
                
            }
            
            //0,0.0,false,null代表是假
            
        </script>
    </body>
</html>

5.2switch語句

作用：類似於if語句中的多分支，實現多選一的操作

語法：

switch(變數){

case 常量1：{

執行語句1；

break；

}

case 常量2：{

執行語句2；

break；

}

。。。

default：{

執行語句n;

}

}

工作原理：根據變數的值進行匹配，如果在case分支匹配到了常量，則執行case後面的語句，則整個switch-case語句結束；如果所有的case分支都不匹配，則執行default中的語句

程式碼演示：

WEB前端--Day4 (javascript基礎)

一、css的屬性 1.形變和過渡形變：tranform 過渡：transition 1.1形變 rotate(degree):旋轉，指定的標籤需要旋轉的度數，degree表示度數 scale():指定的標籤放大或者縮小【拉伸或者縮放】程式碼

web前端之JavaScript必知的基礎知識

JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。 JS作用：表單驗證，減輕服務端的壓力；新增頁面動畫效果；動態更改頁面內容；Ajax網路請求。下面簡單介紹JS的基礎知識：基礎知識一、基本結構二、使用J

web前端學習的基礎知識1

計算當前位置 ons 前端開發結果軟件 ava pro pan Web前端是一個很新的職業，在國內乃至國際上真正開始受到重視的時間不超過5年。Web前端開發是從網頁制作演變而來的，名稱上有很明顯的時代特征。目前看來，這個一個就業前景很大的職業。 web前端的學習不能一

【web前端】JavaScript閉包

con 命令式 rate 編程局部變量 urn 沒有生命 console example: var generateClosure = function(){ 　　var count = 0; 　　var get = function(){ 　　　　count++; 　

web前端之JavaScript

js 數據類型一、JavaScript介紹1、一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：（1）核心（ECMAScript）（2）文檔對象模型（DOM） Document object model (整合js，css，html)（3）瀏覽器對象模型（BOM） Broswer obj

Web前端之Javascript詳解20180330

win .proto 腳本產品使用 pro undefine 處理方式 subst 一、javascript概述 javascript是基於對象和事件的腳本語言。特點： 1.安全性(不允許直接訪問本地硬盤(因為是被遠程的瀏覽器解釋))，它可以做的就是信息的動態交互 2

web前端之javascript變數提升詳解

js變數提升對於大多數js開發者來說，變數提升可以說是一個非常常見的問題，但是可能很多人對其不是特別的瞭解。所以在此，我想來講一講。先從一個簡單的例子來入門：你覺得以上的程式碼會輸出什麼？是輸出undefined嗎？如果是按照程式的自上而下執行的話，那麼這一段程式碼確實是輸出

web前端之JavaScript 的資料型別與變數

這篇文章，我們來聊聊 JS 中的資料型別與變數。這是在學習 JS 時最基礎的一類問題，但卻很重要。希望我的分享有幫助到你。文章開頭，我先提幾個面試中遇到的問題：這篇文章的風格，在分析知識點的同時，插入一些我經歷過的面試題。基本資料型別在 JS 中，基本資料型別有 6 種

WEB 前端--Day2(css基礎)

一、html的常用標籤 1.表單標籤【重點掌握】作用：可以提交不同的資料到指定的伺服器標籤： <form></form>:表示表單的範圍【父標籤】作用：用於採集使用者輸入的資訊標籤分為三大類：表單標籤：包含資

web前端(三)——JavaScript入門

JavaScript嵌入頁面的方式 1、行間事件（主要用於事件） <input type="button" name="" onclick="alert('ok！');"> 2、頁面script標籤嵌入 <script type="text/javascript">

web前端(四)——javascript高階

陣列定義陣列的方法 //物件的例項建立 var aList = new Array(1,2,3); //直接量建立(首選) var aList2 = [1,2,3,'asd']; 　　運算元組中資料的方法 //獲取陣列的長度 var aList = [1,2,3,4]; al

web前端(四)——javascript高級

-c 引入串處理 class clear world yaler 對象 ring 數組定義數組的方法 //對象的實例創建 var aList = new Array(1,2,3); //直接量創建(首選) var aList2 = [1,2,3,‘asd‘];

Web前端之javascript框架vue

vue框架-----"響應式"框架。檢視 1.由{{}}佔位，匹配的是模型資料(儲存於data:{})的屬性名稱 2.每個頁面要建立一個Vue例項 3.el對應的dom元素，把資料和檢視結合在一起 4.計算屬性computed，對應一個函式 <html lang="en

從零開始，學習web前端之HTML基礎

我在大學的專業是計算機網路技術，大學期間有這樣一門課是“網頁設計與製作”，當時對這門課挺感興趣，就學習了下。通過簡單的html、css和js能展現出自己想要的東西，感覺挺有意思的。雖然陰差陽錯之下成為了一名Android開發工程師，但是前端方面的知識也一直在

Web前端複習——Javascript複習（函式+分支結構）

1、函式指的是為一個任務進行封裝在一個程式碼塊中。（1）函式使用：宣告、定義和呼叫 function 函式名([引數變數列表]){ 函式體：包含任務的步驟清單(程式碼塊) [return 返

web前端：Canvas 基礎（一）

0.前言最近忙裡偷閒，來寫寫文章。 ————-我是華麗的分割線————– 終於把這篇文章寫完了，關於本文，針對讀者主要是之前從未接觸過 Canvas的同學。當然，你要學 canvas 一定要有 JS 基礎啦。其次就是，因為前前後後耽誤了兩天

Web前端溫故知新-CSS基礎

一、CSS定義與編寫CSS 　　1.1 CSS的定義　　全名：Cascading Style Sheets -> 層疊樣式表　　定義：CSS成為層疊樣式表，它主要用於設定HTML頁面中的文字內容（字型、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。C

從零開始，學習web前端之js基礎

js來源 Javascript作為web標準中的行為標準，最初起名叫LiveScript，它是Netscape開發出來一種指令碼語言，其目的是為了擴充套件基本的Html的功能，驗證web頁表單資訊，為web頁增加動態效果。為了趕上java的熱潮，Netscap

WEB前端模組化基礎知識

前段模組化基礎概念前端模組化其實就是將一個完整的單一的功能整合起來形成單獨的一個功能元件，當需要用的的時候只需要載入這個元件，然後便可以通過該元件唯一的名稱去使用其中的內容。主流模組化框架 commonJS AMD CMD UMD ES6規範

Web前端複習——Javascript複習（2）

1、變數+資料型別（1）變數定義what——記憶體中儲存1個數據的儲存空間，再起一個名字何時用when——程式中的資料都要先用變數儲存，再處理如何使用how——宣告賦值取值宣告：

WEB前端--Day4 (javascript基礎)

一、css的屬性

二、綜合案例

三、javascript簡介

四、ECMAScript基本語法

相關推薦