學(xué)習(xí)ReactNative筆記一 __JavaScript基礎(chǔ)

學(xué)習(xí)ReactNative筆記一 ___JavaScript基礎(chǔ)

★★★筆記時(shí)間- 2017-1-9 ★★★

前言: 現(xiàn)在跨平臺是一個(gè)趨勢，這樣可以減少開發(fā)和維護(hù)的成本。第一次看是看的ReactNative的網(wǎng)絡(luò)請求，使用的是fetch來使用的，然后深深的被吸引了。這是第一個(gè)整理的學(xué)習(xí)筆記，后續(xù)還有會(huì)更新。

學(xué)習(xí)鏈接地址: https://pan.baidu.com/s/1dFMJtAD 密碼: hs3e

學(xué)習(xí)課程目標(biāo)

  1. 《JavaScript基礎(chǔ)》1小時(shí)27分
  2. 《ECMAScript 新功能》 53分鐘
  3. 《React 基礎(chǔ)》36分鐘
  4. 《React路由》20分鐘
  5. 《React 本地應(yīng)用 1》56分鐘
  6. 《React 本地應(yīng)用 2》46分鐘

一、 JavaScript基礎(chǔ)

1.1 注釋

單行注釋//
多行注釋/***/

1.2 變量

聲明變量:var band;

變量的聲明的條件: 不能以數(shù)字開頭，區(qū)分大小寫。

1.3 數(shù)據(jù)在類型

不需要設(shè)置它的指定的類型

獲取數(shù)據(jù)的類型使用typeof(fullName)結(jié)果string

轉(zhuǎn)換成整型:parseInt

轉(zhuǎn)換成浮點(diǎn):parseFloat

1.4 字符串的處理

字符串參考文檔

設(shè)置字符串: var words = "三個(gè)月的上床睡覺覺"

截取第幾個(gè)字符串:words.charAt(0) "三";第0個(gè)是字符'三'

獲取最后一個(gè)字符:words.charAt(words.length - 1) "覺";使用字符長度減1來得到

字符在字符串的編號是indexOf:words.indexOf("床") 5;床在字符串words中的位置是第5個(gè)

獲取最后一個(gè)字符的位置:words.lastIndexOf("覺") 8;最后一個(gè)覺在字符串中的位置

截取字符串:words.substring(0,3) "三個(gè)月";在words中截取從第0個(gè)開始，取3個(gè)字符;substring參數(shù)：第一個(gè)是從哪里開始，第二個(gè)參數(shù)是多少個(gè)結(jié)束

替換字符串:words.replace("三個(gè)月","XLJ") "XLJ的上床睡覺覺"; replace參數(shù):第一個(gè)為原來的字符串，第二個(gè)參數(shù)是替換成新的字符串

分隔符:words.split(',') ["中和淋濕在床上", "看人間繁華"]

1.5 數(shù)組

數(shù)組的創(chuàng)建:var array = []

數(shù)組是有順序的，查找順序使用:index

trackCD1[0] "長城"

添加數(shù)據(jù)在數(shù)組的最后: push trackCD1.push("開始了","明天美好")

添加數(shù)據(jù)在數(shù)組的最前面:unshift() trackCD1.unshift("我是第一個(gè)","你想怎么樣") 8

刪除數(shù)組中最后一個(gè)元素:pop() trackCD1.pop() "明天美好"

刪除數(shù)組中第一個(gè)元素:shift() trackCD1.shift() "我是第一個(gè)"

刪除某一個(gè)元素:delete delete trackCD1[1] true;只是刪除元素里的值，不會(huì)刪除這個(gè)元素

trackCD1 ["你想怎么樣", undefined × 1, "農(nóng)民", "太陽一天", "Bye-Bye", "開始了"]

徹底刪除某個(gè)元素:splice() trackCD1 ["長城", "農(nóng)民", "太陽一天", "太陽神鳥"] trackCD1.splice(3) ["太陽神鳥"] trackCD1 ["長城", "農(nóng)民", "太陽一天"]

合并數(shù)組:concat

var trackCD2 = ["不可沖破","來吧"] undefined var tracks = trackCD1.concat(trackCD2) undefined tracks ["長城", "農(nóng)民", "不可沖破", "來吧"]

1.6 流程控制:if else

var weather = '晴天';
var temperature = '26';

if ((weather == '晴天') && (temperature <= 26)){
    alert('心情不錯(cuò)');
}else{
    alert("心情糟糕");
}

if ... else if ... else ...

var weather = '晴天1';
var temperature = '26';

if ((weather == '晴天') && (temperature <= 26)){
    alert('心情不錯(cuò)');
}else if (weather == '晴天1') {
    alert('猶豫');
}else{
        alert("心情糟糕");
}

1.7 流程控制:switch

var weatcher = '下雨';
switch (weatcher){
    case '下雨':
        alert("猶豫");
        break;
    case '晴天':
        alert("心情不錯(cuò)");
        break;
    default:
        alert('心情糟糕');
        break;
}

1.8 流程控制:while, continue:跳過當(dāng)前循環(huán)進(jìn)入下一個(gè)循環(huán)

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函數(shù)
function functionName(參數(shù)1，參數(shù)2,...){...具體需要做的事情}

定義一個(gè)函數(shù)
function alertMessage(){
    alert('Hello!');
}

alertMessage();
帶參數(shù)的函數(shù)
function alertMessage(message){
    alert(message);
}

alertMessage('What

2.1 函數(shù)表達(dá)式

var  alertMessage = function (message){
    alert(message);
}

alertMessage('What up!');

2.2 變量的范圍
函數(shù)以外聲明的變量為全局變量
函數(shù)以內(nèi)聲明的變量為內(nèi)部變量
函數(shù)內(nèi)部可以使用外部的變量
函數(shù)外部的變量不可以訪問函數(shù)內(nèi)部的變量


var message = 'Hello world';
var  alertMessage = function (){
    alert(message);
}

alertMessage();

錯(cuò)誤:還沒有定義message_1
var message = 'Hello world';
var  alertMessage = function (){
//    alert(message);
    var message_1 = '我好帥';
}
alert(message_1);
//alertMessage();

2.3 Object對象
屬性:(property)
方法:(method)
除了數(shù)字, 字符串，BOOL值，now,undefine其它的值都是對象

2.4 創(chuàng)建一個(gè)對象

可以通過.或[]的方式來給對象賦值，采用鍵值對的形式.

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 對象里的數(shù)組

var body = {
    formeIn: '2008',
    foundedIn:'中國',
    artistName:['A','B','C','D']
};

console.log(body);

訪問數(shù)組: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: ['中國人','好人中','不會(huì)人','明天']
};

beyond.showArtist = function (){
    for (var i = 0; i < this.artist.length; i++){
        document.writeln(this.artist[i]);
    }
};

beyond.showArtist();

2.8 循環(huán)輸出對象里的屬性

var beyond = {
   formedIn: '1999',
   foundedIn: 'HongKong',
   artist: ['中國人','好人中','不會(huì)人','明天']
};

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文檔樹
根、元素、節(jié)點(diǎn)
父節(jié)點(diǎn):parentNode

<!doctype html> //document根
 <html lang="zh-hans"> //HTML--element元素,節(jié)點(diǎn)是node;html是元素節(jié)點(diǎn);里面的屬性是屬性節(jié)點(diǎn)
<head>
    <meta charset="utf-8">
    <title>測試</title>
</head>

<body>
<h1 id="page-title">Coldplay</h1>
<p>樂隊(duì)成立</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標(biāo)簽來獲取元素

3.3 querySelector 與querySelectorAll

querySelector:返回找到的第一個(gè)元素

querySelectorAll:返回所有找到的元素

3.4 訪問元素的屬性

pageTitle.nodeName
"H1"http://元素節(jié)點(diǎn)的名稱

pageTitle.innerText
"Coldplay"http://元素節(jié)點(diǎn)里面的文字

pageTitle.parentNode
<body>?…?</body>?//元素的父節(jié)點(diǎn)

pageTitle.previousElementSibling
<title>?測試?</title>?//它的上一個(gè)元素的兄弟節(jié)點(diǎn)

pageTitle.nextElementSibling
<p>?樂隊(duì)于什么來年?</p>? //它的下一個(gè)元素的兄弟節(jié)點(diǎn)

//想要輸出節(jié)點(diǎn)的文字，可以添加innerText就可以了

pageTitle.nextElementSibling.innerText
"樂隊(duì)于什么來年"

查看子節(jié)點(diǎn):childNodes

artistList.childNodes
[text]

//節(jié)點(diǎn)的個(gè)數(shù)
artistList.childElementCount
0

//第一個(gè)子節(jié)點(diǎn)

artistList.firstElementChild
null

artistList.firstElementChild.innerText//可以輸出節(jié)點(diǎn)內(nèi)容
//賦值給它
artistList.firstElementChild.innerText = "馬黑暗城"

還有一個(gè)last屬性:artistList.lastElementChild；返回最后一個(gè)元素的子節(jié)點(diǎn)

3.5 在文檔中創(chuàng)建并插入新的節(jié)點(diǎn)

1.創(chuàng)建元素類型的節(jié)點(diǎn):createElement
2.創(chuàng)建文本類型的節(jié)點(diǎn) :createTextNode
3.插入節(jié)點(diǎn):appendChild或insertBefore

var newMember = document.createElement('li')
undefined

//添加文檔到某一個(gè)地方
先去找到它所在的位置，再使用appendChild方法來添加

document.querySelector('.artist-list').appendChild(newMember)
<li>?張三?</li>?

插入到另的地方使用:insertBefore

3.5 insertBefore在指定的位置播入節(jié)點(diǎn)

//刪除

document.querySelector('.artist-list').removeChild(newMember)
<li>?張三?</li>?

//第一個(gè)參數(shù)是需要插入的內(nèi)容，第二參數(shù)是需要插入的節(jié)點(diǎn)位置
artistList.insertBefore(newMember, artistList.firstChild)
<li>?張三?</li>?

3.6 Event處理發(fā)生的事件

事件參數(shù)文檔

處理事件常用的有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('被點(diǎn)擊了!!!')" onmouseover="console.log('誰在我上面?')" onmouseout="console.log('離開了')">一個(gè)按鈕</a>
    <script src="script.js"></script>
</body>
</html>

3.7 用對象的事件處理程序處理發(fā)生的事件

window.onload = function(){

    //獲取按鈕
    var btn = document.querySelector('.btn');
    btn.onclick = function (){
        console.log('被點(diǎn)擊了!!!');
    }

    btn.onmouseover = function (){
        console.log('偏偏在上面!!!');
    }

    btn.onmousemove = function (){
        console.log('離開了!!!');
    }
}

3.8 addEventListener為對象綁定事件

有三個(gè)參數(shù):

第一個(gè)參數(shù):一個(gè)字符串，事件的名稱

第二個(gè)參數(shù):事件發(fā)生以后要做的事情

第三個(gè)參數(shù):事件的捕獲，是一個(gè)BOOL值,默認(rèn)為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('被點(diǎn)擊了!!!');
    }

    btn.onmouseover = function (){
        console.log('偏偏在上面!!!');
    }

    btn.onmousemove = function (){
        console.log('離開了!!!');
    }
    */
}

3.9 事件的傳播
如果為false:為冒泡方式傳播
如果為true:是事件捕獲的方式傳播

4.0 事件停止傳播
event.stopPropagation();

??????如果對你有幫助，或覺得可以。請右上角star一下，這是對我一種鼓勵(lì)，讓我知道我寫的東西有人認(rèn)可，我才會(huì)后續(xù)不斷的進(jìn)行完善。

有任何問題或建議請及時(shí)issues me，以便我能更快的進(jìn)行更新修復(fù)。

Email: marlonxlj@163.com

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 一、JS前言 （1）認(rèn)識JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu))，知道了CSS樣式(也稱為表示)，會(huì)使用HT...
    凜0_0閱讀 2,807評論 0贊 8
  • 感恩祖先的傳承！感恩父母將我撫養(yǎng)長大！感恩同學(xué)的交流讓我知道應(yīng)對某些事件！感恩平臺創(chuàng)辦心連心公益讓我有了機(jī)會(huì)支持他...
    我不叫許仲斌閱讀 162評論 0贊 1
  • 青春是一抹淺淺的醉酒潦香。 蕩漾在素描紙上淡淡的清香，在細(xì)雨綿綿里繚繞飄搖，執(zhí)傘的少女在青色的煙雨朦朧里留下一道清...
    彤華虛妄閱讀 156評論 0贊 0
  • 看到最后，我才知道，一個(gè)人的恨意是多么的強(qiáng)大，大到你死了也不夠，我要你死的身敗名裂，要你得榮譽(yù)都灰飛煙滅。因?yàn)?，?..
    遠(yuǎn)寒閱讀 362評論 2贊 0