学习ReactNative笔记整理一___JavaScript基础

学习ReactNative笔记整理一___JavaScript基础

★★★笔记时间- 2017-1-9 ★★★

前言: 现在跨平台是一个趋势，这样可以减少开发和维护的成本。第一次看是看的ReactNative的网络请求，使用的是fetch来使用的，然后深深的被吸引了。这是第一个整理的学习笔记，后续还有会更新。

学习链接地址: https://pan.baidu.com/s/1dFMJtAD 密码: hs3e

学习课程目标

1. 《JavaScript基础》1小时27分
2. 《ECMAScript 新功能》 53分钟
3. 《React 基础》36分钟
4. 《React路由》20分钟
5. 《React 本地应用 1》56分钟
6. 《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"//元素节点的名称

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();