html里js怎么使用-猿码集

1. 基本语法

JavaScript可以在html页面中直接写入，也可以嵌入在html代码中的<script>标记中。下面是一段html代码，演示了JavaScript和html的基本语法：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript语法</title>
</head>
<body>
    <script>
        document.write("Hello World!");
    </script>
</body>
</html>

这段代码在浏览器中运行，会输出一条"Hello World!"，其中JavaScript代码位于<script>标记中。这段代码使用了JavaScript的document对象中的write()方法，该方法可以在html页面中直接输出字符串或html代码。

1.1 注释

JavaScript支持两种注释方式，分别是单行注释和多行注释。

单行注释以//开头，到该行结尾为止。例如：

// 这是单行注释

多行注释以/*开头，以*/结尾。例如：

/* 这是多行注释可以用于注释多行代码 */

2. 变量和数据类型

JavaScript通过变量存储数据，变量需要使用var关键字声明。JavaScript支持多种数据类型，包括数字、字符串、布尔值、对象等。

2.1 变量

变量可以用来存储数据，通过var关键字进行声明。例如：

var message = "Hello World!";
document.write(message);

这段代码使用了变量message存储了一个字符串"Hello World!"，然后使用document.write()方法在页面中输出了这个字符串。

在JavaScript中，变量的值可以随时修改，例如：

var num = 10;
document.write(num); // 输出10
num = 20;
document.write(num); // 输出20

这段代码通过变量num分别存储了数字10和20，并且在页面中输出了这两个数字。

2.2 数据类型

2.2.1 数字型

JavaScript支持整数和浮点数两种数字类型，可以进行基本的加、减、乘、除等算术运算。

var a = 10;
var b = 3.14;
document.write(a + b); // 输出13.14
document.write(a - b); // 输出6.86
document.write(a * b); // 输出31.4
document.write(a / b); // 输出3.1847133757961785

2.2.2 字符串型

JavaScript使用双引号或单引号来定义字符串，字符串类型变量可以进行加法运算。例如：

var str1 = "Hello";
var str2 = "World!";
document.write(str1 + " " + str2); // 输出"Hello World!"

在上面的代码中，变量str1和str2分别存储了字符串"Hello"和"World!"，然后利用加法运算符将它们拼接起来输出。

2.2.3 布尔型

布尔类型只有两个值：true和false，用于逻辑判断。例如：

var a = 10;
var b = 5;
var result = (a > b);
document.write(result); // 输出true

上面的代码中，变量result存储了比较结果(a > b)，即a是否大于b的布尔值true。

2.2.4 空值型

JavaScript中的空值用null表示，表示一个空对象。

var a = null;
document.write(a); // 输出null

3. 控制语句

JavaScript的控制语句包括条件语句和循环语句，可以根据条件来执行不同的操作，或者重复执行某些操作。

3.1 条件语句

JavaScript的条件语句包括if语句和switch语句，它们可以根据条件来执行不同的代码块。

3.1.1 if语句

如果if语句的条件表达式为真，就会执行if语句中的代码块。

var a = 10;
if (a > 5) {
    document.write("a大于5");
}

在上面的代码中，如果变量a的值大于5，则会在页面中输出"a大于5"。

3.1.2 switch语句

switch语句根据一个表达式的值来选择要执行的代码块。

var day = new Date().getDay();
switch (day) {
    case 0:
        document.write("今天是周日");
        break;
    case 1:
        document.write("今天是周一");
        break;
    case 2:
        document.write("今天是周二");
        break;
    // ...
    default:
        document.write("今天是未知的一天");
        break;
}

这段代码根据当前日期是星期几来输出对应的文本。

3.2 循环语句

JavaScript的循环语句包括for语句、while语句和do...while语句，可以重复执行某些操作。

3.2.1 for语句

for语句用于循环执行某些操作，可以根据条件来控制循环次数。

for (var i = 0; i < 10; i++) {
    document.write(i);
}

在上面的代码中，变量i从0开始循环，每次循环i增加1，直到循环10次结束。

3.2.2 while语句

while语句用于在条件表达式为true时重复执行某些操作。

var i = 0;
while (i < 10) {
    document.write(i);
    i++;
}

在上面的代码中，变量i从0开始循环，每次循环i增加1，直到循环10次以上时结束。

3.2.3 do...while语句

do...while语句和while语句类似，不同的是不管条件是否为true，至少会执行一次循环。

var i = 0;
do {
    document.write(i);
    i++;
} while (i < 10);

在上面的代码中，变量i从0开始循环，每次循环i增加1，直到循环10次以上时结束。

4. 函数

JavaScript中的函数用于封装一些操作或代码块，减少重复代码。

function sayHello(name) {
    document.write("Hello, " + name + "!");
}
sayHello("World");

在上面的代码中，定义了一个名为sayHello的函数，它接受一个参数name，然后在页面中输出"Hello, " + name + "!"的字符串。最后通过调用sayHello("World")的方式在页面中输出"Hello, World!"。

4.1 匿名函数

在JavaScript中也可以使用匿名函数，即不给函数命名的函数。

var sayHello = function(name) {
    document.write("Hello, " + name + "!");
};
sayHello("World");

这段代码和前面的函数定义代码相似，只是将函数定义存储在了一个变量sayHello中。

JavaScript中的函数也可以作为参数传递给其他函数，例如：

function callFunc(func) {
    func("World");
}
callFunc(sayHello);

在上面的代码中，定义了一个名为callFunc的函数，它接受一个函数参数func，然后通过调用func("World")的方式调用该函数。最后通过调用callFunc(sayHello)的方式将前面定义的sayHello函数作为参数传递给callFunc函数。

5. DOM操作

JavaScript通过操作文档对象模型（DOM）来实现页面的动态效果，通过DOM可以获取或修改页面中的元素，例如文本、图像、表单等，执行HTML或CSS操作等动态效果。

5.1 获取元素

可以使用getElementById()方法获取指定id的元素，例如：

var elem = document.getElementById("myElem");

在上面的代码中，变量elem存储了一个id为myElem的元素。

5.2 修改元素

可以使用JavaScript修改元素的属性或样式，例如：

var elem = document.getElementById("myElem");
elem.innerHTML = "Hello World!";
elem.style.color = "red";

在上面的代码中，将一个名为myElem的元素的innerHTML属性设置为"Hello World!"，并将它的样式颜色设置为红色。

6. 事件处理

JavaScript可以响应页面中的事件，例如用户的鼠标点击、键盘输入等。可以使用addEventListener()方法来为元素添加事件监听器。

var elem = document.getElementById("myElem");
elem.addEventListener("click", function() {
    alert("Hello World!");
});

在上面的代码中，使用addEventListener()方法为一个名为myElem的元素添加一个click事件监听器，当该元素被点击时会弹出"Hello World!"的提示框。

7. AJAX

AJAX是一种用于在不重新加载整个页面的情况下更新部分页面内容的技术。可以使用XMLHttpRequest对象来向服务器发送HTTP请求和接受响应。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var response = xhr.responseText;
        document.getElementById("myElem").innerHTML = response;
    }
};
xhr.open("GET", "http://example.com/mypage.html", true);
xhr.send();

在上面的代码中，使用XMLHttpRequest对象向http://example.com/mypage.html网址发送一个GET请求，并在该请求的响应返回时更新一个名为myElem的元素。

8. 总结

JavaScript是一种可以为html页面添加交互和效果的脚本语言。本文简要介绍了JavaScript的基本语法、变量和数据类型、控制语句、函数、DOM操作、事件处理和AJAX等内容。了解这些内容非常有助于您初学JavaScript的进展。

html里js怎么使用