關(guān)于JS
JS也就是JavaScript筛璧，是一種瀏覽器客戶端的腳本語(yǔ)言，給html網(wǎng)頁(yè)增加動(dòng)態(tài)功能惹恃，比如動(dòng)畫(huà)夭谤，如果想掌握好H5，JS是必須要掌握的巫糙。
JS的基本語(yǔ)法
js中朗儒，一般以var來(lái)定義一個(gè)變量，與OC不同，var定義的對(duì)象不需要指定類型醉锄，會(huì)根據(jù)對(duì)象的內(nèi)容自動(dòng)進(jìn)行判斷,如下所示乏悄。
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一樣
//字符串拼接
//運(yùn)算時(shí)從左向右，任何類型的變量與string類型拼接都會(huì)被轉(zhuǎn)化為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
那么我們一般如何調(diào)試吶,分為控制臺(tái)和提示框恳不。
//輸出 單引號(hào)雙引號(hào)都行 建議單引號(hào) 因?yàn)榘粹o是 OnClick = "" 相當(dāng)于斷點(diǎn)
alert('Hello World');
//調(diào)試輸出 谷歌瀏覽器 審查元素-console
console.log("調(diào)試輸出")
//想知道真實(shí)類型
//typeof
console.log(age,money,name,result,score);
console.log(typeof age,typeof money,typeof name,typeof result,typeof score);
數(shù)組的基本定義,數(shù)組里面可以包含數(shù)組檩小，和OC不同，數(shù)組里面可以包含不同類型的對(duì)象烟勋。
var newArr1 = [];
var newArr2 = [10, 05, age,name,result,score,['hahaha','阿薩德']]; //object
//刪除數(shù)組最后一個(gè)元素
newArr2.pop();
//數(shù)組中加一個(gè)元素
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);
//輸出數(shù)組中的內(nèi)容 遍歷
for(var i = 0; i<newArr2.length; i++){
console.log(newArr2[i]);
}
//這里的i是索引
for(var i in newArr2){
console.log(i,newArr2[i]);
}
JS的內(nèi)置對(duì)象
window 關(guān)于window有兩點(diǎn)
1.所有的全局變量都是window的屬性
2.所有的全局的函數(shù)都是window的函數(shù)
//動(dòng)態(tài)跳轉(zhuǎn)
window.location.;
location.;
JS的Dom操作
Dom的用途
Document的用途
1.動(dòng)態(tài)的獲取當(dāng)前網(wǎng)頁(yè)中的任意一個(gè)標(biāo)簽
2.動(dòng)態(tài)的獲取到的標(biāo)簽進(jìn)行crud
create retrieve update delete
//動(dòng)態(tài)插入
document.write('Hello World');
//插入標(biāo)簽
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';
//添加到父標(biāo)簽
document.body.appendChild(div);
//往div中插入一張圖片
var img = document.createElement('img');
img.src = 'img/icon.png';
div.appendChild(img);
//向p標(biāo)簽插入東西
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
//改
//拿到對(duì)應(yīng)的標(biāo)簽 做出改變
//d delete
//刪
//document.body.removeChild(p);
//拿到當(dāng)前標(biāo)簽的父標(biāo)簽 再來(lái)刪除
//p.parentNode.removeChild(p);
//p.remove();
JS語(yǔ)法的靈活性
|| &&
邏輯或 ||
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('你可以結(jié)婚了');
}
//新做法
(age>20)&&console.log('你可以結(jié)婚了!!!');
JS中的函數(shù) - 匿名函數(shù)
這就是個(gè)自己封裝的函數(shù)
//兩個(gè)數(shù)相加
function sum( number1, number2){
return number1 + number2 ;
}
//調(diào)用函數(shù)
var result = sum(10,20);
//萬(wàn)能的加法函數(shù)
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);
//內(nèi)置數(shù)組 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);
產(chǎn)生對(duì)象
如何自定義一個(gè)對(duì)象 帶有屬性和方法
//this this在哪個(gè)對(duì)象中就代表哪個(gè)對(duì)象
//定義一個(gè)對(duì)象
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);
}
};
//調(diào)用狗對(duì)象的屬性
console.log(dog.name,dog.friend);
//調(diào)用狗的方法
dog.eat('骨頭');
dog.run('公園');
//如何批量產(chǎn)生對(duì)象
//構(gòu)造函數(shù)
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);
}
}
//批量產(chǎn)生狗
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'];
//構(gòu)造函數(shù)
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);
}
}
//創(chuàng)建新對(duì)象
var cat = new Cat('mi',12,23,['324']);
cat.eat('貓糧');
其他
一些其他關(guān)鍵字
setTimeout("alert('時(shí)間到了')",3000);
setTimeout 在某個(gè)函數(shù)以內(nèi)執(zhí)行一個(gè)函數(shù)规求，只執(zhí)行一次
setInteger 讓程序每隔一定時(shí)間來(lái)調(diào)用函數(shù)一次
鼠標(biāo)事件
當(dāng)鼠標(biāo)進(jìn)入圖片
img.onmouseover = function(){
alert('手指進(jìn)入圖片');
}
當(dāng)手指在圖片上移動(dòng)
img.onmousemove = function(){}
當(dāng)鼠標(biāo)移出圖片
img.onmouseout = function(){}
當(dāng)前頁(yè)面加載完畢
window.onload = function(){}
canvas 繪制圖形
這個(gè)canvas和OC中的drawRect類似
canvas
起點(diǎn)
context.moveTo(100,100);
終點(diǎn)
context.lineTo(200,200);
繪制
context.stroke()
設(shè)置線條的顏色和寬度
context.strokeStyle = 'red';
context.lineWidth = 5;
填充
context,fillStyle = 'blue';
