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的相關操作

AI模型 Llama 3體驗筆記

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

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以太網驅動總結