OC中有关JS的相关操作

JS：JavaScript，是一门广泛用于浏览器客户端的脚本语言，原本是只能用于浏览器的，自从NodeJS出来以后就变的非常的火爆，现在也可以用于数据库和服务器的开发。

NodeJS = 基于Googole V8引擎平台（整合了数据库和服务器端）。

是由Netspace公司设计，当时跟Sun公司合作，所以名字起得很像Java。

业内简称:JS

JS的常见用途：

HTML DOM操作(节点(网页中的标签)操作，比如添加、修改、删除节点)。

给HTML网页增加动态功能，比如动画等。

事件处理：比如监听鼠标点击、鼠标滑动、键盘输入等。

JS的书写方式:

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-20

 var 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" οnclick="this.src = '5.jpg';"
    style="width:100px;height: 100px;">    //当点击图片的时候换一张照片显示
    </body>

但是这样效果不是很好，可以用下面的方法来实现：

<script>
    function changeImage(img) {
        img.src = '4.jpg';
    }
    </script>
    <body>
    <img src="5.jpg"
    οnclick="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"
    οnclick="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节点

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;"οnclick="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的过程中最好是全部参数都是通过字符串来传递

OC中有关JS的相关操作

Python 潮流周刊#50：我最喜欢的 Python 3.13 新特性！

iOS中常用的毛玻璃處理

UIScrollView 的subViews的問題

iOS 數據存儲的幾種方式

OC中有關JS的相關操作

Core Animation的簡單使用

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結