Web开发 ☞ JavaScript 基本语法

JavaScript基础操作指南

最新推荐文章于 2022-03-17 22:43:55 发布

原创最新推荐文章于 2022-03-17 22:43:55 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了JavaScript的基本用法，包括如何使用document.write输出内容，如何通过getElementById改变HTML元素的内容，以及如何利用JavaScript进行基本的页面交互操作。此外还介绍了脚本的放置位置、外部脚本的使用方法、变量声明与数据类型等基础知识。

鸣谢：www.w3school.com

1、写入 HTML 输出

document.write();

示例：

<html>
    <body>
        <script>
            document.write("test");
            </script>
        </body>
</html>

注意：

只能在 HTML 输出中使用 document.write。如果在文档加载后使用该方法，会覆盖整个文档。

例如执行这样一段代码,会覆盖原来内容
OC示例：

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    [webView stringByEvaluatingJavaScriptFromString:@"document.write('bbbbbb')"];
}

2、改变 HTML 内容

x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello JavaScript!";    // 改变内容

示例：

<!DOCTYPE html>
<html>
    <body>
        <meta Charset = "UTF-8">
        <h1>我的第一段 JavaScript</h1>

        <p id="mark">
        待改变
        </p>

        <script>
            function myFunction()
            {
                x=document.getElementById("mark");  // 找到元素
                x.innerHTML="已改变";    // 改变内容
            }
        </script>

        <button type="button" onclick="myFunction()">点击这里</button>

    </body>
</html>

OC示例：

<!DOCTYPE html>
<html>
    <body>
        <meta Charset = "UTF-8">
        <h1>我的第一段 JavaScript</h1>

        <p id="mark">
        JavaScript 能改变 HTML 元素的内容。
        </p>

        <script>
            function myFunction()
            {
                x=document.getElementById("mark");  // 找到元素
                x.innerHTML="改变!";    // 改变内容
            }
        </script>

        <button type="button" onclick="myFunction()">点击这里</button>

    </body>
</html>

//由于网页加载完，mark显示的是“JavaScript 能改变 HTML 元素的内容。”但是OC调用JS后，修改了mark的内容为“Hello JavaScript!”，其余点击事件不变

- (void)webViewDidFinishLoad:(UIWebView *)webView {

    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('mark').innerHTML='Hello JavaScript!'"];

}

- (void)webViewDidFinishLoad:(UIWebView *)webView {

[webView stringByEvaluatingJavaScriptFromString:
 [NSString stringWithFormat:@"x=document.getElementById('mark');""x.innerHTML='change!';"]];

}

OC示例2：

<!DOCTYPE html>
<html>
    <body>
        <meta Charset = "UTF-8">
        <h1>我的第一段 JavaScript</h1>

        <p id="mark">
        点击按钮跳转
        </p>

        <script>
            function myFunction()
            {
                location.href = "myprotocal://change";
            }
        </script>

        <button type="button" onclick="myFunction()">点击这里</button>

    </body>
</html>

//拦截链接：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSString *url = request.URL.absoluteString;
    if ([url hasPrefix:@"myprotocal://"]) {
        [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]]
        ;
    }
    return YES;
}

OC示例3：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSString *url = request.URL.absoluteString;

    if ([url hasPrefix:@"myprotocal://"]) {
        NSString *method = [url substringFromIndex:[@"myprotocal://" length]];
        [self performSelector:NSSelectorFromString(method) withObject:nil];
    }
    return YES;
}
- (void)change {

    NSLog(@"success");
}

3、基本知识

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

外部的 JavaScript

 外部脚本不能包含 <script> 标签。

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

JavaScript 对大小写是敏感的。

对代码行进行折行
document.write("Hello \
World!");

JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

声明（创建） JavaScript 变量
我们使用 var 关键词来声明变量：

重新声明 JavaScript 变量
如果重新声明 JavaScript 变量，该变量的值不会丢失

JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

数据类型：

JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带

JavaScript 字符串
字符串可以是引号中的任意文本。您可以使用单引号或双引号

JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false

JavaScript 数组
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者
var cars=new Array("Audi","BMW","Volvo");
或者
var cars=["Audi","BMW","Volvo"];

JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
var person={firstname:"Bill", lastname:"Gates", id:5566};

对象属性有两种寻址方式
name=person.lastname;
name=person["lastname"];

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象

//函数：

JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function
例：
function functionname()
{
这里是要执行的代码
}

调用带参数的函数
myFunction(argument1,argument2)
function myFunction(var1,var2)
{
这里是要执行的代码
}
注：
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推

带有返回值的函数
通过使用 return 语句就可以实现
在使用 return 语句时，函数会停止执行，并返回指定的值
function myFunction()
{
var x=5;
return x;
}