重點(diǎn) (五) : JavaScript

JavaScript
什么是JavaScript
JavaScript是一門腳本語言,簡(jiǎn)稱JS
JS的常見作用有
給HTML網(wǎng)頁添加動(dòng)態(tài)功能,比如響應(yīng)用戶的各種操作
操縱HTML元素,比如添加、刪除、修改網(wǎng)頁元素

常見的JavaScript函數(shù)
alert(10); 彈框
document.getElementById(‘test’); 根據(jù)ID獲得某個(gè)DOM元素

OC中調(diào)用JavaScipt
如何在OC中調(diào)用JavaScript代碼
使用UIWebView的stringByEvaluatingJavaScriptFromString方法即可

**************************筆記************************


JS語法
1.介紹javascript,對(duì)著ppt

2,介紹js在瀏覽器上的操作
動(dòng)態(tài)的添加一些東西
js寫服務(wù)器代碼---NodeJS
為甚以前不行?
沒有解析器。利用Google的V8的引擎開發(fā)了NodeJS
分析下用js寫服務(wù)器代碼的前景

3、JS的編寫形式
用js寫一個(gè)helloWord
alert("hello world")

利于調(diào)試:
console.log('hello world')
比較下alter和console在調(diào)試的優(yōu)缺點(diǎn)
進(jìn)百度----> console.log 招聘信息

4、js的基本語法

  • 數(shù)據(jù)類型
  • 函數(shù)
  • 對(duì)象
    -----創(chuàng)建代碼
    (1)
    var age = 10; number
    var money = 10.5; number
    var name = "jack"; string
    var name2 = 'rose'; boolean
    *推薦使用單引號(hào)
    <button onclick = "alter("10")">
    var result = true; true false
  • 可以不寫var

打印類型,加深印象:
console.log(typeof age)

(2)字符串的拼接
var prefix = 'I am';
var name = 'jack'
var str = prefix + name + 'sb' + 20;

(3) 字符串與數(shù)字拼接
出題:
var str1 = 10 + 10 + '10';
var str2 = '10' + 10 + 10;
var str3 = '10' + (10 + 10)
var str4 = 10 + '10' + '10'
注意點(diǎn):運(yùn)算從左往右,任何類型與字符串相加都是字符串類型

(4)數(shù)組
var names = []; 比較下js和oc和java的數(shù)組區(qū)別
var names = [10, 20, 'jack', 10.8, true, false];
console.log(names.length)
console.log(names[0])
console.log(typeof names)

var dog = {
name : 'jack',
age : 10
};
console.log(dog.name)
console.log(dog.name + '-' + dog.age)

var dog2 = {
name : 'hhh',
age : 10,
height : 1.55 (身高已經(jīng)超過郭敬明了)
};
console.log ....

(5)函數(shù)
*函數(shù)的定義格式
function 函數(shù)名(參數(shù)列表){
函數(shù)體

函數(shù)沒有返回類型

}
js中定義變量必須用var
加法運(yùn)算
function sum(num1, num2){ 參數(shù)列表不需要標(biāo)明類型
return num1 + num2
}
cosole.log(sum(1, 2))

寫一個(gè)萬能的加法函數(shù)
對(duì)比前面一個(gè),突出新方法
function sum(numbers){
var count = 0;
for(var i = 0; i < numbers.count; i++){
count += numbers[i];
}
return count;
}
改進(jìn)版
function sum(){ arguments
var count = 0;
for (var i = 0; i < arguments.length; i++){
count += arguments[i];
}
return count
}

總結(jié):js非常靈活,有很多寫法,其他語言辦不到

  • 數(shù)據(jù)類型
    number:包括所有的數(shù)字(整數(shù)、小數(shù))
    boolean:正常取值(true 或者 false)
    string: 字符串,可以用雙引號(hào)和單引號(hào)引住內(nèi)容(建議使用單引號(hào))
    object: 對(duì)象類型,(注意:數(shù)組[]也是對(duì)象類型)、{}
  • 函數(shù)
  • 對(duì)象

1.回顧下昨天上的內(nèi)容,強(qiáng)調(diào)必須要掌握J(rèn)S 過一遍上一課js的內(nèi)容

增加函數(shù)的調(diào)用格式: var result = 函數(shù)名(參數(shù)值)

上代碼 名稱:02 - 對(duì)象語法 補(bǔ)充下 函數(shù) function sum(num1, num2){ return num1+num2; } console.log(sum(100, 200)); console.log(typeof sum);

還有一種方式,匿名函數(shù)
var sum = function (num1, num2){
return num1 + num2;
}
console.log(sum(100, 200));
console.log(typeof sum);
對(duì)象: 寫一個(gè)dog var dog = { name : 'aaa', age : 20 }; 提出問題,狗對(duì)象只有屬性沒有行為: var dog = { name : 'aaa', age : 20, run : function(){ console.log('run'); }; eat : function{ console.log('eat'); }; }; 提出問題,如何調(diào)用狗對(duì)象的方法? dog.run(); dog.eat(); 傳肉進(jìn)去---狗跑起來,吃起來

提出問題?哪只狗跑起來,如何用name 通過OC比較如何調(diào)用成員變量, 引出this this在這里代表狗對(duì)象
當(dāng)前函數(shù)屬于哪個(gè)對(duì)象,this就代表這個(gè)對(duì)象

提出這種對(duì)象存在問題,不能量產(chǎn)? function Dog(){ 有點(diǎn)類的感覺 console.log('Dog------') } Dog(); console.log(typeof Dog);

引出 new 普通的函數(shù)調(diào)用 var dog1= Dog();  調(diào)用了構(gòu)造函數(shù)Dog(),創(chuàng)建了一只新的Dog對(duì)象 var dog1 = new Dog(); [[Dog alloc] init];

---->通過創(chuàng)建對(duì)象 function Dog() = { this.name = null; this.age = null; this.run = function(){ console.log(this.name + '-run'); }; this.eat = function(meat){ console.log(this.name + '-eat-' + meat); };
    
}

var dog1 = new Dog(); var dog2 = new Dog();

dog1.name = 'wangcai'; dog1.run();

dog2.run();

增加參數(shù) function Dog(name, age) = { this.name = name; this.age = age; this.run = function(){ console.log(this.name + '- run'); }; this.eat = function(meat){ console.log(this.name + '-eat-' + meat);

}; };

var dog1 = new Dog('wangcai', 5); var dog2 = new Dog('hhhhh'); dog1.run(); dog2.run();

如果沒有傳值,則會(huì)是undifiend console.log(dog1.age + '-' + dog2.age);

JS中比較靈活的寫法: || && a || b a && b 提出需求: var name1 = 'name1'; var name2 = 'name2'; var name3 = 'name3'; 找出這三個(gè)中第一個(gè)有值的賦給name 常規(guī)的做法 var name if (name1){ name = name1; }else if(name2){ name = name2; }else if(name3){ name = name3; } 新做法 var name = name1 || name2 || name3; js中||運(yùn)算符的返回值:返回第一個(gè)為真(有值就為真)的值

var age = 20; if (age > 20){ console.log('可以結(jié)婚了!!!'); }

(age >= 20) && console.log('可以結(jié)婚了');


JS語法
要想把我們學(xué)習(xí)的JS運(yùn)用到iOS開發(fā)中,我們還需要學(xué)習(xí)兩個(gè)知識(shí)點(diǎn):
兩個(gè)內(nèi)置對(duì)象:系統(tǒng)自帶的對(duì)象,全局對(duì)象
內(nèi)置對(duì)象:window 和 document

1.window的特點(diǎn):
1> 所有全局變量都是它的屬性;
2> 所有全局函數(shù)都是它的函數(shù);

var age = 20;

function run(){
var age = 20;
console.log('---run----');
}

run();
window.run();
window.run();
window.run();

console.log(age);
console.log(window.age);
把a(bǔ)ge變成局部變量
做出區(qū)別

alert('10');
window.alert('10');
當(dāng)前函數(shù)屬于哪個(gè)對(duì)象,this就代表這個(gè)對(duì)象
function Dog(){
console.log(this);
}

Dog(); window.dog
new Dog(); 通過構(gòu)造函數(shù)產(chǎn)生了一個(gè)新的對(duì)象,this代表這個(gè)狗對(duì)象

function Dog(){
this.alter('10');
}
Dog();

new Dog();

var age = 20;
function Dog(){
console.log(this.age);
}
Dog();
new Dog();

alter('10'); 阻塞操作
window.location.href = ''; 通過這句代碼改變?yōu)g覽器的指向,實(shí)現(xiàn)用JS代碼自動(dòng)跳轉(zhuǎn);
location.herf = '';

總結(jié)筆記:

掌握對(duì)象的函數(shù)調(diào)用:
var result = 對(duì)象.函數(shù)名(參數(shù)值);

2.內(nèi)置對(duì)象 - window
1> window的特點(diǎn)
所有全局變量都是它的變量
所有全局函數(shù)都是它的函數(shù)
2> 通過JS代碼動(dòng)態(tài)跳轉(zhuǎn)頁面
location.href = 'http://www.baidu.com';
window.loction.href = 'http://www.baidu.com';


回顧上節(jié)課上的內(nèi)容 打開 w3cschool 可以學(xué)習(xí)更多東西

1.document的用途: 1> 可以用來獲得網(wǎng)頁中的任何一個(gè)元素 2> 可以創(chuàng)建HTML元素 3> ....
document.write('');寫一些內(nèi)容,展示給學(xué)生看 * 測(cè)試下內(nèi)容會(huì)不會(huì)被覆蓋
提出需求: 1.點(diǎn)擊按鈕,改變圖片; 升級(jí): 2.點(diǎn)擊按鈕,互相切換圖片;
通過getElementByID 引出 getElementsByTagName getElementsByClassName getElementsByname 分別切換圖片 function btnClick(){ 獲取圖片對(duì)象 var icon = document.getElementById('icon'); var icon = document.getElementsByTagName('img')[0]; var icon = document.getElementsByClassName('tom')[0]; var icon = document.getElementsByName('cat')[0];

切換圖片
if (icon.src.indexof('test.png') == -1){
    icon.src = 'test.png';
}else{
    icon.src = 'other.png';
}

} ID太多也不好,對(duì)比iOS盡量少使用tag,舉例子:有些公司通過文檔限定tag的取值

另一種做法: 全部用JS獲取 *注意點(diǎn):調(diào)用方式

3.其他的方法 1> 點(diǎn)擊圖片 var icon = document.getElementByTagName('img'); icon.onclick = function(){ console.log('點(diǎn)擊了圖片'); }; 2> 點(diǎn)擊body document.body.onclick = function (){ console.log('點(diǎn)擊了body'); }; 3> 鼠標(biāo)事件 icon.onmousemove = function(){ console.log('鼠標(biāo)在圖片上移動(dòng)'); }; icon.onmouseover = function(){ console.log('鼠標(biāo)滑入圖片'); }; icon.onmouseout = function(){ console.log('鼠標(biāo)滑出圖片'); };

icon.onkeyDown
icon.onkeyUp
4.倒計(jì)時(shí)函數(shù)


JS在iOS中的簡(jiǎn)單運(yùn)用
一、在當(dāng)前應(yīng)用中顯示某個(gè)網(wǎng)頁

  1. 在storyboard中拖入webView,設(shè)置約束
  2. 拖線
  3. 在viewDidLoad中加載網(wǎng)頁
    [self.webview loadHtmlString:@"<img src="123.png">" baseURL:nil];
    4.加載某個(gè)特定網(wǎng)頁
    NSAppTransportSecurity
    NSAllowsArbitraryLoads
    *解析請(qǐng)求原理
    移動(dòng)客戶端 (發(fā)送請(qǐng)求,返回網(wǎng)頁代碼 )服務(wù)器

三步加載一個(gè)網(wǎng)頁
http://v3.bootcss.com
(有的公司應(yīng)用很復(fù)雜,內(nèi)部就三句代碼)
*響應(yīng)緩慢,應(yīng)該在前后加菊花,瀏覽webView的代理方法
*做筆記:
響應(yīng)式設(shè)計(jì)、響應(yīng)式布局(先百度):@media

5.提出需求:希望iOS端顯示簡(jiǎn)潔的風(fēng)格,把廣告去除
*設(shè)置代理
網(wǎng)頁加載完畢后調(diào)用(在這個(gè)方法中才能拿到所有的HTML元素)
webViewDidFinishedLoad
*提出如何在OC中調(diào)用js

  • 首先通過動(dòng)態(tài)的切入腳本,在網(wǎng)頁上測(cè)試刪除
    var footer = document.getElementsByTagName('footer')[0]; footer.remove();
    連著寫
  • 在OC中執(zhí)行js代碼
    *引導(dǎo)思考:在oc中執(zhí)行js,要通過webView
    引出:stringByEvaluatingJavaScriptFromString
  • 返回值,返回值的作用?
    function test() {return 10;} test();
    打印返回值:執(zhí)行完最后一句js得到的值
    如果慢的話,執(zhí)行:www.baidu.com
    用途:
    document.getElementById('userName').value;
    拿到用戶的賬號(hào)等信息,保存在本地沙盒,或者上傳到服務(wù)器
    *舉例子進(jìn)一步說明:
    寫一個(gè)登錄界面:
    抽方法:testLoadHTML;
    加載login.html
    設(shè)置默認(rèn)值:張三,在OC中打印張三
    *最后一個(gè)需求:如果加載公司的網(wǎng)頁,可能一成不變,但是內(nèi)容很多,第一次加載的時(shí)候緩存網(wǎng)頁,寫到沙盒中,方便下次使用
  • 拿到網(wǎng)頁源代碼
  • 判斷沙盒中是否有用代碼
  • 如何拿到網(wǎng)頁用代碼?
    document.getElementsByTagName('html')[0].innerHTML;
    打印:
    引入outerHTML
    寫入沙盒:
    [html writeToFile:... atomically:YES encoding:NSUTF8StringEncoding error:nil];

提出需求:如何在js中調(diào)用OC代碼(目前不說,后面學(xué)多線程的時(shí)候會(huì)使用)

  • 加個(gè) 拍照 按鈕,
    在OC中寫個(gè)拍照方法,在html中如何調(diào)用:
    <button onclick="[self openCamera]">拍照</button> 怎么辦
    在安卓中可以直接調(diào):this.openCamera;

整理筆記:
1> 加載網(wǎng)頁
*加載網(wǎng)頁源代碼
[webView loadHTMLString:@"<img src="123.png">" baseURL:nil];
*加載網(wǎng)頁請(qǐng)求
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://baidu.com"]]];

2> 利用webView執(zhí)行js
[webView stringByEvaluatingJavaScriptFromString:@"JS代碼"];


canvas簡(jiǎn)介

  1. 回顧下上節(jié)課的知識(shí)點(diǎn)
  2. 提出問題:如果執(zhí)行的JS很長(zhǎng)?
    兩次調(diào)用
    拼接
    NSMutableString *js = [NSMutableString string];
    [js appendString:];

[webView stringByEvaluatingJavaScriptFromString:];
*方案:多個(gè)字符串之間用雙引號(hào)隔開
@“”

  1. JS的繪圖技術(shù)
    <canvas></canvas>
    <script>
    獲取畫布
    var canvas = document.getElementsByTagName('canvas')[0];
    獲得上下文
    var ctx = canvas.getContext("2d");
    ctx.beginPath();

ctx.strokeStyle = 'red';
ctx.lineCap = 'round';
ctx.lineWidth = 10;

ctx.moveTo(10, 10);
ctx.lineTo(100, 100);

ctx.lineTo(100, 20);
ctx.closePath();
</script>

如果要更深入學(xué)習(xí)JS,可以百度JS庫
impress


1.用W3C分析JS學(xué)習(xí)重點(diǎn)

  • JS HTML DOM
    利用JS可以進(jìn)行DOM操作

2.代碼演示
<button>顯示</button>
<button>隱藏</button>
<p>444444444444444444444444444<p>

  • 監(jiān)聽按鈕點(diǎn)擊:
    演示在行內(nèi)顯示, var age = 20; alert(age);

  • 在JS中實(shí)現(xiàn)方法:
    function show(){
    先打印
    }

function hide(){
先打印
}

document相當(dāng)于一顆DOM樹

  • 查看一個(gè)對(duì)象里面所有屬性

JS切換圖片
1.換一種方式綁定按鈕 在JS內(nèi)部切換

2.其他事件方法 移動(dòng) 進(jìn)去 出來

其他節(jié)點(diǎn)操作
用外部樣式來寫 測(cè)試: alter(1);
不能外部\內(nèi)部結(jié)合使用 只要script中使用src屬性引用了其他文件,就不能我往里面寫JS

節(jié)點(diǎn)的增刪改查操作

(1) document.write()

(2) var img = document.createElement('img'); img.src = 'images/icon_01.png'; document.body.appendChild(img)

創(chuàng)建多個(gè)標(biāo)簽
(3) 往div中加個(gè)p標(biāo)簽 var div = document.getElementById('content'); var p = document.createElement('p'); 設(shè)置p標(biāo)簽里面的內(nèi)容 p.innerHTML = '123'; div.appendChild(p);

(4) 刪除節(jié)點(diǎn) 刪除一個(gè)節(jié)點(diǎn),要拿到父控件刪除子控件 var mj = document.getElementByClass.. document.body.removeChild(mj)

CRUD
增刪改查

如果父節(jié)點(diǎn)不是body
mj.parentNode.removeChild(mj);
(5) 查看body所有的節(jié)點(diǎn) var len = document.body.childNodes.length; for(var i=0; i<len; i++){ var ele = list[i]; alert(ele.tagName); } 空白也算節(jié)點(diǎn)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡(jiǎn)單...
    舟漁行舟閱讀 7,827評(píng)論 2 17
  • 單例模式 適用場(chǎng)景:可能會(huì)在場(chǎng)景中使用到對(duì)象,但只有一個(gè)實(shí)例,加載時(shí)并不主動(dòng)創(chuàng)建,需要時(shí)才創(chuàng)建 最常見的單例模式,...
    Obeing閱讀 2,097評(píng)論 1 10
  • @轉(zhuǎn)自GitHub 介紹js的基本數(shù)據(jù)類型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou閱讀 1,200評(píng)論 0 0
  • 轉(zhuǎn)載請(qǐng)著名出處 GitHub-TYRMars 文章Github地址 JavaScript基礎(chǔ)知識(shí)剖析 01 01-...
    TYRMars閱讀 585評(píng)論 0 7
  • 今天是教師節(jié)后的第一個(gè)工作日,微信公眾號(hào)“黑芝麻小學(xué)”選擇在這一天向家長(zhǎng)師生推送小學(xué)與玖光年(北京)文化傳播有限公...
    林文斌閱讀 584評(píng)論 0 0