在html中应用JavaScript

1. 在html中调用js

  • js需要用<script>脚本写入位置</script>声明；也可以用外部文件引入，如<script type="text/javascript" src="script1.js"></script>。
  • 当js位于html的<head>内：这些脚本在选择触发它的时候被触发
  • 当js位于html的<body>内:这些脚本在页面加载时触发

2. js的数据类型/变量/运算符/方法/基本语句/事件

  • 数据类型

    • string：用" "或者' '括起来都行
    • 数值类型：包括整数和浮点数
    • boolean布尔类型：true or false
    • undefined未定义变量类型：一个类型为undefined的值指当变量被创建时，还未给变量赋值时具有的默认值
    • null空数据类型
    • object:对象类型

  • 变量

    • 作为一个弱数据类型语言，其实是可以不用事先声明变量类型的，不过用var推断来在使用前声明变量是个好习惯。
    • 区分大小写

  • 运算符

    • 运算：+ - * / % | & << >> >>> - ~ ++ --
    • 赋值：= += -= *= /= %=
    • 比较：> < <= >= == != |= | ^= ^ ?: ||

  • 方法

    • 用function声明，注意关键字是小写
    • 调用方法，比如在点击事件中调用 <input type="submit" OnClick="my_func()">
    • return返回值

  • 基本语句
    js本身对加不加；不敏感，不过加上是个好习惯。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// if和if..else
if(表达式){
语句1;
语句2;
语句3;
}
else
{
语句1;
语句2;
语句3;
}

//for
for(初值；条件；增量)
{
语句1;
语句2;
语句3;
}
  • 事件
    • onload:文档已加载完成
    • onunload:文档卸载或删除时
    • onclick:单击
    • onmousedown:按下鼠标
    • onmouseup:抬起鼠标
    • onmouseover鼠标移动到指定地
    • onmousemove:指定地的鼠标移动
    • onmouseout:鼠标移出
    • onkeypress
    • onkeydown
    • onkeyup
    • onfocus
    • onblur
    • onsubmit:提交表单
    • onreset:复位表单
    • onselect:用户选择了某些文本
    • onchange

3. 应用

  • 调用setTimeout()计时，倒数关闭
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <head>
        <!--Ctrl+S保存后就可以刷新浏览器预览-->
        <meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
        <title>表单</title>
        <style type="text/css">

        </style>
        <script type="text/javascript">
            <!--
                function clock() {
                    i=i-1;
                    document.title="窗口将在"+ i + "秒后自动关闭";
                    if(i>0) setTimeout("clock();",1000);
                    else self.close();
                }
                var i=20;
                clock();
                -->
        </script>
    </head>
  • 风格化后滚动效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>

<head>
    <!--Ctrl+S保存后就可以刷新浏览器预览-->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
    <title>跑马灯</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #goodnews{
            background-color: #fc0;
            width: 949px;
            height: 25px;
            line-height: 20px;
            padding-top: 5px;
        }
        input{
            background: transparent;
            border: none;
            font-size: 15px;
            font-weight: bold;
            font-family: 黑体;
        }
        
    </style>
    <script type="text/javascript">
        var msg = "重大喜讯！！恭喜xiaocuncun身价超过马云马化腾！！！成功跻身中国首富!!!!!!!";
        var interval = 400;
        var seq = 0;
        function txtScroll() {
            document.ScrollForm.txtText.value = msg.substring(seq, msg.length) + " " + msg;
            seq++;
            if (seq > msg.length) {
                seq = 0;
            }
            window.setTimeout("txtScroll();", interval)
        }
    </script>
</head>

<body onload="txtScroll()">
    <div id="goodnews">
        <center><form action="" id="form1" name="ScrollForm" method="post">
            <label for="textfield"></label>
            <input type="text" name="txtText" id="textfield" size="105"/>
        </form></center>
    </div>
</body>

</html>
  • 在<body>中嵌入脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>

<head>
    <!--Ctrl+S保存后就可以刷新浏览器预览-->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
    <title>跑马灯</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #goodnews {
            background-color: #fc0;
            width: 949px;
            height: 25px;
            line-height: 20px;
            padding-top: 5px;
        }

        input {
            background: transparent;
            border: none;
            font-size: 15px;
            font-weight: bold;
            font-family: 黑体;
        }
    </style>
    <script type="text/javascript">
        var msg = "重大喜讯！！恭喜xiaocuncun身价超过马云马化腾！！！成功跻身中国首富!!!!!!!";
        var interval = 400;
        var seq = 0;
        function txtScroll() {
            document.ScrollForm.txtText.value = msg.substring(seq, msg.length) + " " + msg;
            seq++;
            if (seq > msg.length) {
                seq = 0;
            }
            window.setTimeout("txtScroll();", interval)
        }
    </script>
</head>

<body onload="txtScroll()">
    <div id="goodnews">
        <center>
            <form action="" id="form1" name="ScrollForm" method="post">
                <label for="textfield"></label>
                <input type="text" name="txtText" id="textfield" size="105" />
            </form>
        </center>
    </div>
    <script>
        for (var i = 0; i < 256; i++) {
            j = 255 - 1;
            document.write("<font style='color:rgb(" + j + "," + i + "," + i + ");'><b>*</b></font>");
            if (i % 16 == 15) {
                document.write("<br>");
            }
        }
    </script>
</body>

</html>
Front-end application > basic notes
#html #css #js
在html中应用JavaScript
http://example.com/2024/07/21/在html中应用JavaScript/
作者
xiao cuncun
发布于
2024年7月21日
许可协议