关于JS
JS也就是JavaScript，是一种浏览器客户端的脚本语言，给html网页增加动态功能，比如动画，如果想掌握好H5，JS是必须要掌握的。
JS的基本语法
js中，一般以var来定义一个变量，与OC不同，var定义的对象不需要指定类型，会根据对象的内容自动进行判断,如下所示。
var age = 18; //number
var money = 1.82;//number
var name = 'Jack';//string
var name1 = 'Rose'; //string
var result = true; //false boolean
var score = null;//object
而字符串的拼接也和swift一样
//字符串拼接
//运算时从左向右，任何类型的变量与string类型拼接都会被转化为string
var newName = name +"-"+ name1;
var str1 = 10 + 10 + '10' + '10'; //201010
var str2 = '10' + '10' + 10 + 10; //10101010
var str3 = ('10' + 10) + "10" + 10; //10101010
那么我们一般如何调试呐,分为控制台和提示框。
//输出 单引号双引号都行 建议单引号 因为按钮是 OnClick = "" 相当于断点
alert('Hello World');
//调试输出 谷歌浏览器 审查元素-console
console.log("调试输出")
//想知道真实类型
//typeof
console.log(age,money,name,result,score);
console.log(typeof age,typeof money,typeof name,typeof result,typeof score);
数组的基本定义,数组里面可以包含数组，和OC不同，数组里面可以包含不同类型的对象。
var newArr1 = [];
var newArr2 = [10, 05, age,name,result,score,['hahaha','阿萨德']]; //object
//删除数组最后一个元素
newArr2.pop();
//数组中加一个元素
newArr2.push(['jay']);
var newNumbers = [10,-9,232,4554];
//取出最小值
var minNumber1 = Math.min(10,23,34,54);
var minNumber2 = Math.min().apply(null,newNumbers);
//取出最大值
var maxNumber = Math.max(null,newNumbers);
//输出数组中的内容 遍历
for(var i = 0; i<newArr2.length; i++){
console.log(newArr2[i]);
}
//这里的i是索引
for(var i in newArr2){
console.log(i,newArr2[i]);
}
JS的内置对象
window 关于window有两点
1.所有的全局变量都是window的属性
2.所有的全局的函数都是window的函数
//动态跳转
window.location.href = 'http://baidu.com';
location.href = 'http://www.taobao.com';
JS的Dom操作
Dom的用途
Document的用途
1.动态的获取当前网页中的任意一个标签
2.动态的获取到的标签进行crud
create retrieve update delete
//动态插入
document.write('Hello World');
//插入标签
document.write('<input type = "date">');
//插入一张图片
document.write('<img src="img/img01.png>');
DOM的curd
//c create
//增
//1
document.write('HelloWorld');
document.write('<button>')
//2
var div = document.createElement('div');
div.style.backgroundColor = 'red';
div.style.width = '500px';
div.style.height = '300px';
//添加到父标签
document.body.appendChild(div);
//往div中插入一张图片
var img = document.createElement('img');
img.src = 'img/icon.png';
div.appendChild(img);
//向p标签插入东西
var p = document.getElementById('word');
var img2 = document.createElement('img');
img2.src = 'img/icon.png';
p.appendChild(img2);
//r retrieve
//查
//find(document.body);
//function find(object){
// for(var i in object){
// console.log(object[i]);
// }
//}
console.log(document.body.childNodes);
//u update
//改
//拿到对应的标签 做出改变
//d delete
//删
//document.body.removeChild(p);
//拿到当前标签的父标签 再来删除
//p.parentNode.removeChild(p);
//p.remove();
JS语法的灵活性
|| &&
逻辑或 ||
var name1 = 'name1';
var name2 = 'name2';
var name3 = 'name3';
var name4 = 'name4';
var newName = null;
//判断
if(name1){
newName = name1;
}else if(name2){
newName = name2;
}else if(name3){
newName = name3;
}else if(name4){
newName = name4;
}
console.log(newName);
//新做法
newName = name1||name2||name3||name4;
console.log(newName);
//逻辑与 &&
var age = 22;
if(age>20){
console.log('你可以结婚了');
}
//新做法
(age>20)&&console.log('你可以结婚了!!!');
JS中的函数 - 匿名函数
这就是个自己封装的函数
//两个数相加
function sum( number1, number2){
return number1 + number2 ;
}
//调用函数
var result = sum(10,20);
//万能的加法函数
function sum2(numbers){
var count = 0;
for(var i = 0;i<numbers.length;i++){
count+=numbers[i];
}
return count;
}
var numbers = [10,23,46,786,97,78];
var sumResult = sum2(numbers);
//内置数组 arguments
function sum3(){
var count = 0;
for(var i = 0;i<arguments.length;i++){
count += arguments[i];
}
return count;
}
var sumResult3 = sum3(10,23,46,97,78);
产生对象
如何自定义一个对象 带有属性和方法
//this this在哪个对象中就代表哪个对象
//定义一个对象
var dog = {
name : 'wangcai',
age : 4,
height : 1.2,
friend : ['xixi','lili'],
eat: function(something){
console.log(this.name + '---吃' + something);
},
run: function(somewhere){
console.log(this.name + '---跑' +somewhere);
}
};
//调用狗对象的属性
console.log(dog.name,dog.friend);
//调用狗的方法
dog.eat('骨头');
dog.run('公园');
//如何批量产生对象
//构造函数
function Dog(){
this.name = null;
this.height = null;
this.frirens = [];
this.age = null;
this.eat = function(something){
console.log(this.name + '吃' + something);
},
this.run= function(somewhere){
console.log(this.name + '跑' + somewhere);
}
}
//批量产生狗
var dog1 = new Dog();
var dog2 = new Dog();
//赋值
dog1.name = 'xiaohei';
dog1.height = 1.23;
dog1.run('火星');
dog1.friend = ['xiaohua'];
//赋值
dog2.name = 'xiaobai';
dog2.height = 0.53;
dog2.eat('月亮');
dog2.friend = ['xiaohuang'];
//构造函数
function Cat(name,height,age,friends){
this.name = name;
this.height = height;
this.frirens = friends;
this.age = age;
this.eat = function(something){
console.log(this.name + '吃' + something);
},
this.run= function(somewhere){
console.log(this.name + '跑' + somewhere);
}
}
//创建新对象
var cat = new Cat('mi',12,23,['324']);
cat.eat('猫粮');
其他
一些其他关键字
setTimeout("alert('时间到了')",3000);
setTimeout 在某个函数以内执行一个函数，只执行一次
setInteger 让程序每隔一定时间来调用函数一次
鼠标事件
当鼠标进入图片
img.onmouseover = function(){
alert('手指进入图片');
}
当手指在图片上移动
img.onmousemove = function(){}
当鼠标移出图片
img.onmouseout = function(){}
当前页面加载完毕
window.onload = function(){}
canvas 绘制图形
这个canvas和OC中的drawRect类似
canvas
起点
context.moveTo(100,100);
终点
context.lineTo(200,200);
绘制
context.stroke()
设置线条的颜色和宽度
context.strokeStyle = 'red';
context.lineWidth = 5;
填充
context,fillStyle = 'blue';
