JavaScript基礎之----2

1.數組

裏面存儲的數據類型無限制,可多種
var arr = []  如此生成

2.函數

function get(num1, num2) {
    var sum = 0
    for (i = num1; i <= num2; i++) {
        sum += i
    }
    console.log(sum)
   }
get(1, 100)                               5050

自定義 起始值和末尾值的自加函數
若實參數量比形參數多,多的部分不理會,函數不接受也不會拋錯
若實參數量比形參少,則函數返回 NaN ,不拋錯

若需要返回值則內部寫入 return 語句
return 返回多個值時,默認只返回最後一個值

3. arguments對象獲取傳遞實參

function fn() {
        console.log(arguments.length)       5
        console.log(arguments[2])           3
        console.log(arguments)        [1, 2, 3, 4, 5]
     }
fn(1,2,3,4,5)

只有函數纔有 arguments對象,每個函數都內置好了的
它具有數組的索引、長度等屬性,但不具有其他方法屬性,屬於僞數組

4.全局變量與局部變量

局部變量在作用域中寫入

特殊情況:  作用域中使用 var 定義默認爲局部變量,直接創建默認爲全局變量

5.獲取id

<body>
<div id='time'>2020 </div>

<script>
var t = document.getElementById('time')
console.log(t)
</script>

得到元素對象 2020


根據標籤名獲得--li     是個列表可用索引
document.getElementsByTagName('li')


document.querySelector('.類名')    根據選擇器獲取選擇對象
document.querySelector('#id名')    

6.分時顯示不同圖片和問候語

額外

  通過 onclick 決定點擊按鈕的顯示圖片

代碼

<body>
    <img src="images/s.gif">
    <div> 上午好 </div>
    <script>
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        var date = new Date();
        var h = date.getHours();
        
        if (h < 12) {
            img.src = 'images/s.gif';
            div.innerHTML = '親愛的, 好好寫代碼';
        } else if (h < 18) {
            img.src = 'xxx';
            div.innerHTML = '親愛的, 下午好';
        } else { 
            div.innerHTML = '晚安';
        }
    </script>
</body>
                

7.修改表單屬性

定義並獲取元素之後, 實現點擊修改
如修改 input 框

<button> 按鈕 </button>
<input type='text' value='輸入內容' >
<script>
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    btn.onclick = function() {
        input.value = '被點擊了';
        this.disabled = true;
    }
</script>


輸入內容後,提示框內容改變,並且按鈕不能再被點擊
this 指向事件的調用者   (btn.onclick)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章