JavaScript（一）_js tomi老师-CSDN博客

本文介绍了JavaScript的基础知识，包括其组成、语法、数据类型、运算符、函数等，并详细讲解了如何利用JavaScript操作DOM节点，实现对网页内容的动态修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、JavaScript的组成部分：

　1、核心（ECMAScript）描述了该语言的语法和基本对象

　2、文档对象模型(DOM)描述了处理网页内容的方法和接口

　3、浏览器对象模型(BOM)描述了与浏览器进行交互的方法和接口
　
　　　　　　　　　　　　js主要是操作DOM

这里写图片描述

二、简单实例

js一般是要插入HTML中的，动态的改变网页内容

<script type="text/javascript">
    alert("hello");
    document.write("向文档中写入一句话");
</script>

打开网页，显示如下：

这里写图片描述

三、基础语法

1.引入方式：分为内部引入和外部引入，内部引入就是把js放入< head >和< body > 中。外部引入就是新建一个.js文件，外部文件通常包含被多个网页使用的代码。

这里写图片描述

myJs中代码：alert("外部引入的js");

NewFile中的代码：<script type="text/javascript" src="myJs.js"></script>

如果显示乱码，要将js和html的编码方式统一为utf-8

2.注释：单行// 多行/* */

3.变量：js是弱类型的语言，变量统一用var

4.基本数据类型：Undefined(未赋值)，Null(变量值为空)，其他数据类型和java差不多。

var e;
document.write(e+" ");
var f="hello";
f=null;
document.write(f);

输出结果为：undefined null

5.运算符：

<script type="text/javascript">
        var x = 5;
        document.write((x == 5) + "<br/>");
        document.write((x == '5') + "<br/>")
        document.write((x === '5') + "<br/>")
    </script>

输出结果为true true false，两个等于号不区分数据类型，三个等于号比较严格，区分数据类型

6.js函数：

<script type="text/javascript">
        function fun1() {
            alert("第一个方法");
        }
        function fun2(p2) {
            alert(p2);
        }
        fun1();
        fun2(2);
    </script>

输出结果为：第一个方法，2

四、JavaScript操作DOM节点

1.处理DOM事件

<body>
    <script type="text/javascript">
        function fun1() {
            alert("js处理事件成功");
        }
    </script>
    <input type="button" value="点击" onclick="fun1()" />
</body>

2.操作DOM节点

<body>
    <script type="text/javascript">
        function fun1() {
            //表单元素用value，非表单元素用innerHTML，input有value属性
            document.getElementById("txt").innerHTML = "用户名：";
            document.getElementById("username").value = "tom";
        }
    </script>
    <font id="txt">字体</font>
    <input type="text" id="username" />
    <input type="button" value="点击" onclick="fun1()" />
</body>

初始页面：这里写图片描述

点击后：这里写图片描述

3.修改DOM节点CSS样式

<body>
    <script type="text/javascript">
        function fun1() {
            document.getElementById("p1").style.color = "red";
        }
    </script>
    <p id="p1">修改DOM节点颜色</p>
    <input type="button" value="点击修改" onclick="fun1()" />
</body>

点击按钮后段落字体变为红色

五、JavaScript对象

1.动态的添加属性或方法

<body>
    <script type="text/javascript">
        function sayHello(word) {
            alert(word);
        }
        var p = new Object();
        p.name = "tom";
        p.fun1 = sayHello;
        alert(p.name);
        p.fun1("Hello");
    </script>
</body>

2.动态的删除属性和方法

第一种方式：

        delete p.name;
        alert(p.name);
        delete p.fun1;
        p.fun1("Hello");

弹出窗口会显示undefined，然后会报错fun1不是一个方法

第二种方式：

        p.name=undefined;
        p.fun1=undefined;
        alert(p.name);
        p.fun1("Hello");

弹出窗口显示的和第一种方式一样

3.使用对象构造器来构造对象

使用函数构造对象：

    <script type="text/javascript">
        function person(name, age) {
            this.name = name;
            this.age = age;
            this.fun1 = sayHello;
            function sayHello(word) {
                alert(word);
            }
        }
        var p = new person("tom", 21);
        alert(p.name);
        p.fun1("Hello");
    </script>

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象。

JavaScript 基于 prototype，而不是基于类的。

4.JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…下面研究一下数组

<script type="text/javascript">
        var arr = new Array(3);
        arr[0] = 1;
        arr[1] = 2;
        arr[2] = 3;
        //js中的for...in循环遍历数组
        for (n in arr) {
            document.write(arr[n] + "</br>");
        }
        //将数组元素组合成字符串,并以.号隔开
        document.write(arr.join(".") + "</br>");
        //颠倒数组元素
        document.write(arr.reverse());
    </script>

5.js常用函数
全局函数：不属于任何一个内置对象，如escape(),eval()…

        var str = "1+2+3";
        alert(eval(str));//eval用来执行代码，输出为6

window对象常用方法及事件：

<script type="text/javascript">
        function fun1() {
            alert("5秒后执行");
        }
        //延时执行，单位为毫秒，只执行一次
        window.setTimeout("fun1()", 5000);
    </script>

<body>
    <script type="text/javascript">
        function fun2() {
            var date = new Date();
            var time = date.getHours() + ":" + date.getMinutes() + ":"+ date.getSeconds();
            document.getElementById("time").innerHTML = time;
        }
        //周期执行，单位为毫秒
        window.setInterval("fun2()", 1000);
    </script>
    <div id="time"></div>
</body>

打开一个窗口window.open(“http://www.baidu.com“);
当文档加载完毕时执行window.οnlοad=function(){}
当窗口大小发生变化时执行window.οnresize=function(){}