javascript基礎

數據

變量

分爲字符串，數字，undefined, null，對象
undefined類型是隻聲明瞭變量，但是沒賦值
可以使用typeof()函數來查看變量類型

例子

var weight=160;
var weightIncrease="2.5斤"
// 返回值是"162.5斤"  #整數和字符串類型相加時，會自動把整型轉爲字符串
weight+weightIncrease  
//把字符串轉爲整型的函數有2個，用法如下
parseFloat(weightIncrease)  , parseInt(weightIncrease)

字符串的處理

var words = "hello"
words.length   //字符串長度
words.charAt(0)  //獲得words中的第一個字符
words.charAt(words.length -1)  //獲得最後一個字符
words.indexof('l')  //獲得第一個字母'l'的索引號
words.lastindexof('l')  //獲得最後一個字母'l'的索引號
words.substring(0,3)   //截取字符串中的前三個字符
words.replace('h','H')  //把h替換成H, 也可替換he爲she
 
words = ('你好'，'美女')
words.split(', ')  //split函數，以逗號爲分隔符來切割數組，返回的結果是一個數組["你好","美女"]
var newwords = words.split(',')  //重新賦值給一個變量
newwords[0]  #返回"你好"

數組

var trackCD1= ['長城，'農民'，'工人']
var tarckCD2= ['紅花','綠葉']
 
typeof(trackCD1)//返回結果爲object
 
1. trackCD1.push('遙望','家鄉')  //在後面追加
2. trackCD1.pop（）//刪除最後一個元素，並彈出
3. trackCD1.shift()  //刪除第一個元素，並彈出
4. delete trackCD1[1]  //刪除第一個元素，但是位置還存在，只是設爲了undefied
5. trackCD1.splite(1)  //這個可以徹底刪除第一個元素
6. var tracks = trackCD1.concat(trackCD2)   //合併2個數組元素

流程控制

if語句

&&表示與；||表示或

var weather = '晴天'，temperature = 25;
if ((weather === '晴天') && (temperature <=26)) {
    alert('心情不錯');
}
else if (weather === '下雨') {
    alert('憂鬱');
}
else {
    alert('心情憂鬱');
}

switch語句

var weather = '下雨';
switch (weather) {
case '下雨':
        alert('憂鬱');
        break;
case '晴天':
        alert('心情不錯');
        break;
default:
        alert('心情糟糕');
        break;
}

while語句

//控制檯輸出1-10的奇數
var i = 0;
while (i < 10) {
    i++;
    if (i % 2 === 0) {
        continue;
    }
    console.log(i);
}

for語句

var week = ['週一', '週二', '週三' , '週四' , '週五']
for (var i = 0; i < week.length; i++) {
    console.log(week[i]);
}

函數

定義函數

function alertMessage (message) {
        alert(message);
}
alertMessage('您好');
 
 
//可以寫上message形參，也可以爲空，如下
function alertMessage () {
        alert('hello!');
}
alertMessage();

函數表達式

var alertMessage = function (message) {
        alert(message);
}
alertMessage('hello');
 //爲匿名函數，並賦值給變量alertMessage，然後可把這個變量當函數用，傳遞參數。
function (message) {}

對象

創建對象及添加屬性

var beyond = {};  //創建了一個空對象 beyond
//添加屬性的2種方式，如下
beyond.formedIn = '1983';
beyond['foundedIn'] = '香港';

//也可以在創建對象的時候添加對象
var beyond = {
    formedIn:'1983', 
    foundedIn:'香港',
    artist:['黃家駒','羅貫中','劉翔']
};
//訪問數組內容：
beyond.artist[1]

更新對象屬性

//修改屬性
beyond.foundedIn = '臺灣'   
//刪除屬性
delete beyond.foundedIn

添加方法

var beyond = {
    formedIn:'1983', 
    foundedIn:'香港',
    artist:['黃家駒','羅貫中','劉翔']
};
//這裏添加了一個showArtist的方法
beyond.showArtist = function () {
   for (var i = 0; i < this.artist.length; i++) {
        document.writeln(this.artist[i]);
    }
};
beyond.showArtist();

說明：
this表示beyond對象
document表示網頁內容
function () {…} 爲匿名函數

循環輸出對象裏的屬性

//在上面的基礎上添加如下
var property;
for (property in beyond) {
    console.log(beyond[property]);
}
//上面的代碼會輸出對象的屬性和方法，如果不想輸出方法內容，可以加一個if語句
var property;
for (property in beyond) {
    if (typeof beyond[property] !== 'function') {
    console.log(beyond[property]);
    }
}

DOM

獲取文檔中的元素的幾種方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="page-title">Coldplay</h1>
<p>樂隊於1997年成立於倫敦</p>
<ul class="artist-list">
    <li>ChrisMatin</li>
    <li>Jonny Buckland</li>
    <li>Guy Beryyman</li>
    <li>Will Champion</li>
</ul>
</body>
</html>

getElementById

比如<h1 id='page-title'>coldplay</h1>
//根據ID名，獲取元素返回的對象
document.getElementById('page-title')  
//把對象賦值給一個變量，方便調用
var pageTitle = document.getElementById('page-title')

getElementsByTagName


//獲取所有的li標籤元素，返回類型爲數組對象
document.getElementsByTagName('li')  
var list = document.getElementsByTagName('li')
//返回第一個<li>中的值
list[0]

訪問元素屬性

var pageTitle = document.getElementById('page-title')
pageTitle.nodename    //返回標籤名稱H1
pageTitle.innerText     //返回標籤文本coldpaly
pageTitle.parentNode  //返回父節點標籤名,比如<body>
pageTitle.previousElementSibing  #返回上個兄弟節點元素
pageTitle.nextElementSibing   #返回下個兄弟節點元素
pageTitle.nextElementSibing.innerText   #返回下個兄弟節點中的文字
 
<ul class='artist-list'>
  <li>jack</li>
  <li>hong</li>
  <li>son</li>
</ul>
var artistList = document.querySelector('.artist-list');
artistList.childNodes  //查看所有子節點的元素，包括標籤和文本
artistList.childElementCount   //查看子節點的元素數, 返回3
artistList.firstElementChild     //返回第一個子節點元素，<li>jack</li>
artistList.lastElementChild     //返回最後一個子節點元素，<li>son</li>
artistList.firstElementChild.innerText    //查看第一個子節點的文本，返回jack
artistList.firstElementChild.innerText = "馬丁"    //修改jack值爲"馬丁"

在文檔中創建並插入新的節點

var newMember = document.createElement('li')  //創建<li>元素節點
var newMemberText =  document.createTextNode('張三'); //創建文本節點
newMember.appendChild(newMemberText)  //把文本節點放在元素節點中
//指定<li>元素節點添加位置,並加在最後。
document.querySelector('.artist-list').appendChild(newMember);  
//刪除剛纔添加的<li>元素節點
document.querySelector('.artist-list').removeChild(newMember);

使用insertBefore，在指定位置上插入節點
例子1

var artistList = document.querySelector('.artist-list');
//在原先第一個<li>前添加<li>節點
artistList.insertBefore(newMember, artistList.firstChild)

例子2

var bandMember = document.createElement('h3')
bandMember.innerText = '樂隊成員'
//在<ul classs="artist-list">..</ul> 上面的兄弟節點加上一行<h3>樂隊成員
artistList.parentNode.insertBefore(bandMember, artistList.previousSibling)

事件

https://www.w3cschool.cn/javascript/js-htmldom-events.html

處理事件的方法

事件定義在script.js中添加如下內容

window.onload = function () {
var btn = document.querySelector('.btn');
btn.onclick = function(){
    console.log('被點了');
};
btn.onmouseover=function () {
    console.log('誰在上面');
};
btn.onmouseout=function () {
    console.log('離開了');
};
};

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。
onload 事件用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。

addEventListener–爲對象綁定事件

事件發生的時候，調用一個函數
windows.onload = function () {
    var btn = document.querySelector('.btn');
    function showMessage() {
     //showMessage()裏可以加一個參數如event, 那麼這裏"被點了"
     //可以替換成event參數，這樣可以返回一個對象。
        console.log('被點了'); 
    }
    btn.addEventListener('click', showMessage, false);
};

事件的傳播

 在一個無序列表中，每一個<li>標籤中都有一個圖像，想實現點擊圖像就能顯示<img>標籤中的alt文本
 <ul class="list-group">
  <li class = "album" >
      <img src='1.jpg' alt='atlas'>
  </li>
  ...
</ul>

方法如下
var listGroup = document.querySelector('.list-group')
function showMessage(event) {
    console.log(event.target.alt);  這個會顯示圖像標籤中<alt>中的文本
}
listGroup.addEventListener('click', showMessage,false);

更改事件傳播方式

var listGroup = document.querySelector('.list-group')
function showMessage(event) {
    console.log('點擊了 url');  //點擊任何一個圖片都會顯示這個文本
}
listGroup.addEventListener('click', showMessage,false);
 
//在一個圖片標籤中加上一個id屬性, 值爲lost，這樣點擊這個圖片時，會顯示"點擊了lost"
var lost = document.getElementById('lost');
function showAnotherMessage(event) {
    console.log('點擊了 lost');
}
lost.addEventListener('click', showAnotherMessage, false);
說明，當最後一個參數是false時，事件傳遞方式是從內到外；當爲true時，方式爲從外到內
所以此時點擊lost圖片是，控制檯顯示
點擊了 lost
點擊了 ul   
先觸發<img>中的事件，顯示"點擊了 lost"；然後到<li>，無事件；最後到<ul>中的事件，顯示“點擊了ul"
 
如果把listGroup.addEventListener中的true改爲false，那麼顯示順序爲
點擊了 ul
點擊了 lost

停止傳播事件

var listGroup = document.querySelector('.list-group')
function showMessage(event) {
    console.log('點擊了 url'); 
    event.stopPropagation();
}
listGroup.addEventListener('click', showMessage,true);
 
var lost = document.getElementById('lost');
function showAnotherMessage(event) {
    console.log('點擊了 lost');
}
lost.addEventListener('click', showAnotherMessage, false);
 
這樣點擊lost圖片時，只會在控制檯顯示"點擊了url", 因爲現在事件傳播方式是從外到內，
並且使用了event.stopPropagation()來停止傳播事件，所以就不會觸發<img>中的事件

動腦學習筆記-javascript基礎