OC中有关JS的相关操作
2015-11-04 13:50
615 查看
JS：JavaScript，是一门广泛用于浏览器客户端的脚本语言，原本是只能用于浏览器的，自从NodeJS出来以后就变的非常的火爆，现在也可以用于数据库和服务器的开发。
NodeJS = 基于Googole V8引擎平台（整合了数据库和服务器端）。
是由Netspace公司设计，当时跟Sun公司合作，所以名字起得很像Java。
业内简称:JS
JS的常见用途：
HTML DOM操作(节点(网页中的标签)操作，比如添加、修改、删除节点)。
给HTML网页增加动态功能，比如动画等。
事件处理：比如监听鼠标点击、鼠标滑动、键盘输入等。
JS的书写方式:
<button onclick="alert(10);alert(100)">拍照</button>
alert();感觉比较麻烦每次弹出来后还需要点击，我们可以用另一种方式来显示console.log();但是需要在浏览的控制台中才能看到输出。
调试：
alert(内容);
console.log(内容); //调试常用
注释：
//单行注释
/* 多行注释 */
定义变量：
var 变量名 =变量值; //可以自动判断类型，类似于swift的语法
数据类型：(常见的)
number : 所有数字,比如小数\整数
object :
对象类型,比如 {}或者 []
string :
字符串类型,用双引号"或者单引号'扩住(建议用单引号')
function :
函数类型
定义函数：
function 函数名(形参) {
//函数体
}
例如：
定义对象：
最简单对象 var dog = { }
示例程序：（+可以代表相加也可以代表正数也可以代表字符串拼接 ）
例如：
全局对象：系统内置的一些对象，能用在任何范围内
window
window.location.href : 修改浏览器显示的页面
this(默认情况下)在对象函数中this指的是当前对象，否则，this代表window
所有的全局变量/全局函数，都是window的属性
console.log(this); //只要不是在对象函数中就指的是window
console.log(window.location);
window.location.href = 'http://jd.com';
document 代表整个网页（重点）
比如浏览器内部点击一个图片的时候交换一个图片：
但是这样效果不是很好，可以用下面的方法来实现：
上面这个方法还需要传参数还是感觉不是很好，我想动态的拿到，那么就用document去找，需要绑定一个id：
逻辑运算符的巧用：
||运算符:
var str2 = 'rose';
var str3 = 'tom';
var str4 = 'jerry';
// ||运算符会返回第⼀一个为真的数值
var name = str1 || str2 || str3 || str4;
&&运算符
var age = 70;
age > 10 && console.log('可以开单⻋车了');
想当于：
var age = 70; }
if (age > 10) {
console.log('可以开单⻋车了');
for循环遍历
遍历数组元素
遍历对象属性
DOM节点的常用方法和属性:
innerHTML属性 : DOM节点的内容
divNode.innerHTML = '111111';
例如：
remove方法 :删除当前DOM节点
remove方法 :删除当前DOM节点
removeChild方法 :删除某个子节点
divNode.removeChild(imgNode); // imgNode会被删掉
删除网页中对应的元素：
上面这种方法使用太多的id可能将来会造成重复，所以还是使用以下方式来实现：
document.getElementsByClassName() //根据class属性
document.getElementsByName() //根据name属性
document.getElementById()//根据id属性
document.getElementsByTagName()//根据标签名
响应式布局：http://v3.bootcss.com/
直接用WebView加载这个页面。但是现实到模拟器上的时候下方的那些信息我们不想显示出来，这样的的话我们可以让美工来帮我们处理（美工去改网页的代码）。我们也可以自己通过OC调用js的代码来实现这样的效果，下面就简单介绍一下实现的过程：
使用chrome浏览器打开上面的网址，点击尾部的选择审查元素就可以看到如下图所示：
然后我们在webview的代理方法中写如下代码就可以实现删除底部的多出来的部分：
而且这样可以拿到网页的源代码进行后续的一些处理：
如果是将来要写很多的js代码，如果都是写到一行的话会显得很不清晰，所以可以进行如下的处理：
//服务器返回的数据写入到plist文件
[responseObject writeToFile:@"Users/apple/Desktop/123.plist" atomically:YES];
关于OC调JS 和 JS 调OC的问题，首先先从WebView开始说起：
1、在oc中webview的代理方法有如下几个：
2、webView加载文件的常用的几种方式：
3、OC调用JS代码：(通常OC调用JS代码是在网页加载完毕的时候)
4、JS调用OC的代码：(JS调用OC实现起来比较麻烦，一般是通过webView的代理方法进行拦截js操作后进行响应的处理)
//在js 调用的OC的过程中最好是全部参数都是通过字符串来传递
NodeJS = 基于Googole V8引擎平台（整合了数据库和服务器端）。
是由Netspace公司设计，当时跟Sun公司合作，所以名字起得很像Java。
业内简称:JS
JS的常见用途：
HTML DOM操作(节点(网页中的标签)操作，比如添加、修改、删除节点)。
给HTML网页增加动态功能，比如动画等。
事件处理：比如监听鼠标点击、鼠标滑动、键盘输入等。
JS的书写方式:
<button onclick="alert(10);alert(100)">拍照</button>
alert();感觉比较麻烦每次弹出来后还需要点击，我们可以用另一种方式来显示console.log();但是需要在浏览的控制台中才能看到输出。
调试：
alert(内容);
console.log(内容); //调试常用
注释：
//单行注释
/* 多行注释 */
定义变量：
var 变量名 =变量值; //可以自动判断类型，类似于swift的语法
数据类型：(常见的)
number : 所有数字,比如小数\整数
object :
对象类型,比如 {}或者 []
string :
字符串类型,用双引号"或者单引号'扩住(建议用单引号')
function :
函数类型
定义函数：
function 函数名(形参) {
//函数体
}
例如：
function sum() {
var num = 0;
for(var i = 0,count = arguments.length;i<count;i++) { //每个函数中都有一个arguments数组
num += arguments[i];
}
return num;
}
console.log(sum(20,30,'40')); //5040
function login(username,pwd) {
console.log('用户名' + username);
console.log('密码' + pwd);
}
login('zhangsan','lisi'); //调用函数定义对象：
最简单对象 var dog = { }
var dog = {
age: 20,
name : 'jack'
}
console.log(dog.name + '-' + dog.age); //jack-20var dog = {
age : 10,
run : function () {
//this == self;
console.log(this.age + '岁的狗跑起来了');
}
};
dog.run(); //10岁的狗跑起来了function Dog() {
this.age = 30;
this.run = function() {
console.log('run -' + this.age);
};
this.eat = function() {
console.log('eat -' + this.age);
};
}
Dog(); //仅仅是普通的函数
var d1 = new Dog(); //Dog充当了构造函数
d1.run(); //run -30
var d2 = new Dog();
d2.age = 40;
d2.eat(); //eat -40示例程序：（+可以代表相加也可以代表正数也可以代表字符串拼接 ）
var str1 = 10 + 10 + '10'; var str2 = '10' + 10 + 10; var str3 = '10' + (10 + 10); console.log(str1); // 2010 console.log(str2); // 101010 console.log(str3); // 1020
例如：
var age = 20; var name = 'jack'; var height = 1.83; var msg = '我是' + name + ',' + age + '岁，身高是' + height; console.log(msg); 我是jack,20岁，身高是1.83
全局对象：系统内置的一些对象，能用在任何范围内
window
window.location.href : 修改浏览器显示的页面
this(默认情况下)在对象函数中this指的是当前对象，否则，this代表window
所有的全局变量/全局函数，都是window的属性
console.log(this); //只要不是在对象函数中就指的是window
console.log(window.location);
window.location.href = 'http://jd.com';
document 代表整个网页（重点）
比如浏览器内部点击一个图片的时候交换一个图片：
<body> <img src="4.jpg" onclick="this.src = '5.jpg';" style="width:100px;height: 100px;"> //当点击图片的时候换一张照片显示 </body>
但是这样效果不是很好，可以用下面的方法来实现：
<script>
function changeImage(img) {
img.src = '4.jpg';
}
</script>
<body>
<img src="5.jpg"
onclick="changeImage(this);"
style="width:100px;height: 100px;"> //当点击图片的时候换一张照片显示
</body>上面这个方法还需要传参数还是感觉不是很好，我想动态的拿到，那么就用document去找，需要绑定一个id：
<script>
function changeImage() {
var img = document.getElementById('tom');
img.src = '4.jpg';
}
</script>
<body>
<img id="tom"
src="5.jpg"
onclick="changeImage();"
style="width:100px;height: 100px;"> //当点击图片的时候换一张照片显示
</body>
<body>
<div id="first-div">111111</div>
<div>2222222</div>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
var firstDiv = document.getElementById('first-div');
//调用DOM对象的remove方法，可以删除这个DOM对象
firstDiv.remove();
};
</script>
</body>逻辑运算符的巧用：
||运算符:
var str2 = 'rose';
var str3 = 'tom';
var str4 = 'jerry';
// ||运算符会返回第⼀一个为真的数值
var name = str1 || str2 || str3 || str4;
&&运算符
var age = 70;
age > 10 && console.log('可以开单⻋车了');
想当于：
var age = 70; }
if (age > 10) {
console.log('可以开单⻋车了');
for循环遍历
遍历数组元素
var array = [10, 20, 'rose'];
for (var i = 0, count = array.length; i < count; i++) {
0 - 10
console.log(i + ' - ' + array[i]);
/*
1 - 20
2 - rose
*/遍历对象属性
var dog = {
}
*/
};
name : 'jack',
age : 20
for (var pnamein dog) {
/*
console.log(pname + ' - ' + dog[pname]);
name - jack
age - 20
*/DOM节点的常用方法和属性:
innerHTML属性 : DOM节点的内容
divNode.innerHTML = '111111';
例如：
(function() {
var age = 20;
var name = 'jack';
window.onload = function() {
function changeText() {
var div = document.getElementsByTagName('div')[0];
div.innerHTML = '2222';
}
var btn = document.getElementsByTagName('button')[0];
btn.onclick = changeText;
};
}());
</script>
</head>
<body>
<div>111</div>
<button>按钮</button>
</body>remove方法 :删除当前DOM节点
remove方法 :删除当前DOM节点
removeChild方法 :删除某个子节点
divNode.removeChild(imgNode); // imgNode会被删掉
删除网页中对应的元素：
<body>
<div id="first-div">111111</div>
<div>2222222</div>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
var firstDiv = document.getElementById('first-div');
//调用DOM对象的remove方法，可以删除这个DOM对象
firstDiv.remove();
};
</script>
</body>上面这种方法使用太多的id可能将来会造成重复，所以还是使用以下方式来实现：
<body>
<div>111111</div>
<div>2222222</div>
<button>按钮</button>
<script>
var btns = document.getElementsByTagName('button');
btns[0].onclick = function() {
var firstDiv = document.getElementsByTagName('div')[0];
//调用DOM对象的remove方法，可以删除这个DOM对象
firstDiv.remove();
};
</script>
</body>document.getElementsByClassName() //根据class属性
document.getElementsByName() //根据name属性
document.getElementById()//根据id属性
document.getElementsByTagName()//根据标签名
响应式布局：http://v3.bootcss.com/
直接用WebView加载这个页面。但是现实到模拟器上的时候下方的那些信息我们不想显示出来，这样的的话我们可以让美工来帮我们处理（美工去改网页的代码）。我们也可以自己通过OC调用js的代码来实现这样的效果，下面就简单介绍一下实现的过程：
使用chrome浏览器打开上面的网址，点击尾部的选择审查元素就可以看到如下图所示：
然后我们在webview的代理方法中写如下代码就可以实现删除底部的多出来的部分：
#pragma mark - WebView的代理方法
/*
网页加载完毕后调用，把网页上的部分数据删除掉然后显示（此处删除的是网页的最先面的部分）
*/
- (void)webViewDidFinishLoad:(nonnull UIWebView *)webView {
NSString *js = @"document.getElementsByTagName('footer')[0].remove();";
[webView stringByEvaluatingJavaScriptFromString:js];
}这样运行出来的效果就与网页直接显示的不一样了，看起来很像一个app了。而且这样可以拿到网页的源代码进行后续的一些处理：
NSString *js = @"document.getElementsByTagName('html')[0].outerHTML;";
NSString *result = [WebView stringByEvaluatingJavaScriptFromString:js];
NSlog(@"%@",result);如果是将来要写很多的js代码，如果都是写到一行的话会显得很不清晰，所以可以进行如下的处理：
NSString *js = @"function login(username,pwd) {
" return 10"
"}"
"login();";
NSString *result = [WebView stringByEvaluatingJavaScriptFromString:js];//服务器返回的数据写入到plist文件
[responseObject writeToFile:@"Users/apple/Desktop/123.plist" atomically:YES];
关于OC调JS 和 JS 调OC的问题，首先先从WebView开始说起：
1、在oc中webview的代理方法有如下几个：
//开始加载
- (void)webViewDidStartLoad:(UIWebView *)webView {}
//加载完毕
- (void)webViewDidFinishLoad:(UIWebView *)webView {}
//加载失败
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {}
/**
每当webView发送请求之前，都会调用这个方法
返回YES：允许加载这个请求
返回NO：进制加载这个请求
常可以来拦截请求加载的作用
*/
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {<span style="white-space:pre"> </span>if([request.URL.absoluteString containsString:@"XXX"]) {
return NO; //包含XXX的就不进行加载
}
return YES;
}2、webView加载文件的常用的几种方式：
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]]; //加载html标签 [self.webView loadHTMLString:(nonnull NSString *) baseURL:(nullable NSURL *)]; //可以加载 pdf 视频 ppt doc等文件 [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:(nonnull NSString *)]]]; [self.webView loadData:(nonnull NSData *) MIMEType:(nonnull NSString *) textEncodingName:(nonnull NSString *) baseURL:(nonnull NSURL *)];
3、OC调用JS代码：(通常OC调用JS代码是在网页加载完毕的时候)
- (void)webViewDidFinishLoad:(UIWebView *)webView {
//OC代码调用JS代码
//获取当前网页的title 返回第一个网页
//NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title;"];
//调用js中的函数代码也是通过这个方法来实现
//NSString *result = [self.webView stringByEvaluatingJavaScriptFromString:@"JS中函数名;"];
}4、JS调用OC的代码：(JS调用OC实现起来比较麻烦，一般是通过webView的代理方法进行拦截js操作后进行响应的处理)
//首先先来看一段有关的js代码：
<html>
<!-- 网页的描述信息 -->
<head>
<meta charset= "UTF-8">
<title>第一个网页</title>
<script>
function ClickMe() //声明的JS函数
{
//让webView跳转到相应的链接页面 如果是百度则直接跳转到百度 JS调用OC就是通过此方法来实现的，此方法跳转后在webview的代理方法中拦截处理
location.href = @"aaa://call";
}
</script>
</head>
<!-- 网页的具体内容 -->
<body>
<button style="background:red; width:100px;height:30px;"onclick="ClickMe();">点我啊</button> //按钮点击调用对应的JS函数
</body>
</html>//常常通过这个方法来实现JS调用OC代码的拦截处理
//常用的JS和OC交互第三方框架也可以来处理：WebViewJavaScriptBridge
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
//截取请求的url 在此对js的操作进行拦截 如果不是对应的协议的函数就直接过掉
NSString *url = request.URL.absoluteString;
NSString *scheme = @"aaa://";
//如果是对应的方法，就不进行网络请求 而是调用对应的方法
if ([url hasPrefix:scheme]) {
NSString *methodName = [url substringFromIndex:scheme.length];
[self performSelector:NSSelectorFromString(methodName) withObject:nil];
return NO;
}
return YES;
}- (void)call { //当拦截到是js代码的点击的时候就会调用此方法
NSLog(@"%s",__func__);
}//在js 调用的OC的过程中最好是全部参数都是通过字符串来传递
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript对象详解
- Newtonsoft.Json 自定义 解析协议
- JS正则表达式验证
- extjs 里执行多行选中，和单行选中的操作
- d3.time.format中的时间格式
- Javascript模块化编程（二）：AMD规范
- 201511041227_《JavaScript——动态原型对象（优化写法）》
- js返回上一页并刷新代码整理
- jsp编程中session的用法实例分析
- JSP中内建exception对象时出现500错误的解决方法
- 基于JavaScript实现移动端点击图片查看大图点击大图隐藏
- js数组去重的5种算法实现
- 总结js开发中的问题
- javascript高级程序设计
- 说说JSON和JSONP，也许你会豁然开朗
- 解决js图片加载时出现404的问题
- JavaScript高级程序设计之DOM之DOM 操作技术之操作表格第10.2.3讲
- shape-rendering: crispEdges
- javaScript基础总结
- Javascript模块化编程（一）：模块的写法