【轉】 學習ReactNative筆記整理一___JavaScript基礎
【轉】 學習ReactNative筆記整理一___JavaScript基礎
學習ReactNative筆記整理一___JavaScript基礎
★★★筆記時間- 2017-1-9 ★★★
前言: 現在跨平臺是一個趨勢，這樣可以減少開發和維護的成本。第一次看是看的ReactNative的網路請求，使用的是fetch來使用的，然後深深的被吸引了。這是第一個整理的學習筆記，後續還有會更新。
學習連結地址: https://pan.baidu.com/s/1dFMJtAD 密碼: hs3e
學習課程目標
- 《JavaScript基礎》1小時27分
- 《ECMAScript 新功能》 53分鐘
- 《React 基礎》36分鐘
- 《React路由》20分鐘
- 《React 本地應用 1》56分鐘
- 《React 本地應用 2》46分鐘
一、 JavaScript基礎
1.1 註釋
單行註釋//
多行註釋/***/
1.2 變數
宣告變數:var band;
變數的宣告的條件: 不能以數字開頭，區分大小寫。
1.3 資料在型別
不需要設定它的指定的型別
獲取資料的型別使用typeof(fullName)結果string
轉換成整型:parseInt
轉換成浮點:parseFloat
1.4 字串的處理
字串參考文件
設定字串: var words = "三個月的上床睡覺覺"
擷取第幾個字串:words.charAt(0) "三"
獲取最後一個字元:words.charAt(words.length - 1) "覺";使用字元長度減1來得到
字元在字串的編號是indexOf:words.indexOf("床") 5;床在字串words中的位置是第5個
獲取最後一個字元的位置:words.lastIndexOf("覺") 8;最後一個覺在字串中的位置
擷取字串:words.substring(0,3) "三個月";在words中擷取從第0個開始，取3個字元;substring引數：第一個是從哪裡開始，第二個引數是多少個結束
替換字串:words.replace("三個月","XLJ") "XLJ的上床睡覺覺"
replace引數:第一個為原來的字串，第二個引數是替換成新的字串
分隔符:words.split(',') ["中和淋溼在床上", "看人間繁華"]
1.5 陣列
陣列的建立:var array = []
陣列是有順序的，查詢順序使用:index
trackCD1[0] "長城"
新增資料在陣列的最後: push trackCD1.push("開始了","明天美好")
新增資料在陣列的最前面:unshift() trackCD1.unshift("我是第一個","你想怎麼樣") 8
刪除陣列中最後一個元素:pop() trackCD1.pop() "明天美好"
刪除陣列中第一個元素:shift() trackCD1.shift() "我是第一個"
刪除某一個元素:delete delete trackCD1[1] true;只是刪除元素裡的值，不會刪除這個元素
trackCD1 ["你想怎麼樣", undefined × 1, "農民", "太陽一天", "Bye-Bye", "開始了"]
徹底刪除某個元素:splice() trackCD1 ["長城", "農民", "太陽一天", "太陽神鳥"] trackCD1.splice(3) ["太陽神鳥"] trackCD1 ["長城", "農民", "太陽一天"]
合併陣列:concat
var trackCD2 = ["不可衝破","來吧"] undefined var tracks = trackCD1.concat(trackCD2) undefined tracks ["長城", "農民", "不可衝破", "來吧"]
1.6 流程控制:if else
var weather = '晴天';
var temperature = '26';
if ((weather == '晴天') && (temperature <= 26)){
alert('心情不錯');
}else{
alert("心情糟糕");
}
if ... else if ... else ...
var weather = '晴天1';
var temperature = '26';
if ((weather == '晴天') && (temperature <= 26)){
alert('心情不錯');
}else if (weather == '晴天1') {
alert('猶豫');
}else{
alert("心情糟糕");
}
1.7 流程控制:switch
var weatcher = '下雨';
switch (weatcher){
case '下雨':
alert("猶豫");
break;
case '晴天':
alert("心情不錯");
break;
default:
alert('心情糟糕');
break;
}
1.8 流程控制:while, continue:跳過當前迴圈進入下一個迴圈
var i = 0;
while (i < 10){
i++;
if (i % 2 == 0){
continue;
}
console.log(i);
}
1.9 流程控制: for
var weak = ['星期一','星期二','星期三','星期四','星期五','星期六','星期天'];
for (var i = 0; i < weak.length; i++){
console.log(weak[i]);
}
2.0 function函式
function functionName(引數1，引數2,...){...具體需要做的事情}
定義一個函式
function alertMessage(){
alert('Hello!');
}
alertMessage();
帶引數的函式
function alertMessage(message){
alert(message);
}
alertMessage('What
2.1 函式表示式
var alertMessage = function (message){
alert(message);
}
alertMessage('What up!');
2.2 變數的範圍
函式以外宣告的變數為全域性變數
函式以內宣告的變數為內部變數
函式內部可以使用外部的變數
函式外部的變數不可以訪問函式內部的變數
var message = 'Hello world';
var alertMessage = function (){
alert(message);
}
alertMessage();
錯誤:還沒有定義message_1
var message = 'Hello world';
var alertMessage = function (){
// alert(message);
var message_1 = '我好帥';
}
alert(message_1);
//alertMessage();
2.3 Object物件
屬性:(property)
方法:(method)
除了數字, 字串，BOOL值，now,undefine其它的值都是物件
2.4 建立一個物件
可以通過.或[]的方式來給物件賦值，採用鍵值對的形式.
var body = {};
body.formedIn = '2008';
body['name'] = '中國';
console.log(body);
var body = {formeIn:'2008', bodyName:'中國'};
//body.formedIn = '2008';
//body['name'] = '中國';
console.log(body);
2.5 物件裡的陣列
var body = {
formeIn: '2008',
foundedIn:'中國',
artistName:['A','B','C','D']
};
console.log(body);
訪問陣列:body.artistName[0] "A"
2.6 更新與刪除物件裡的屬性的方法是一樣的;刪除:delete
body.foundedIn = '美國'
"美國"
body
Object {formeIn: "2008", foundedIn: "美國", artistName: Array[4]}
delete body.foundedIn
true
body.foundedIn
undefined
2.7 為物件新增方法:method
var beyond = {
formedIn: '1999',
foundedIn: 'HongKong',
artist: ['中國人','好人中','不會人','明天']
};
beyond.showArtist = function (){
for (var i = 0; i < this.artist.length; i++){
document.writeln(this.artist[i]);
}
};
beyond.showArtist();
2.8 迴圈輸出物件裡的屬性
var beyond = {
formedIn: '1999',
foundedIn: 'HongKong',
artist: ['中國人','好人中','不會人','明天']
};
beyond.showArtist = function (){
for (var i = 0; i < this.artist.length; i++){
document.writeln(this.artist[i]);
}
};
beyond.showArtist();
var property;
for (property in beyond){
if (typeof beyond[property] !== 'function'){
console.log(beyond[property]);
}
}
console.log(beyond);
2.9 Dom操作文件的介面
3.0 Dom文件樹
根、元素、節點
父節點:parentNode
<!doctype html> //document根
<html lang="zh-hans"> //HTML--element元素,節點是node;html是元素節點;裡面的屬性是屬性節點
<head>
<meta charset="utf-8">
<title>測試</title>
</head>
<body>
<h1 id="page-title">Coldplay</h1>
<p>樂隊成立</p>
<script>
</script>
<script src="script.js"></script>
</body>
3.1 獲取文件中的元素:getElementById
var pageTitle = document.getElementById('page-title')
undefined
pageTitle
<h1 id="page-title">Coldplay</h1>
3.2 getElementsByTagName:使用html標籤來獲取元素
3.3 querySelector 與querySelectorAll
querySelector:返回找到的第一個元素
querySelectorAll:返回所有找到的元素
3.4 訪問元素的屬性
pageTitle.nodeName
"H1"//元素節點的名稱
pageTitle.innerText
"Coldplay"//元素節點裡面的文字
pageTitle.parentNode
<body>…</body>//元素的父節點
pageTitle.previousElementSibling
<title>測試</title>//它的上一個元素的兄弟節點
pageTitle.nextElementSibling
<p>樂隊於什麼來年</p> //它的下一個元素的兄弟節點
//想要輸出節點的文字，可以新增innerText就可以了
pageTitle.nextElementSibling.innerText
"樂隊於什麼來年"
檢視子節點:childNodes
artistList.childNodes
[text]
//節點的個數
artistList.childElementCount
0
//第一個子節點
artistList.firstElementChild
null
artistList.firstElementChild.innerText//可以輸出節點內容
//賦值給它
artistList.firstElementChild.innerText = "馬黑暗城"
還有一個last屬性:artistList.lastElementChild ；返回最後一個元素的子節點
3.5 在文件中建立並插入新的節點
1.建立元素型別的節點:
createElement
2.建立文字型別的節點 :createTextNode
3.插入節點:appendChild或insertBefore
var newMember = document.createElement('li')
undefined
//新增文件到某一個地方
先去找到它所在的位置，再使用appendChild方法來新增
document.querySelector('.artist-list').appendChild(newMember)
<li>張三</li>
插入到另的地方使用:insertBefore
3.5 insertBefore在指定的位置播入節點
//刪除
document.querySelector('.artist-list').removeChild(newMember)
<li>張三</li>
//第一個引數是需要插入的內容，第二引數是需要插入的節點位置
artistList.insertBefore(newMember, artistList.firstChild)
<li>張三</li>
3.6 Event處理髮生的事件
事件引數文件
處理事件常用的有3種方法:
<!doctype html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<titile>Coldplay</titile>
<style> </style>
</head>
<body>
<a href="#" class="btn" onclick="console.log('被點選了!!!')" onmouseover="console.log('誰在我上面?')" onmouseout="console.log('離開了')">一個按鈕</a>
<script src="script.js"></script>
</body>
</html>
3.7 用物件的事件處理程式處理髮生的事件
window.onload = function(){
//獲取按鈕
var btn = document.querySelector('.btn');
btn.onclick = function (){
console.log('被點選了!!!');
}
btn.onmouseover = function (){
console.log('偏偏在上面!!!');
}
btn.onmousemove = function (){
console.log('離開了!!!');
}
}
3.8 addEventListener為物件繫結事件
有三個引數:
第一個引數:一個字串，事件的名稱
第二個引數:事件發生以後要做的事情
第三個引數:事件的捕獲，是一個BOOL值,預設為false
window.onload = function(){
//獲取按鈕
var btn = document.querySelector('.btn');
function showMessage (event){
console.log(event);
}
btn.addEventListener('click', showMessage,false);
/*
btn.onclick = function (){
console.log('被點選了!!!');
}
btn.onmouseover = function (){
console.log('偏偏在上面!!!');
}
btn.onmousemove = function (){
console.log('離開了!!!');
}
*/
}
3.9 事件的傳播
如果為false:為冒泡方式傳播
如果為true:是事件捕獲的方式傳播
4.0 事件停止傳播
event.stopPropagation();