学习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 querySelectorquerySelectorAll

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.插入节点:appendChildinsertBefore

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

学习ReactNative笔记整理一___JavaScript基础的更多相关文章

  1. javascript笔记整理(对象基础)

    一.名词解释 1.基于对象(一切皆对象,以对象的概念来编程) 2.面向对象编程(Object Oriented Programming,OOP) A.对象(JavaScript 中的所有事物都是对象) ...

  2. shell笔记整理1---vim编译器基础应用(参考鸟哥)

    1.linux中的配置文件都已是以ASCII的纯文本的形式存在 2.vim文本编译器. 一般模式:用vi打开的一个文件直接进入的就是一般模式,这个模式可以移动光标和删除字符,复制粘贴等,但是不能比那几 ...

  3. ReactNative学习笔记(二)基础进阶

    一个最简单的HelloWorld页面 先不多解释,直接上代码: import React, { Component } from 'react'; import {AppRegistry, Style ...

  4. Deep Learning(深度学习)学习笔记整理系列之(五)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  5. Deep Learning(深度学习)学习笔记整理系列之(八)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  6. Deep Learning(深度学习)学习笔记整理系列之(七)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  7. Deep Learning(深度学习)学习笔记整理系列之(六)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  8. Deep Learning(深度学习)学习笔记整理系列之(四)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  9. Deep Learning(深度学习)学习笔记整理系列之(三)

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

随机推荐

  1. (摘)DataGuard物理standby管理 - 主备切换

    DataGuard物理standby管理 - 主备切换 Dataguard的切换分为两种,switchover和failover. switchover一般用于数据库或硬件升级,这时只需要较短时间中断 ...

  2. 采购IC应该知道的十大网站

    http://www.hcsindex.com  (华强北指数网,查价格的)http://www.hqew.com  (华强电子网,针对华强北市场)http://www.dzsc.com  (维库电子 ...

  3. 如何修改Qt标准对话框的文字(例如,英文改成中文)

    此篇文章参考qtcn论坛整理而成,因为文字和图片是本人亲自组织,所以仍算原创. http://www.qtcn.org/bbs/read-htm-tid-30650.html http://blog. ...

  4. Qt编程之qrc文件的链接

    在Qt里面,.qrc文件是一种类似XML结构的文件,用结构化数据描述应用程序所需要的资源位置,例如图片,应用程序的图标文件等.它最终是与.ui文件类似都被通过Qt提供的命令行工具生成对应的qrc_XX ...

  5. 转:Android 测试 Appium、Robotium、monkey等框架或者工具对比

    原文地址:http://demo.netfoucs.com/u012565107/article/details/36419297# 1. Appium测试 (功能测试,用户接受度测试,黑盒测试) - ...

  6. 【转】Android将Activity打成jar包供第三方调用(解决资源文件不能打包的问题)

    Android中引入第三方Jar包的方法(java.lang.NoClassDefFoundError解决办法) 鼠标右键项目,然后属性,然后java buildpath 然后order and ex ...

  7. 【 Failed to create the Java Virtual Machine】的2种解决方式

    初学Android,下载并安装好了eclipse,ADT和SDK之后,打开Eclipse时,出现: Failed to create the Java Virtual Machine 点击确定,ecl ...

  8. cf493D Vasya and Chess

    D. Vasya and Chess time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. mysql 存储过程:提供查询语句并返回查询执行影响的行数

    mysql 存储过程:提供查询语句并返回查询执行影响的行数DELIMITER $$ DROP PROCEDURE IF EXISTS `p_get_select_row_number`$$ CREAT ...

  10. 解决方案--java执行cmd命令ProcessBuilder--出错Exception in thread "main" java.io.IOException: Cannot run program "dir d:\": CreateProcess error=2(xjl456852原创)

    当我尝试在java中通过ProcessBuilder运行window的cmd命令时出现错误: public static void main(String [] args) throws IOExce ...