JavaScript

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("helloworld")

 

利于调试：

console.log('helloworld')

比较下alter和console在调试的优缺点

进百度----> console.log招聘信息

 

4、js的基本语法

* 数据类型

* 函数

* 对象

-----创建代码

(1)

var age = 10; number

var money = 10.5;  number

var name = "jack"; string

varname2 = '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

加法运算

functionsum(num1, num2){ 参数列表不需要标明类型

    return num1 + num2

}

cosole.log(sum(1, 2))

 

写一个万能的加法函数

对比前面一个，突出新方法

function sum(numbers){

    varcount = 0;

    for(var i = 0; i < numbers.count; i++){

       count += numbers[i];

    }

    return count;

}

改进版

function sum(){ arguments

    varcount = 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 -对象语法 补充下 函数 functionsum(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比较如何调用成员变量，引出thisthis在这里代表狗对象

当前函数属于哪个对象，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 = newDog('wangcai', 5); var dog2 = new Dog('hhhhh'); dog1.run(); dog2.run();

 

如果没有传值，则会是undifiendconsole.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 = '';

 

总结笔记：

 

掌握对象的函数调用：

varresult =对象.函数名(参数值);

 

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引出 getElementsByTagNamegetElementsByClassName getElementsByname 分别切换图片 functionbtnClick(){获取图片对象 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中的简单运用

一、在当前应用中显示某个网页

1. 在storyboard中拖入webView,设置约束

2. 拖线

3. 在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:NSUTF8StringEncodingerror:nil];

 

提出需求：如何在js中调用OC代码（目前不说，后面学多线程的时候会使用）

- 加个 拍照 按钮，

在OC中写个拍照方法，在html中如何调用：

<buttononclick="[selfopenCamera]">拍照</button>怎么办

在安卓中可以直接调：this.openCamera;

 

整理笔记：

1> 加载网页

*加载网页源代码

[webViewloadHTMLString:@"<imgsrc=\"123.png\">" baseURL:nil];

*加载网页请求

[webViewloadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://baidu.com"]]];

 

2> 利用webView执行js

[webViewstringByEvaluatingJavaScriptFromString:@"JS代码"];

 

***********************************************************

canvas简介

1. 回顾下上节课的知识点

2. 提出问题：如果执行的JS很长？

两次调用

拼接

NSMutableString *js =[NSMutableString string];

[js appendString:];

 

[webViewstringByEvaluatingJavaScriptFromString:];

*方案：多个字符串之间用双引号隔开

@“”

3. 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标签 vardiv = 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); }空白也算节点