学习ReactNative笔记整理一___JavaScript基础
学习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();
学习ReactNative笔记整理一___JavaScript基础的更多相关文章
- javascript笔记整理(对象基础)
一.名词解释 1.基于对象(一切皆对象,以对象的概念来编程) 2.面向对象编程(Object Oriented Programming,OOP) A.对象(JavaScript 中的所有事物都是对象) ...
- shell笔记整理1---vim编译器基础应用(参考鸟哥)
1.linux中的配置文件都已是以ASCII的纯文本的形式存在 2.vim文本编译器. 一般模式:用vi打开的一个文件直接进入的就是一般模式,这个模式可以移动光标和删除字符,复制粘贴等,但是不能比那几 ...
- ReactNative学习笔记(二)基础进阶
一个最简单的HelloWorld页面 先不多解释,直接上代码: import React, { Component } from 'react'; import {AppRegistry, Style ...
- Deep Learning(深度学习)学习笔记整理系列之(五)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning(深度学习)学习笔记整理系列之(八)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning(深度学习)学习笔记整理系列之(七)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning(深度学习)学习笔记整理系列之(六)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning(深度学习)学习笔记整理系列之(四)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning(深度学习)学习笔记整理系列之(三)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
随机推荐
- (摘)DataGuard物理standby管理 - 主备切换
DataGuard物理standby管理 - 主备切换 Dataguard的切换分为两种,switchover和failover. switchover一般用于数据库或硬件升级,这时只需要较短时间中断 ...
- 采购IC应该知道的十大网站
http://www.hcsindex.com (华强北指数网,查价格的)http://www.hqew.com (华强电子网,针对华强北市场)http://www.dzsc.com (维库电子 ...
- 如何修改Qt标准对话框的文字(例如,英文改成中文)
此篇文章参考qtcn论坛整理而成,因为文字和图片是本人亲自组织,所以仍算原创. http://www.qtcn.org/bbs/read-htm-tid-30650.html http://blog. ...
- Qt编程之qrc文件的链接
在Qt里面,.qrc文件是一种类似XML结构的文件,用结构化数据描述应用程序所需要的资源位置,例如图片,应用程序的图标文件等.它最终是与.ui文件类似都被通过Qt提供的命令行工具生成对应的qrc_XX ...
- 转:Android 测试 Appium、Robotium、monkey等框架或者工具对比
原文地址:http://demo.netfoucs.com/u012565107/article/details/36419297# 1. Appium测试 (功能测试,用户接受度测试,黑盒测试) - ...
- 【转】Android将Activity打成jar包供第三方调用(解决资源文件不能打包的问题)
Android中引入第三方Jar包的方法(java.lang.NoClassDefFoundError解决办法) 鼠标右键项目,然后属性,然后java buildpath 然后order and ex ...
- 【 Failed to create the Java Virtual Machine】的2种解决方式
初学Android,下载并安装好了eclipse,ADT和SDK之后,打开Eclipse时,出现: Failed to create the Java Virtual Machine 点击确定,ecl ...
- cf493D Vasya and Chess
D. Vasya and Chess time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- mysql 存储过程:提供查询语句并返回查询执行影响的行数
mysql 存储过程:提供查询语句并返回查询执行影响的行数DELIMITER $$ DROP PROCEDURE IF EXISTS `p_get_select_row_number`$$ CREAT ...
- 解决方案--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 ...
一.名词解释 1.基于对象(一切皆对象,以对象的概念来编程) 2.面向对象编程(Object Oriented Programming,OOP) A.对象(JavaScript 中的所有事物都是对象) ...
1.linux中的配置文件都已是以ASCII的纯文本的形式存在 2.vim文本编译器. 一般模式:用vi打开的一个文件直接进入的就是一般模式,这个模式可以移动光标和删除字符,复制粘贴等,但是不能比那几 ...
一个最简单的HelloWorld页面 先不多解释,直接上代码: import React, { Component } from 'react'; import {AppRegistry, Style ...
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
DataGuard物理standby管理 - 主备切换 Dataguard的切换分为两种,switchover和failover. switchover一般用于数据库或硬件升级,这时只需要较短时间中断 ...
http://www.hcsindex.com (华强北指数网,查价格的)http://www.hqew.com (华强电子网,针对华强北市场)http://www.dzsc.com (维库电子 ...
此篇文章参考qtcn论坛整理而成,因为文字和图片是本人亲自组织,所以仍算原创. http://www.qtcn.org/bbs/read-htm-tid-30650.html http://blog. ...
在Qt里面,.qrc文件是一种类似XML结构的文件,用结构化数据描述应用程序所需要的资源位置,例如图片,应用程序的图标文件等.它最终是与.ui文件类似都被通过Qt提供的命令行工具生成对应的qrc_XX ...
原文地址:http://demo.netfoucs.com/u012565107/article/details/36419297# 1. Appium测试 (功能测试,用户接受度测试,黑盒测试) - ...
Android中引入第三方Jar包的方法(java.lang.NoClassDefFoundError解决办法) 鼠标右键项目,然后属性,然后java buildpath 然后order and ex ...
初学Android,下载并安装好了eclipse,ADT和SDK之后,打开Eclipse时,出现: Failed to create the Java Virtual Machine 点击确定,ecl ...
D. Vasya and Chess time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
mysql 存储过程:提供查询语句并返回查询执行影响的行数DELIMITER $$ DROP PROCEDURE IF EXISTS `p_get_select_row_number`$$ CREAT ...
当我尝试在java中通过ProcessBuilder运行window的cmd命令时出现错误: public static void main(String [] args) throws IOExce ...