学习ReactNative笔记整理一___JavaScript基础

2023-08-02 22:16:28

学习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"//元素节点的名称

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

码农公寓