iOS全棧之路，再不跟上你就low了
2016-09-19 本文已影响6227人
子祖
其实iOS早就已经不火了，现在随便发个招聘每天都有几百份简历，所以我打算通过这个教程让某部分人走上救赎之路，这次我主要想分享通过JS中的React Native和Node.js帮大家打通前后端，保持竞争力，只要你认真跟着学习，10天可以让你有一个质的改变，下面先发一波基础教程，还是老规矩，代码不要敲，复制到sublime或者webstorm里面，直接看打印就好，反正谁敲谁sb，太打消积极性了，后面直接上项目，如果有人零基础的，也可以留言，我想办法补一些更基础的教程
如果还有人不懂什么是sublime和webstorm可以自行百度去下载一下
JS的基础语法
语法是要来查阅和看的，千万别去敲那么傻，看到不懂再回来看到
下面的语法都是把一本书厚的东西精炼出来的，都是精华，多看！多思考！
1.打印
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--页内JS-->
<script>
// 输出 --> 弹窗输出 阻断式操作
alert("Hello World!");
// NSLog();
console.log('你好,世界');
console.log('你好,世界');
console.log('你好,世界');
</script>
</head>
<body>
<!--
JS中字符串可以用'' 也可以用"", 建议用''
-->
<button onclick="alert('点你玩!')">点我啊</button>
</body>
</html>
2.基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 1. 基本的数据类型 let 常量 var 变量
var name = 'jack', // string
name2 = 'rose'; // string
var age = 20; // number
var money = 10.999; // number
var result = true; // boolean
var score = undefined; // 未定义 undefined
var numbers = null; // object
// 1.1 输出
// console.log(name, name2, age, money, result, score, numbers);
// 1.2 判断真实的类型 --> typeof
// console.log(typeof name,typeof name2,typeof age,typeof money,typeof result,typeof score,typeof numbers);
// 1.3 运算 +-*/ % ... 不同类型之间的运算
var newName = name + '-' + name2 + '在一起了!';
// console.log(newName);
// JS中运算都是从左到右, 任何类型只要与String类型拼接,都会被强制转为String类型
var str1 = 10 + '10' + 10; // 101010
var str2 = (10 + 10) + '10'; // 2010
var str3 = ('10' + '10') + '10'; // 101010
// console.log(str1, str2, str3);
// 2. JS中的对象 {}字典 []数组
// 2.1 数组 new Array()
var arr = [10, -10, name, name2, result, [21, '哈哈哈']];
// console.log(arr, typeof arr);
// 2.2 获取数组的长度
// console.log(arr.length);
// 2.3 取值
// console.log(arr[4]);
// 2.4 遍历 $.each()
// for(var i=0; i<arr.length; i++){
// console.log(arr[i]);
// }
// for(var i in arr){
// console.log(i, arr[i]);
// }
// 2.5 数组的其他方法和属性
// 添加和删除 pop push
arr.pop(); // 删除最后一个元素
arr.push(‘学习React Native');
// for(var i in arr){
// console.log(i, arr[i]);
// }
// 3.类库 Math
var number = [1,23,4,56,8,9];
// var minValue = Math.min(2,3,4,5,6,7);
var minValue = Math.min.apply(null, number);//参数1：是你调用这个函数的对象，传null也是可以的 参数2:数组
var maxValue = Math.max.apply(null, number);
console.log(minValue, maxValue);
</script>
</head>
<body>
</body>
</html>
3.函数
<!DOCTYPE html>
<html lang="en">
<!--
function 函数名(参数列表){
函数体
return 返回值
}
-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 执行一个匿名的闭包, 一进来就会调用
(function () {
// 1. 常规的函数
// 1.1 运算
function sum(num1, num2) {
return num1 + num2;
}
// 1.2 调用
var result = sum(10, 20);
// console.log(result);
// 2. 复杂的函数
function sum1(numbers) {
console.log(typeof numbers);
// 2.1 过滤
if(typeof numbers !== 'object') return;
// 2.2 运算
// alert(0);
var add = 0;
for(var i=0; i<numbers.length; i++){
add += numbers[i];
}
return add;
}
// 2.2 调用
var result1 = sum1([1,2,3,4,5]);
// console.log(result1);
// 3. 函数内部有内置数组 arguments
function sum2() {
// 3.1 过滤
// if(typeof numbers !== 'object') return;
// 3.2 运算
var add = 0;
for(var i=0; i<arguments.length; i++){
add += arguments[i];
}
return add;
}
// 3.3 调用
var result2 = sum2(2,2,2,2,2,2,2,2, '张三');
// console.log(result2);
// 4. 匿名函数 --> 没有函数名
var result3 = function () {
console.log('我是一个匿名函数');
};
// 4.1 调用
result3();
// 5.闭包
})();
</script>
</head>
<body>
</body>
</html>
4.对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
// this:
// this所在的函数属于哪个对象, this就代表这个对象
// 1. 产生一个对象 {} [] ---> 实例化一个对象 (属性 和 方法) --> 数据的传递
var dog = {
// 属性
name: 'wangCai',
age: 16,
height: 1.55,
dogFriends:['aHuang', 'lily'],
// 方法(函数)
eat: function (someThing) {
console.log(this.name + '吃' + someThing.food);
},
run: function (someWhere) {
console.log(this.name + '跑' + someWhere);
}
};
// 1.1 打印
// console.log(dog);
// 1.2 调用
dog.name = '黄黄'; // set
console.log('这条狗叫:'+ dog.name + ',年龄:'+dog.age);
dog.eat({'food': '骨头'});
dog.run('公园');
</script>
</head>
<body>
</body>
</html>
5.面向对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 构造函数 ---> alloc init
function Dog() {
console.log('我是不是构造函数呢?');
}
// 普通的调用 --> 不是
Dog();
// 升级成为构造函数 －－》 new
var dog1 = new Dog();
var dog2 = new Dog();
console.log(dog1, dog2);
</script>
</head>
<body>
</body>
</html>
6.验证是否同一对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/person.js"></script>
<script>
// 产生一个对象
var p1 = new Person();
var p2 = new Person();
p1.name = '张三';
p1.age = 20;
p1.eat('花生');
p2.name = '李四';
p2.age = 1;
p2.eat('奶');
console.log(p1, p2);
</script>
</head>
<body>
</body>
</html>
7.内置对象window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window</title>
<script>
/*
window(内置对象)作用:
1. 所有的"全局"变量都是window的属性, 所有的"全局"函数都是window的方法
*/
// 全局变量
var name = '张三';
// console.log(name);
// console.log('----'+ window.name);
// 全局的函数
function Dog() {
// 局部的变量
var age = 18;
console.log(window.age);
}
Dog();
window.Dog();
alert('换界面');
// window.location.href = 'http://www.baidu.com';
function Test() {
console.log(this);
}
Test(); // window
new Test(); // Test{}
/*
window(内置对象)作用:
动态的跳转,(OC和JS交互,原理都是在这个)
*/
function changeToBaidu() {
// alert(0);
window.location.href = 'http://www.baidu.com';
}
</script>
</head>
<body>
<button onclick="changeToBaidu()”>Baidu</button>
</body>
</html>
8.内置对象document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<script>
/*
document作用:
1.可以动态的获取当前页面中所有的标签
2.对拿到的标签进行CRUD(增删改查)操作
*/
// 写入页面
document.write('Hello World!');
document.write('<input type="date">');
</script>
</head>
<body>
</body>
</html>
我是子祖，来了就点个赞再走，喜欢就关注我，我还会陆续更新更多项目让大家去练手，或者你有什么语言想了解的都可以和我聊聊！
