JavaScript
什么是JavaScript
JavaScript是一門腳本語言，簡稱JS
JS的常見作用有
給HTML網頁添加動態功能，比如響應用戶的各種操作
操縱HTML元素，比如添加、刪除、修改網頁元素
常見的JavaScript函數
alert(10); 彈框
document.getElementById(‘test’); 根據ID獲得某個DOM元素
OC中調用JavaScipt
如何在OC中調用JavaScript代碼
使用UIWebView的stringByEvaluatingJavaScriptFromString方法即可
**************************筆記************************
JS語法
1.介紹javascript，對著ppt
2,介紹js在瀏覽器上的操作
動態的添加一些東西
js寫服務器代碼---NodeJS
為甚以前不行？
沒有解析器。利用Google的V8的引擎開發了NodeJS
分析下用js寫服務器代碼的前景
3、JS的編寫形式
用js寫一個helloWord
alert("hello world")
利于調試：
console.log('hello world')
比較下alter和console在調試的優缺點
進百度----> console.log 招聘信息
4、js的基本語法
- 數據類型
- 函數
- 對象
-----創建代碼
(1)
var age = 10; number
var money = 10.5; number
var name = "jack"; string
var name2 = 'rose'; boolean
*推薦使用單引號
<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) 字符串與數字拼接
出題：
var str1 = 10 + 10 + '10';
var str2 = '10' + 10 + 10;
var str3 = '10' + （10 + 10）
var str4 = 10 + '10' + '10'
注意點：運算從左往右，任何類型與字符串相加都是字符串類型
（4）數組
var names = []; 比較下js和oc和java的數組區別
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 (身高已經超過郭敬明了)
};
console.log ....
（5）函數
*函數的定義格式
function 函數名（參數列表）{
函數體
函數沒有返回類型
}
js中定義變量必須用var
加法運算
function sum(num1, num2){ 參數列表不需要標明類型
return num1 + num2
}
cosole.log(sum(1, 2))
寫一個萬能的加法函數
對比前面一個，突出新方法
function sum(numbers){
var count = 0;
for(var i = 0; i < numbers.count; i++){
count += numbers[i];
}
return count;
}
改進版
function sum(){ arguments
var count = 0;
for (var i = 0; i < arguments.length; i++){
count += arguments[i];
}
return count
}
總結：js非常靈活，有很多寫法，其他語言辦不到
- 數據類型
number:包括所有的數字（整數、小數）
boolean:正常取值（true 或者 false）
string: 字符串，可以用雙引號和單引號引住內容（建議使用單引號）
object: 對象類型，（注意：數組[]也是對象類型）、{} - 函數
- 對象
1.回顧下昨天上的內容，強調必須要掌握JS 過一遍上一課js的內容
增加函數的調用格式： var result = 函數名（參數值）
上代碼 名稱：02 - 對象語法 補充下 函數 function sum(num1, num2){ return num1+num2; } console.log(sum(100, 200)); console.log(typeof sum);
還有一種方式，匿名函數
var sum = function (num1, num2){
return num1 + num2;
}
console.log(sum(100, 200));
console.log(typeof sum);
對象： 寫一個dog var dog = { name : 'aaa', age : 20 }; 提出問題，狗對象只有屬性沒有行為： var dog = { name : 'aaa', age : 20, run : function(){ console.log('run'); }; eat : function{ console.log('eat'); }; }; 提出問題，如何調用狗對象的方法？ dog.run(); dog.eat(); 傳肉進去---狗跑起來，吃起來
提出問題？哪只狗跑起來，如何用name 通過OC比較如何調用成員變量， 引出this this在這里代表狗對象
當前函數屬于哪個對象，this就代表這個對象
提出這種對象存在問題，不能量產？ function Dog(){ 有點類的感覺 console.log('Dog------') } Dog(); console.log(typeof Dog);
引出 new 普通的函數調用 var dog1= Dog(); 調用了構造函數Dog(),創建了一只新的Dog對象 var dog1 = new Dog(); [[Dog alloc] init];
---->通過創建對象 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();
增加參數 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();
如果沒有傳值，則會是undifiend console.log(dog1.age + '-' + dog2.age);
JS中比較靈活的寫法： || && a || b a && b 提出需求： var name1 = 'name1'; var name2 = 'name2'; var name3 = 'name3'; 找出這三個中第一個有值的賦給name 常規的做法 var name if (name1){ name = name1; }else if(name2){ name = name2; }else if(name3){ name = name3; } 新做法 var name = name1 || name2 || name3; js中||運算符的返回值：返回第一個為真（有值就為真）的值
var age = 20; if (age > 20){ console.log('可以結婚了！！！'); }
（age >= 20） && console.log('可以結婚了');
JS語法
要想把我們學習的JS運用到iOS開發中，我們還需要學習兩個知識點：
兩個內置對象：系統自帶的對象，全局對象
內置對象：window 和 document
1.window的特點：
1> 所有全局變量都是它的屬性；
2> 所有全局函數都是它的函數；
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);
把age變成局部變量
做出區別
alert('10');
window.alert('10');
當前函數屬于哪個對象，this就代表這個對象
function Dog(){
console.log(this);
}
Dog(); window.dog
new Dog(); 通過構造函數產生了一個新的對象，this代表這個狗對象
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 = ''; 通過這句代碼改變瀏覽器的指向，實現用JS代碼自動跳轉；
location.herf = '';
總結筆記：
掌握對象的函數調用：
var result = 對象.函數名(參數值);
2.內置對象 - window
1> window的特點
所有全局變量都是它的變量
所有全局函數都是它的函數
2> 通過JS代碼動態跳轉頁面
location.href = 'http://www.baidu.com';
window.loction.href = 'http://www.baidu.com';
回顧上節課上的內容 打開 w3cschool 可以學習更多東西
1.document的用途： 1> 可以用來獲得網頁中的任何一個元素 2> 可以創建HTML元素 3> ....
document.write('');寫一些內容，展示給學生看 * 測試下內容會不會被覆蓋
提出需求: 1.點擊按鈕，改變圖片； 升級： 2.點擊按鈕，互相切換圖片；
通過getElementByID 引出 getElementsByTagName getElementsByClassName getElementsByname 分別切換圖片 function btnClick(){ 獲取圖片對象 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太多也不好，對比iOS盡量少使用tag,舉例子：有些公司通過文檔限定tag的取值
另一種做法： 全部用JS獲取 *注意點：調用方式
3.其他的方法 1> 點擊圖片 var icon = document.getElementByTagName('img'); icon.onclick = function(){ console.log('點擊了圖片'); }; 2> 點擊body document.body.onclick = function (){ console.log('點擊了body'); }; 3> 鼠標事件 icon.onmousemove = function(){ console.log('鼠標在圖片上移動'); }; icon.onmouseover = function(){ console.log('鼠標滑入圖片'); }; icon.onmouseout = function(){ console.log('鼠標滑出圖片'); };
icon.onkeyDown
icon.onkeyUp
4.倒計時函數
JS在iOS中的簡單運用
一、在當前應用中顯示某個網頁
- 在storyboard中拖入webView,設置約束
- 拖線
- 在viewDidLoad中加載網頁
[self.webview loadHtmlString:@"<img src="123.png">" baseURL:nil];
4.加載某個特定網頁
NSAppTransportSecurity
NSAllowsArbitraryLoads
*解析請求原理
移動客戶端 （發送請求，返回網頁代碼 ）服務器
三步加載一個網頁
http://v3.bootcss.com
(有的公司應用很復雜，內部就三句代碼)
*響應緩慢，應該在前后加菊花，瀏覽webView的代理方法
*做筆記：
響應式設計、響應式布局（先百度）：@media
5.提出需求：希望iOS端顯示簡潔的風格，把廣告去除
*設置代理
網頁加載完畢后調用（在這個方法中才能拿到所有的HTML元素）
webViewDidFinishedLoad
*提出如何在OC中調用js
- 首先通過動態的切入腳本，在網頁上測試刪除
var footer = document.getElementsByTagName('footer')[0]; footer.remove();
連著寫 - 在OC中執行js代碼
*引導思考：在oc中執行js,要通過webView
引出：stringByEvaluatingJavaScriptFromString - 返回值，返回值的作用？
function test() {return 10;} test();
打印返回值：執行完最后一句js得到的值
如果慢的話，執行：www.baidu.com
用途：
document.getElementById('userName').value;
拿到用戶的賬號等信息，保存在本地沙盒，或者上傳到服務器
*舉例子進一步說明：
寫一個登錄界面：
抽方法：testLoadHTML;
加載login.html
設置默認值：張三，在OC中打印張三
*最后一個需求：如果加載公司的網頁，可能一成不變，但是內容很多，第一次加載的時候緩存網頁，寫到沙盒中，方便下次使用 - 拿到網頁源代碼
- 判斷沙盒中是否有用代碼
- 如何拿到網頁用代碼？
document.getElementsByTagName('html')[0].innerHTML;
打印：
引入outerHTML
寫入沙盒：
[html writeToFile:... atomically:YES encoding:NSUTF8StringEncoding error:nil];
提出需求：如何在js中調用OC代碼（目前不說，后面學多線程的時候會使用）
- 加個 拍照 按鈕，
在OC中寫個拍照方法，在html中如何調用：
<button onclick="[self openCamera]">拍照</button> 怎么辦
在安卓中可以直接調：this.openCamera;
整理筆記：
1> 加載網頁
*加載網頁源代碼
[webView loadHTMLString:@"<img src="123.png">" baseURL:nil];
*加載網頁請求
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://baidu.com"]]];
2> 利用webView執行js
[webView stringByEvaluatingJavaScriptFromString:@"JS代碼"];
canvas簡介
- 回顧下上節課的知識點
- 提出問題：如果執行的JS很長？
兩次調用
拼接
NSMutableString *js = [NSMutableString string];
[js appendString:];
[webView stringByEvaluatingJavaScriptFromString:];
*方案：多個字符串之間用雙引號隔開
@“”
- JS的繪圖技術
<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>
如果要更深入學習JS，可以百度JS庫
impress
1.用W3C分析JS學習重點
- JS HTML DOM
利用JS可以進行DOM操作
2.代碼演示
<button>顯示</button>
<button>隱藏</button>
<p>444444444444444444444444444<p>
監聽按鈕點擊:
演示在行內顯示, var age = 20; alert(age);在JS中實現方法:
function show(){
先打印
}
function hide(){
先打印
}
document相當于一顆DOM樹
- 查看一個對象里面所有屬性
JS切換圖片
1.換一種方式綁定按鈕 在JS內部切換
2.其他事件方法 移動 進去 出來
其他節點操作
用外部樣式來寫 測試: alter(1);
不能外部\內部結合使用 只要script中使用src屬性引用了其他文件,就不能我往里面寫JS
節點的增刪改查操作
(1) document.write()
(2) var img = document.createElement('img'); img.src = 'images/icon_01.png'; document.body.appendChild(img)
創建多個標簽
(3) 往div中加個p標簽 var div = document.getElementById('content'); var p = document.createElement('p'); 設置p標簽里面的內容 p.innerHTML = '123'; div.appendChild(p);
(4) 刪除節點 刪除一個節點,要拿到父控件刪除子控件 var mj = document.getElementByClass.. document.body.removeChild(mj)
CRUD
增刪改查
如果父節點不是body
mj.parentNode.removeChild(mj);
(5) 查看body所有的節點 var len = document.body.childNodes.length; for(var i=0; i<len; i++){ var ele = list[i]; alert(ele.tagName); } 空白也算節點
