JS(JavaScript)
Node.js
什么是Node.js
Node是一个JavaScript运行环境(runtime),是对Google V8引擎进行封装.
Node.js的优势
- 可以作为后台语言
- 单线程
不新增额外线程下,依然可以对任务进行并行处理(采用事件轮询).
多线程耗电快,流量速度快.
- 非阻塞I/O.相当于iOS内多线程,在多个事件切换.
JS就是对Dom树进行增删改查.
JS的书写方式和常用语法
- 页内JS
示例代码:<script> </script> - 外部JS
示例代码:<script> </script>
JS的基本数据
<script type="text/javascript">
//弹框输出
alert('hello world');
//调试输出,信息输出在鼠标右击检查内才能看到.
console.log('调试传输语句');
//基本数据类型,和swift有相似之处,有的甚至完全相同
var a = 10;
var name = 'jack';//(字符串用单引号)
name2 = 'rose';//(语法很随意,不申明变量都是可以的)
var booliOS = true;
var niliOS = null;
//指定数据类型
var cardName = String();
var cardName = new String;
//全部打印值看看不同.??new方式才是创建对象的正确方式.
//数据运算
//字符串拼接
var newName = name + name2;
console.log(newName);
//练习
var str1 = 10+10+'10';???
var str2 = '10'+10+10;???
var str3 = (10+'10')+10;???
console.log(str1,str2,str3);
console.log(tyepof str1,str2,str3);
tyepof关键字获取数据的类型.通过输出证明JS没有基本数据类型全是对象.
结论:
基本数据类型的运算:
1. 运算时从左往右
2. 任何类型的变量与String运算都会被转化为String类型
//数组
var arr = [];
arr.push(20,10.5,'hank',['eeee','18']);
arr.add(20,10.5,'hank',['eeee','18']);//错误,直接语法报错,提示不是一个方法.
console.log(arr);
//for语法
for(var i = 0,i<arr.length,i++) {
console.log(arr[i]);
}//提示在swift3.0去掉了传统for循环改用forin循环.
//for inJS无语法提示
for (var i in arr) {
console.log(arr[i]);//这和iOS语法不同,取i拿到的是角标
}
//Math 库(JS内库)
var numbers = [10,-5,3232,43];
console.log(Math.max.apply(this,numbers));//this代表JS这个内库,numbers代表数组.
//根据最大值写出最小值min.
</script>
百度趣事(简历邮箱).
JS的函数
<script>
//1.1 加法,弱语言,语法很随意.
function sum(num1,num2) {
return num1 + num2;
}
var result = sum(10,20);
console.log(result);
//1.2万能加法
function sum2(numbers){
//变量
var result = 0;
for (var i in numbers) {
result += number[i];
}
return result;
}
var result1 = sum2([10,20,30]);//要传数组进去
console.log(result1);
//3.匿名函数
var res = function () {
console.log('我是匿名函数');
}
//如何调用呢?变量接收
res();
//JS中函数作为参数
function test1 (num1) {
return num1;
}
console.log(sum(test1(10),10));??
//JS中的闭包!!
function test2 (num1) {
return function (num2) {
return num1 + num2;
}
}
//调用
var temp = test2(4);
var temp2 = temp(5);//因为闭包,函数内部函数引用了包裹他的变量,函数销毁了,内部函数还是能引用外部的变量.
//JS中的作用域.
//流程控制语句内不会有单独的作用域.
//但是函数(方法)内部有单独的作用域.
var temp = 'oldTemp';
if(true) {
var temp = 'newtemp';
}
console.log(temp == 'newTemp');//iOS内部不会感染外部,但是JS内是链式的作用域.代码块内会访问外部变量改变其值.
function test () {
var temp = 'newtemp';
}
console.log(temp == 'newTemp');
//JS中没有类(class)的概念,只有对象!
var obj = new Object();
obj.name = 'jack';
obj.click = function () {
alert('我被点击了');
}
//对象的另一种创建方式,属性之间用逗号隔开
var obj1 = {
name : 'jack',
obj.click : function () {
alert('我被点击了');
}
}
</script>
JS对象
<script>
var dog = {
name:'facai',
age:18,
height:1.67,
eat:function () {
console.log('eat');
},
run:function () {
console.log('run');
}
};
//输出属性和行为
console.log(dog.name,dog.age);
dog.eat();
dog.run();
//访问自己本身的属性,通过关键字this访问.this所在的函数属于哪个对象,this就代表哪个对象!!
run:function () {
console.log('run' + this.name);
}
//加参数.类比
run:function (someThing) {
console.log('run' + this.name + someThing);
}
</script>
JS中的构造函数.
<script>
//构造函数
//目的构造一个函数可以多次创建不同的对象
var Dog = function () {
this.name = null;
this.age = null;
//事件吃和跑
this.eat = function (someThing) {
console.log(this.name + 'eat' + someThing);
};
this.run = function () {
console.log(this.name + 'run' + '狗比宫');
};
}
//调用
var dog1 = new Dog();
dog1.name = '小工';
dog1.age = '1';
dog1.eat('shit');
dog1.run();
</script>
JS中的内置对象.
- window
<script>
//第一个作用
// 1.1 window对象作用:全局变量属于window,2全局函数也属于window
var age = 17;
console.log(window.age);//能够打印结果证明全局变量属于window
// 1.2 全局函数属于window对象.alert()等
function Person() {
console.log(this);
}
Person();//全局函数属于window对象
new Person();//通过函数new创建出来新的对象了
//
// 1.3 可以进行动态跳转
alert(0);
window.location.href = 'http://www.baidu.com';//有效
</script>
- document
<script>
// 2 ducument对象作用
// 2.1. 可以动态获取网页的标签
// 2.2. 可以获取到标签进行CRUD
document.write('hello');//书写标签
document.write('<input type = "file">');
document.getElementsByClassName('icon')[0];
document.getElementById('word');
document.getElementsByTagName('button')[0];
</script>
案例
案例1,简单更换图片
//案例1,简单更换图片(HTML部分)
<img class="icon" src="image/img_01.jpg">
<p></p>
<button onclick="changeImg()">更换图片</button>
// 案例1更换图片逻辑(JS部分
function changeImg() {
//修改图片
//获取到图片
var img = document.getElementsByClassName('icon')[0];//class可能有多个对象是个数组
img.src = 'image/img_02.jpg';
}
案例2,隐藏控件
//案例2,隐藏控件(HTML部分)
<img class="icon" src="image/img_01.jpg">
<p id="word">上面的图片</p>
<p></p>
<button>隐藏</button>
// 案例2逻辑(JS部分)
var icon = document.getElementsByClassName('icon')[0];
var p = document.getElementById('word');
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
if (btn.innerText == '隐藏') {
icon.style.display = 'none';
p.style.display = 'none';
btn.innerText = '显示';
alert(0);
} else {
alert(1);
icon.style.display = 'inline-block';
p.style.display = 'block';
btn.innerText = '隐藏';
}
}
案例3,手动轮播图
//案例3,手动轮播图(HTML部分)
<img class="icon" src="image/icon_01.png">
<p></p>
<button>上一张</button>
<button>下一张</button>
// 案例3逻辑(JS部分)
var maxIndex = 9;
var minIndex = 1;
var currentIndex = minIndex;
//获取标签
var icon = document.getElementsByClassName('icon')[0];
var preBtn = document.getElementsByTagName('button')[0];
var nextBtn = document.getElementsByTagName('button')[1];
preBtn.onclick = function () {
if (currentIndex == 1) {
currentIndex = maxIndex;
} else {
currentIndex -= 1;
}
icon.src = 'image/icon_0' + currentIndex +'.png';
}
nextBtn.onclick = function () {
if (currentIndex == 9) {
currentIndex = minIndex;
} else {
currentIndex += 1;
}
icon.src = 'image/icon_0' + currentIndex +'.png';
}
