【JavaLearn】#（21）JavaScript入门、基本语法、函数、基本对象、数组、事件、DOM和BOM

已于 2022-03-28 13:58:45 修改
阅读量2.2k 收藏 2
点赞数
分类专栏： JavaLearn 文章标签： java 开发语言 后端
于 2022-03-27 18:54:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38134242/article/details/123778776
版权

1. JavaScript入门

静态网页技术

  • HTML：超文本标记语言 显示内容

  • CSS：层叠样式表 美化页面

  • JavaScript：页面动态交互和特效

    DHTML = HTML + CSS + JavaScript，动态HTML，只是动态效果，不是动态数据

  • jQuery：对 JavaScript 的封装

  • EasyUI：在 jQuery 基础上对 HTML 和 CSS 的封装

对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript设置页面交互和特效。

1.1 JavaScript 定义和特点

JavaScript 是一种基于对象 (object-based) 和事件驱动 (Event Driven)的简单的并具有安全性能的脚本语言

  • ECMAScript：JavaScript的核心
  • DOM：文档对象模型，是 HTML 和 XML 的应用程序接口（API）。把整个页面规划成由节点层级构成的文档
  • BOM：浏览器对象模型，对浏览器窗口进行访问和操作

JavaScript特点：

  • 脚本语言：不需要事先编译，只要有一个与其相适应的解释器就可以执行
  • 基于对象的语言：只是使用对象，相当于只有封装，没有继承和多态
  • 事件驱动：事件（Event）发生后（按下鼠标、移动窗口等），可能会引起相应的事件响应
  • 简单性：变量类型为弱类型
  • 安全性：只能通过浏览器实现信息浏览或动态交互
  • 跨平台性：依赖于浏览器本身，与操作平台无关
  • 缺点：各种浏览器对JavaScript的支持可能不同，显示效果可能不同

1.2 JavaScript的初步使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>认识JavaScript</title>
    <script type="text/javascript">
        //在浏览器写入内容  
        document.write("这就是JavaScript1<br>")
        document.write("这就是JavaScript2<br>")
    </script>
</head>

<body>
    这就是HTML;
</body>

</html>
<script>
    alert("你好呀")
</script>

1.3 数据类型

常量是存在数据类型的，变量直接用 var 声明即可

  • 数值型：整数（85） 和 浮点数（3.14）统称为数值
  • 字符串型：用 ‘’ 或者 “” 括起来的内容
  • 布尔型：true 或 false
  • 空值：null，表示没有值，用于定义空的或不存在的引用
  • 未定义值：undefined，表示变量虽然已经声明，但是还没有赋值
  • 复合数据类型：对象、数组

2. 基本语法

2.1 变量

JavaScript 中的变量是没有类型（弱类型）的

var int = 3;

2.2 运算符

类型运算符
算术运算符+ - * / % ++ --
赋值运算符=
比较运算符> < >= <= == === !=
逻辑运算符&& || !

注意： == 和 === 的区别

  • == 等值判断：先判断类型，类型一致则比较内容， 如果类型不一致，则先用 Number 转换为一致的类型后再比较内容
  • === 等同判断：先判断类型，类型不一致则直接 false， 类型一致则再比较内容

2.3 流程控制

  • 分支语句：if、switch

  • 循环语句：while循环、do-while循环、for循环、for-each循环

  • 跳转语句：break、continue、return

需要注意 for-each 循环，使用 in

2.4 引入外部文件

<script type="text/javascript" src="外部文件路径"></script>

2.5 综合代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript基本语法</title>

    <!--  引入外部的JS文件  -->
    <script type="text/javascript" src="js/myJs.js"></script>

    <script type="text/javascript">
        document.write("<h3>认识数据类型和变量</h3>")
        var x;
        document.write("x = " + x + "   " + typeof (x) + "<br>");    // 没有赋值，就是undefined
        x = null;
        document.write("x = " + x + "   " + typeof (x) + "<br>");
        x = 123;
        document.write("x = " + x + "   " + typeof (x) + "<br>");
        x = "lwclick";     // 单引号双引号都可以
        document.write("x = " + x + "   " + typeof (x) + "<br>");
        x = true;         // 区分大小写， TRUE 则是变量名
        // x = TRUE; // 此时TRUE被理解成一个变量
        document.write("x = " + x + "   " + typeof (x) + "<br>");

        document.write("<h3>区分==和===</h3>");
        var a = '5';
        var b = 5;
        var c = 5;
        document.write((b == c) + "<br>");
        document.write((a == b) + "<br>"); // 自动类型转换
        document.write((b === c) + "<br>"); //
        document.write((a === b) + "<br>"); // 先判断类型，不一致则false

        console.info("for-each循环");
        var fruits = ["apple", 'banana', 'orange', 'pear', 'peach'];
        /**
             for ( var i = 0; i < fruits.length; i++ ) {
                console.log(fruits[i]);
             }
         */
        // for-each 循环数组
        for (var index in fruits) {//!!!!
            console.warn(index + "   " + fruits[index]);
        }

        // for-each 循环对象
        // for (var elem in window) {
        //   console.info(elem);
        //}
    </script>
</head>
<body>
</body>
</html>

3. 函数

  • 类似Java中的方法，是完成特定任务的代码语句块

  • 不用定义属于某个类，直接使用

  • JavaScript的函数分为系统函数和自定义函数

    • 系统函数

      parseInt()：字符串值转换为数字

      parseFloat()：字符串值转换成浮点数

      isNaN()：判断是否是数字，不是数字返回 true

      eval()：字符串表达式转为数字（运算字符串内的表达式）

    • 自定义函数

      // 没有参数，没有返回值
function func1() {
}

// 有参数，没有返回值
function func2(num1) {
    alert(num1) 
}

// 有参数，有返回值
function func3(num1, num2) {  // 返回值也为 var，则直接不写
    return num1 + num2;
}

// 类似于 Java 的匿名函数式定义
var func4 = function() {
    alert('world！');
};

// 调用时
func2();  // 实参个数 < 形参个数                  num1 为 undefined
func2(123);  // 实参个数 = 形参个数               正常使用
func2(123, 'lwclick');  // 实参个数 > 形参个数    只用第一个参数

var res = func3(123, 456);

      注意：如果有重名的函数，会调用最近的那一个

实例：计算器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计算器</title>
    </head>

    <script>
        function calc() {
            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            if (isNaN(num1) || isNaN(num2)) {
                alert("请输入数字");
                // innerHTML：往元素的【中间】写内容
                document.getElementById("res").innerHTML = "结果：";
                return;
            }
            var oper = document.getElementById("oper").value;
            if (num2 == 0 && oper == '/') {
                document.getElementById("res").innerHTML = "<span style='color: red'>除数不能为0</span>";
                return;
            }
            var result;
            switch (oper) {
                case '+' : result = parseInt(num1) + parseInt(num2); break;
                case '-' : result = num1 - num2; break;
                case '*' : result = num1 * num2; break;
                case '/' : result = num1 / num2; break;
            }
            document.getElementById("res").innerHTML = result;
        }
    </script>

    <body>
        <form action="">
            第一个数：<input type="text" id="num1" name="num1" value="123"><br>
            第二个数：<input type="text" id="num2" name="num2"><br>
            运算符：<select id="oper" name="oper">
                        <option value="+">加</option>
                        <option value="-">减</option>
                        <option value="*">乘</option>
                        <option value="/">除</option>
                    </select><br>
            <input type="button" value="计算" onclick="calc()">
        </form>

        <div id="res">结果：</div>
    </body>
</html>

4. 对象

JavaScript 提供了很多对象，比如 String、Math、Date 等，和Java中的使用基本相同，后续还有 BOM对象和 DOM对象

<script>
    document.write("------------String--------------<br>")
    var str = new String("lwclick");
    document.write(str.length + "<br>")
    document.write(str.charAt(2) + "<br>")
    document.write(str.indexOf('s') + "<br>")
    document.write(str.substr(2, 3) + "<br>")    // 从索引为2的开始截，截3位
    document.write(str.substring(2, 3) + "<br>") // 截取2 到 3中间的

    document.write("------------Date--------------<br>")
    var now = new Date();
    document.write(now.toLocaleString()+"<br>")
    document.write(now.getFullYear()+"<br>")
    document.write((now.getMonth() + 1) + "<br>")   // 0 - 11！！！！！！！
    document.write(now.getDate()+"<br>")
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    document.write(arr[now.getDay()] + "<br>")

    document.write("------------Math--------------<br>")
    document.write('' + Math.random())
</script>

5. 时钟效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>时钟效果</title>
        <script>
            function showTime() {
                // 获取当前时间
                var now = new Date();

                // 写到指定位置
                document.getElementById("time").innerHTML = now.toLocaleString();

                // 第一种方式：放在自身函数里面，就会自己调用自己，需要结合 window.onload
                // window.setTimeout(showTime, 1000)  // setTimeout：多长时间后调用指定的函数【一次】
            }

            window.onload = showTime; // 不能写 ()

            // 第二种方式：在自身函数外面设置 setInterval(showTime, 1000)  【每隔】多长时间调用一次函数
            var myClock = setInterval(showTime, 1000);

            function pauseClock() {
                window.clearInterval(myClock); // 清除计时
            }

            function continueClock() {
                myClock = setInterval(showTime, 1000);
            }
        </script>
    </head>
    <body>
        <div id="time"></div>
        <input type="button" value="暂停" onclick="pauseClock()" />
        <input type="button" value="继续" onclick="continueClock()" />
    </body>
</html>

6. 数组

JavaScript 中也有一维数组和二维数组的概念

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>数组 array</title>
        <script>
            document.write("<h3>一维数组，第一种声明方式</h3>");
            var arr = ["apple", "banana", "orange", "pear", "peach"];

            document.write("<h3>一维数组，第二种声明方式</h3>");
            var arr = new Array("apple", "banana", "orange", "pear", "peach")

            document.write("<h3>一维数组，第三种声明方式</h3>");
            var arr = new Array(5);
            arr[0] = "apple";
            arr[1] = "banana";
            arr[2] = "orange";
            arr.length = 2;    // 只要前两个

            document.write("<h3>一维数组，第四种声明方式</h3>");
            var arr = new Array(5);
            arr["苹果"] = "apple";
            arr["香蕉"] = "banana";
            arr["橘子"] = "orange";

            document.write("<h3>二维数组，第一种声明方式</h3>");
            var arr = new Array(3);
            arr[0] = ["昌平区", "海淀区", "东城区", "西城区", "丰台区"];
            arr[1] = ["石家庄","邯郸","保定","承德","张家口","沧州"];
            arr[2] = ["郑州","开封","洛阳","信阳","南阳","安阳"];

            document.write("<h3>二维数组，第二种声明方式</h3>");
            var arr = new Array(3);
            arr["北京市"] = ["昌平区", "海淀区", "东城区", "西城区", "丰台区"];
            arr["河北市"] = ["石家庄","邯郸","保定","承德","张家口","沧州"];
            arr["河南市"] = ["郑州","开封","洛阳","信阳","南阳","安阳"];

        </script>
    </head>
    <body>
    </body>
</html>

7. 事件

事件是可以被 JavaScript 侦测到的行为，比如可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行

​ <input type="button" value="计算" onclick="calc()"/>

属性当以下情况发生时，出现此事件
onabort图像加载被中断
onblur元素失去焦点
onchange用户改变域的内容
onclick鼠标点击某个对象
ondblclick鼠标双击某个对象
onerror当加载文档或图像时发生某个错误
onfocus元素获得焦点
onkeydown某个键盘的键被按下
onkeypress某个键盘的键被按下或按住
onkeyup某个键盘的键被松开
onload某个页面或图像被完成加载
onmousedown某个鼠标按键被按下
onmousemove鼠标被移动
onmouseout鼠标从某元素移开
onmouseover鼠标被移到某元素之上
onmouseup某个鼠标按键被松开
onreset重置按钮被点击
onresize窗口或框架被调整尺寸
onselect文本被选定
onsubmit提交按钮被点击
onunload用户退出页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>事件</title>
        <script>
            function changeNum() {
                var showDiv = document.getElementById("showDiv");
                var value = parseInt(showDiv.innerHTML) + 1;
                showDiv.innerHTML = value;
            }
        </script>
    </head>
    <body>
        <div id="showDiv" style="width: 400px; height: 300px; background-color: greenyellow"
            onmouseover="this.style.backgroundColor='yellow'"
            onmouseout="this.style.backgroundColor='greenyellow'"
            onmousemove="changeNum()">
            0
        </div>
    </body>
</html>

8. DOM 和 BOM

什么是 BOM？

  • BOM是Browser Object Model的简写，即浏览器对象模型
  • 由一系列对象组成，是访问、控制、修改浏览器的属性的方法
  • BOM没有统一的标准(每种客户端都可以自定标准)
  • BOM的顶层是window对象

什么是DOM？

  • DOM是Document Object Model的简写，即文档对象模型
  • DOM用于XHTML、XML文档的应用程序接口(API)
  • DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示
  • DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法
  • DOM标准是由w3c制定与维护，DOM是跨平台与跨语言的
  • DOM的顶层是document对象

在这里插入图片描述

  • BOM 是为了操作浏览器出现的 API，window 是其根对象。
  • DOM 是为了操作文档出现的 API，document 是其根对象

在这里插入图片描述

8.1 BOM—window对象

window对象是BOM的根对象，代表整个浏览器窗口

window的常用属性：

属性描述
closed返回窗口是否已被关闭。
document文档对象，DOM中
history客户访问过的URL的信息
location当前 URL 的信息
navigator管理浏览器基本信息
opener返回对创建此窗口的窗口的引用。
screen客户端的屏幕和显示性能的信息
self返回对当前窗口的引用。等价于 Window 属性。
status设置窗口状态栏的文本。
top返回最顶层的先辈窗口。

window的常用方法：

函数描述
alert()显示带有一段消息和一个确认按钮的警告框。
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()显示可提示用户输入的对话框。
open()打开一个新的浏览器窗口或查找一个已命名的窗口。
close()关闭浏览器窗口。
setInterval()按照指定周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
clearInterval()取消由 setInterval() 设置的 timeout。
clearTimeout()取消由 setTimeout() 方法设置的 timeout。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>window窗口对象</title>
        <script>
            function testAlert() {
                window.alert("我是警告窗口")
            }

            function testConfirm() {
                var flag = window.confirm("我是确认窗口");
                if (flag) {
                    alert("点击了确定按钮")
                }
            }

            function testPrompt() {
                window.prompt("我是输入框，请输入内容", "默认内容")
            }

            function openWin() {
                window.open("要打开的地址")
            }

            function openWin2() {
                window.open("新文件.html", "", "left=200, top=100, height=200, width=400, status=1,toolbar=no")
            }

            function closeWin() {
                window.close();
            }
        </script>
    </head>
    <body>
        <input type="button" value="警告窗口" onclick="testAlert()" /> <br><br>
        <input type="button" value="确认窗口" onclick="testConfirm()" /> <br><br>
        <input type="button" value="提示输入窗口" onclick="testPrompt()" /> <br><br>
        <input type="button" value="弹出窗口" onclick="openWin()" /> <br><br>
        <input type="button" value="弹出定制窗口" onclick="openWin2()" /> <br><br>
        <input type="button" value="关闭窗口" onclick="closeWin()" />
    </body>
</html>

location、history、navigator对象

window的子对象

  • location对象：代表当前打开窗口的URL
    • 主机名：location.hostname;
    • 端口名：location.port;
    • 主机名+端口名：location.host;
    • 当前文档URL：location.href; （http://localhost:8080/demo/index.html）
    • 刷新页面：location.reload();
  • history对象：有关客户访问过的URL的信息
    • back() 后退到前一个页面 go(-1)
    • forward() 前进到后一个页面 go(1)
    • go(n) 直接前进到第n个页面
    • go(-n) 直接后退到第n个页面
  • navigator对象：管理浏览器基本信息
    • 浏览器名称：navigator.appName
    • 浏览器版本：navigator.appVersion
    • 浏览器类型：navigator.userAgent
 <!--  超链接当作按钮使用 -->
<a href="javascript:void(0)" onclick="history.forward()">前进</a>

8.2 DOM

整个的 HTML 结构可以抽象为一棵树，最顶层元素为 document，属于window对象的子对象

image-20220327145637565

注释也算为一个节点

image-20220327150607601

DOM节点分类：

  • 元素节点：element node： <a href="链接地址">我的链接</a>
  • 属性节点：attribute node：href="链接地址"
  • 文本节点：text node：我的链接

DMO节点关系：

  • 父子关系（parent-child）
    • html 元素作为父级，body 和 head 元素作为子级
  • 兄弟关系（Sibling）
    • a 和 h1 元素就是兄弟关系

查询元素

直接查询：

  • getElementById( )：通过 id 找对象，返回一个节点对象
  • getElementsByName( )：通过 name 找对象，返回多个节点（数组）
  • getElementsByTagName( )：通过 标签名 找对象，返回多个节点（数组）

间接查询（通过节点层次查找，先通过 getElementById() 获得一个元素）：

  • 父节点：parentNode
  • 孩子节点：
    • childNodes 数组对象，表示该节点的所有子节点
    • firstChild：第一个孩子节点
  • 兄弟节点：nextSibling， previousSibling
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            // ============ 直接获取 =============
            function getElemByIdDemo() {
                var elem = document.getElementById("username");
                console.info(elem)
                console.info(elem.type + '   ' + elem.value)
            }

            function getElemByNameDemo() {
                var hobbyArr = document.getElementsByName("hobby");
                for (var i = 0; i < hobbyArr.length; i++) {
                    console.info(hobbyArr[i])
                }
            }

            function getElemByTagNameDemo() {
                var tagArr = document.getElementsByTagName("input");
                for (var i = 0; i < tagArr.length; i++) {
                    console.info(tagArr[i])
                }
            }

            // ============ 间接获取 =============
            function parentNodeDemo() {
                var elem = document.getElementById("username");
                console.info(elem)
                var parentNode = elem.parentNode;
                console.info(parentNode)
            }

            function childNodesDemo() {
                var elem = document.getElementById("professional");
                var childNodes = elem.childNodes;
                for (var i = 0; i < childNodes.length; i++) {
                    // 通过节点的层次来判断  1元素节点  2属性节点  3文本节点
                    if (childNodes[i].nodeType == 1) {
                        console.info(childNodes[i])
                    }
                }
            }

            function siblingsDemo() {
                var elem = document.getElementById("p2");
                var nextSibling = elem.nextElementSibling;  // elem.nextSibling.nextSibling
                console.info(nextSibling)
            }

            window.onload = siblingsDemo;
        </script>
    </head>
    <body>
        <form action="" id="form1">
            用户名：<input type="text" name="username" id="username" value="请输入姓名"> <br>
            密码：<input type="password" name="pwd" id="pwd"> <br>
            爱好：<input type="checkbox" name="hobby" value="music" checked> 音乐
            <input type="checkbox" name="hobby" value="sports"> 体育
            <input type="checkbox" name="hobby" value="art"> 美术 <br>
            职业：<select name="professional" id="professional">
                    <option value="1">工人</option>
                    <option value="2" id="p2">农民</option>
                    <option value="3" selected="selected">解放军</option>
                    <option value="4">知识分子</option>
                </select><br>
            <input type="button" value="提交" onclick="submitForm()">
        </form>
    </body>
</html>
LRcoding
关注
专栏目录
javascript bom是什么及bom和dom的区别
11-22
在BOM中，`window`对象扮演着全局作用域的角色，几乎所有的JavaScript变量和函数都存在于`window`对象的上下文中。因此，可以直接调用`window`对象的属性和方法，而无需明确地指定`window`。例如，`document.write(...
DOM和BOM的使用
01-08
BOM 提供了一些浏览器相关的功能，例如窗口、导航、历史记录等，而 DOM 则是文档对象模型，它允许开发者通过 JavaScript 操作文档的内容和结构。 DOM 概述 DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形...
Java_Learn1
lorenaice的博客
06-21 138
标题对象的初始化过程 1.new用到了class文件，故会先找到.class文件并加载到内存中 2.执行该类中的static代码块，给.class类进行初始化 3.在堆内存中开辟空间，分配内存地址 4.在堆内存中建立对象特有属性，执行默认初始化 5.进行显式初始化 6.进行构造代码块初始化 7.进行对应的构造函数初始化 8.将堆内存地址赋值给栈内存中的变量 单例设计模式 class Student{ private int age; private static Student s = new Stu
【JS基础-1】JavaScript语言简单介绍（语法、变量、数组、流程控制语句、函数、对象和事件）
m0_64378913的博客
04-10 1871
目录1 JS概述2 在HTML中引入JS代码2.1 内部引用2.2 外部引用2.3 功能演示：修改标签内容2.3.1 内部引用2.3.2 外部引用3 JS变量3.1 变量名的命名规则3.2 变量的声明3.3 变量的赋值3.4 变量类型3.4.1 Number3.4.2 字符串3.4.3 布尔值4 JS数组5 流程控制5.1 if 语句5.2 else 语句5.3 else if 语句6 JS函数7 JS对象7.1 对象的创建及访问7.2 浏览器内置基本对象7.2.
Java learn 数组部分（一）
yooppa的博客
08-09 79
数组是一个固定长度的，包含了相同类型数据的 容器 int[] a; 声明了一个数组变量。 []表示该变量是一个数组 int 表示数组里的每一个元素都是一个整数 a 是变量名 但是，仅仅是这一句声明，不会创建数组 有时候也会写成int a[]; 没有任何区别， 但我个人更倾向int[] a; 因为后面会对其创建引用 格式相照应——a=new int[]; 创建数组的时候，要指明数组的长度。 new int[5] 引用概念： 如果变量代表一个数组，比如a,我们把a叫做引用 与基本类型不同 int c = 5;
【JavaLearn】（21）JavaScript入门、基本语法、函数、基本对象、数组、事件、DOM和BOM
weixin_44022996的博客
04-16 330
目录1. JavaScript入门1.1 JavaScript 定义和特点1.2 JavaScript的初步使用1.3 数据类型2. 基本语法2.1 变量2.2 运算符2.3 流程控制2.4 引入外部文件2.5 综合代码3. 函数4. 对象5. 时钟效果6. 数组7. 事件8. DOM 和 BOM8.1 BOM—window对象location、history、navigator对象8.2 DOM查询元素 1. JavaScript入门 静态网页技术 HTML：超文本标记语言 显示内容 CSS：层叠样式
JavaScript | 基本语法(书写形式，数据类型，数组，函数，对象)
1226
05-19 3534
一、初识 JavaScript JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言，通过解释器运行 虽然 js 主要是用于前端页面的开发，但是实际上，也可以进行服务器开发 / 客户端程序的开发 JavaScript 最初只是为了完成简单的表单验证(验证数据合法性)，结果后来不小心就火了 当前 JavaScript 已经成为了一个通用的编程语言 JavaScript 的能做的事情： 网页开发(更复杂的特效和用户交互) 网页游戏开发 服务器开发(node.js) 桌面程序开发(
JavaScript之彻底搞懂DOM与BOM及其区别与用法
热门推荐
跳探戈的小龙虾的博客
03-19 1万+
ECMAScript 是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。 DOM（DocumentObjectModel ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。 BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。
JavaScript语法、DOM对象和监听事件简介
Reggie97的博客
03-28 799
本文详细解释JavaScript语法知识和如何使用DOM对象，介绍了使用JavaScript语言的监听事件等知识
黑马JavaWeb开发笔记05——JavaScript介绍、基本语法、函数、对象（Array, String, json, BOM, DOM）、事件监听
最新发布
apple_68589597的博客
08-25 1352
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）05：JavaScript介绍、基本语法、函数、对象、事件的总结，包括：JS介绍、JS基本语法、JS函数；4. JS对象（Array, String, json, BOM, DOM）和JS事件监听
JavaScript快速入门，满满干货总结，快速掌握JS语法，DOM，BOM，事件
m0_70325779的博客
08-07 823
JavaScript是一个跨平台，面向对象的脚本语言。跨平台，面向对象，脚本语言。前两个特性，学过Java的小伙伴们一定不陌生，因此，有Java基础的同学，学习JavaScript会相对来说比较轻松。再者，JavaScript是脚本语言，所以它是不需要编译，而是由浏览器直接执行的(这句话记住，后面要考哦！！！。本篇主要讲解JavaScript，但是我们又不得不将 JavaScript 与 HTML，CSS做比对。因为它们三者都是构成前端的重要元素，只是各自的分工有所不同。1.1 HTML简介和举例说明。
JavaScript学习资料JavaScript基础语法函数及相关源代码资料.zip
05-04
JavaScript学习资料JavaScript基础语法函数及相关源代码资料: BOM基础.pdf BOM基础（源代码）.zip Date对象之获取和设置月份-getMonth&setMonth（教辅）.pdf DOM事件总结（教辅）.pdf DOM事件（ppt）.pdf JavaScripr...
Javascript之BOM与DOM讲解
02-09
JavaScript是Web开发中不可或缺的一部分，主要由三个组成部分构成：ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）。这三个部分协同工作，使开发者能够创建动态、交互式的网页。 1. ECMAScript： ...
javascript操作BOM对象.docx
07-05
本文档主要介绍了 JavaScript 操作 BOM（ Browser Object Model）对象的相关知识点，包括 window 对象、history 对象、location 对象、Document 对象、Math 对象和 Date 对象等。 window 对象 window 对象是 BOM ...
【JavaLearn】#（23）JSP相关语法、HTTP协议、Servlet介绍、Servlet生命周期、请求和响应、相对路径、转发和重定向
LRcoding
04-05 3843
1. JSP简单内容 1.1 JavaEE JavaEE 包含JSP JavaEE是一个开发分布式企业级应用的规范和标准。JavaEE包含之前学过的所有内容（JavaSE） 真正开发中，很少使用JavaEE的原生内容，都是用 SSM 框架进行快速开发 1.2 部署web项目到服务器 简单的总体流程，先看一下效果。 安装服务器软件Tomcat，下载解压即可 创建Web项目（使用IDEA创建Java Enterprise项目），开发静态页面 新版 IDEA 没有JavaEE的选项，可以在项目中按Alt
【JavaLearn】 #（14）网络及分类、TCP、UDP协议、IP、Socket、TCP编程、UDP编程
LRcoding
09-17 3119
1. 网络基本概念 1.1 计算机网络 定义：是指将地理位置不同的具有独立功能（没有网络可以独立存在的）的多台计算机及其外部设备，通过通信线路连接起来，在网络操作系统，网络管理软件及网络通信协议的管理和协调下，实现资源共享和信息传递的计算机系统 主干：计算机网络是计算机系统 网络功能：资源共享、信息传递 网络组成 网络硬件：计算机、外部设备、通信连接 网络软件：网络操作系统、网络管理软件、网络通信协议 分类–按照规模： 局域网 LAN 城域网 MAN 广域网 WAN 分类–按照传输介质：
【JavaLearn】#（20）注解、元注解、模拟MyBatis注解、JDK新特性、数据库建模、UML建模
LRcoding
03-23 2654
1. 注解 1.1 认识注解 Annotation，JDK1.5 提供的新技术 作用： 编译检查：比如 @SuppressWarnings, @Deprecated 和 @Override，分别代表压制警告信息、定义方法或类为过时的、重写标记 替换配置文件：使用反射来读取注解信息 目前大部分框架(如Spring)都使用了注解简化代码并提高编码的效率（使用注解之前使用的是xml进行配置） @SuppressWarnings("all") // 压制警告信息 public class Student
【JavaLearn】#（11）Map、Iterator迭代器、Collections、集合总结、泛型
LRcoding
08-15 2477
1. Map概述 存储的键值对映射关系，根据 key 找到value 1.1 HashMap 采用 哈希表 （hashtable）存储结构 查询、存储、删除速度快 key无序 key 和 value 都可以为 null 1.2 LinkedHashMap 采用 哈希表 存储结构，同时用链表维护次序 key 有序（添加顺序） key 和 value 都可以为 null 1.3 TreeMap 采用红黑树的存储结构 key有序（自然顺序），查询速度比 List 快，没有 HashSet 快 key
JavaScript入门：基础语法与DOM、BOM探索
"JavaScript基础知识，包括JavaScript的基本语法、函数、window对象、BOM编程、DOM高级编程、JavaScript与CSS的交互、表单验证技术和正则表达式应用等核心概念。" 在JavaScript的世界里，基础知识至关重要，它构成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LRcoding

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值