學習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) "三";第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"http://元素節點的名稱
pageTitle.innerText
"Coldplay"http://元素節點里面的文字
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();
