• JS（JavaScript）详解

    一、JS定义和特点

    • JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。

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

    • JavaScript组成

    1. ECMAScript：JavaScript的核心，语法格式，使用方法

    2. 文档对象模型（DOM，document object model）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档 document对象 有 一个一个的元素(element)

    3. 浏览器对象模型（BOM，browser object model）对浏览器窗口进行访问和操作 window对象扩展：JScript：微软推出的类似JavaScript的语言

     特点：

    1. 脚本语言

      脚本语言是一种简单的程序，是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。

      脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。

    2. 基于对象的语言 非面向对象 ，面向对象有三大特点（封装，继承，多态）缺一不可。

      通常"基于对象"是使用对象，但无法利用现有对象模板产生新的对象类型，也就是说"基于对象"没有继承的特点。

      注意：目前的js脚本已经支持创建自定义类，继承等

    3. 事件驱动 在网页中执行了某种操作的动作，被称为"事件"(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

    4. 简单性 变量类型是采用弱类型，并未使用严格的数据类型。

      var a,b,c; a=123; b="abc"; c=true;

    5. 安全性 JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互

    6. 跨平台（系统）性 JavaScript依赖于浏览器本身，与操作平台无关， 只要计算机安装了支持JavaScript 的浏览器（装有JavaScript解释器），JavaScript 程序就可以正确执行。

      缺点 （浏览器兼容性不好！）

      各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。

    二、JavaScript和Java的区别

    区别1：公司不同，前身不同

    JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是Live Script；

    Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发； Java的前身是Oak（橡树）语言。

    区别2：基于对象和面向对象

    JavaScript是脚本语言，是一种基于对象的语言。本身提供了非常丰富的内部对象供设计人员使用，但不支持继承和多态。

    Java是面向对象的，是一种真正的面向对象的语言，支持封装、继承和多态。

    区别3：变量类型强弱不同

    Java采用强类型变量检查，即所有变量在编译之前必须声明为某一指定类型。如: int x=1234;

    JavaScript中是弱类型变量。统一采用var声明，可赋各种数据类型值。

    三、引入方式

    • 可以在HTML文档中直接嵌入JavaScript代码

    • JavaScript 代码必须位于 标签之间

    • 一个HTML文档中可以出现多个

    六、 函数

    （1）全局函数

    • Global中的函数是全局函数

    • JavaScript 全局函数，直接使用方法名就可以调用

    （2）对象中的函数

    • JavaScript中提供了很多对象，比如String、Math、Date等，和Java中的使用基本相同

    （3）自定义函数 

    1. 语法格式

                    function 函数名(参数1,参数2，… ) { ​ JavaScript代码; ​ }

                    var 函数名 = function (参数1,参数2，… ) { ​ JavaScript代码; ​ }

    • 自定义函数不会自动执行，需要调用才会执行

    • 不需要指明参数类型，因为变量都可以使用var类型

    • 无论是否有返回值，都无需指定返回值类型。

    七、数组

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <script>
    8.     //创建数组的方式一
    9.     var str = [1, 2, 3];
    10.     //创建数组的方式二
    11.     var str1 = new Array();
    12.     var str2 = new Array(10);
    13.     //foreach获取的是每个元素的脚标
    14.     for(var s in str){
    15.         console.log(str[s]);
    16.     }
    17.     //数组的脚标也可以是其他类型的
    18.     var arr = new Array();
    19.     arr["李"] = "四";
    20.     console.log(arr["李"]);
    21. </script>
    22. <body>
    23. </body>
    24. </html>

    八、 事件event

    事件是可以被 JavaScript 侦测到的行为。

    网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onclick（单击） 事件来触发某个函数 。

    属性说明
    onerror当加载图像时发生错误
    onload页面被完成加载
    onresize窗口或框架被调整尺寸
    onmouseover鼠标移入
    onmousemove鼠标移动
    onmouseout鼠标移出
    onmousedown某个鼠标按键被按下
    onmouseup某个鼠标按键被松开
    onclick鼠标单击
    ondbclick鼠标双击
    onkeydown某个键盘的键被按下
    onkeyup某个键盘的键被松开
    onfocus元素获得焦点
    onblur元素失去焦点
    onchange用户改变域中内容
    onselect文本被选定
    onreset重置按钮被点击
    onsubmit提交按钮被点击

    九、 BOM

    • BOM是Browser Object Model的简写，即浏览器对象模型。

    • BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法

    • BOM没有统一的标准(每种客户端都可以自定标准)。

    • BOM的顶层是window对象

    （1）Window对象方法

    函数描述
    alert()显示带有一段消息和一个确认按钮的警告框。
    confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
    prompt()显示可提示用户输入的对话框。
    open()打开一个新的浏览器窗口或查找一个已命名的窗口。
    close()关闭浏览器窗口。
    setInterval()按照指定周期（以毫秒计）来调用函数或计算表达式。
    setTimeout()在指定的毫秒数后调用函数或计算表达式。
    clearInterval()取消由 setInterval() 设置的 timeout。
    clearTimeout()取消由 setTimeout() 方法设置的 timeout。
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script>
    7.         /*
    8.         * BOM : 浏览器对象模型
    9.         *   Window对象在使用时可以省略
    10.         * */
    11.         function f() {
    12.             //1.显示一个带有确定按钮和一段消息的警告框
    13.             alert("按钮被点击了");
    14.  
    15.             //2.显示一个带有一段消息以及确认按钮和取消按钮的对话框
    16.             //点击确认返回true,点击取消返回false
    17.             var b = confirm("确认删除");
    18.  
    19.             //3.显示一个用户输入的对象框
    20.             //返回用户输入的内容
    21.             var s = prompt("密码");
    22.  
    23.             //4.打开一个新的浏览器窗口
    24.             open("index.html");
    25.  
    26.             //5.关闭一个页面
    27.             close();
    28.  
    29.             //6.只执行一次的执行计划
    30.             var timeout = setTimeout(function () {
    31.                 var date = new Date();
    32.                 console.log(date.toLocaleString());
    33.             },5000);//5秒之后调用此方法
    34.  
    35.             //7.按照指定周期执行方法的执行计划
    36.             var interval = setInterval(function () {
    37.                 var date = new Date();
    38.                 console.log(date.toLocaleString());
    39.             },1000);
    40.  
    41.             //8.取消执行一次的执行计划
    42.             clearTimeout(timeout);
    43.             
    44.             //9.取消周期执行的执行计划
    45.             clearInterval(interval);
    46.         }
    47.     </script>
    48. </head>
    49. <body>
    50.     <button onclick="f()">按钮</button>
    51. </body>
    52. </html>

    （2）Window对象属性 

    属性描述
    history客户访问过的URL的信息
    navigator浏览器基本信息
    document文档对象。后续详细讲解
    location当前 URL 的信息
    screen客户端的屏幕信息

    1. location对象：代表当前打开窗口的URL 

    * 主机名： location.hostname; 
    * 端口名：location.port; 
    * 主机名+端口名：location.host; 
    * 当前文档URL： location.href; 
    * 刷新页面：location.reload();

    2. history对象：有关客户访问过的URL的信息 

    * back()  后退到前一个页面  go(-1) 
    * forward() 前进到后一个页面  go(1) 
    * go(n)  直接前进到第n个页面 
    * go(-n)  直接后退到第n个页面

    3. navigator对象：管理浏览器基本信息 

    * 浏览器名称： navigator.appName 
    * 浏览器版本： navigator.appVersion 
    * 浏览器类型： navigator.userAgent

    4. screen屏幕对象：screen

    - 宽像素：screen.width
    - 高像素：screen.height

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script>
    7.         //获取IP
    8.         console.log(location.hostname);
    9.         //获取端口号
    10.         console.log(location.port);
    11.         //获取IP+端口号
    12.         console.log(location.host);
    13.         //获取URL
    14.         console.log(location.href);
    15.         //刷新页面
    16.         console.log(location.reload());
    17.     </script>
    18. </head>
    19. <body>
    20.  
    21. </body>
    22. </html>

    （3）超链接与表单的跳转控制

    超链接和表单都可以进行跳转。跳转属于他们的默认功能。

    一般在他们触发的一个事件中，我们可以通过返回false，来阻止他们的跳转！

    1. function fun5(){
    2.     alert('超链接被点击了！');
    3.     return false;
    4. }
    5.  
    6. function f() {
    7.     alert("阻止表单提交");
    8.     return false;
    9. }
    10.  
    11. <a href="https：//www.baidu.com" onclick="return fun5()">超链接</a>
    12. //阻止提交
    13. <a href="javascript：void(0)">我是超链接</a>
    14.  
    15. <form action="http://www.baidu.com" onsubmit="return f()">
    16.     <input type="submit">
    17. </form>

     十、DOM

    • DOM是document object model，也就是文档对象模型。

    • 我们可以将HTML页面看做一个文档，在js眼中就是一个document对象。

    • 这个document对象中就包含了页面中的所有元素。

    （1）DOM中的节点分类

    1. 元素节点（element node）

    2. 属性节点（attribute node）

    3. 文本节点（text node）

     （2）获取元素

    直接获取指定节点的方法：

    1. getElementById()：根据元素id返回一个节点对象

    2. getElementsByName()：根据元素name返回多个节点（节点数组）

    3. getElementsByClassName()：根据class属性值返回多个节点（节点数组）

    4. getElementsByTagName()：根据标签名返回多个节点（节点数组）

    间接根据层次关系获取节点：

            1.父节点

                    parentNode：表示该元素的父节点

            2.孩子节点

                    childNodes：表示该元素的所有子节点的集合，数组对象

                    firstElementChild：第一个儿子节点

                    lastElementChild：最后一个儿子节点

            3.兄弟节点

                   nextElementSibling：该元素后一个兄弟元素节点

                   previousElementSibling：该元素前一个兄弟元素节点

    （3）操作文本

    • 对于

      、、
      、      等标签，操作内部文本使用innerHTML或者innerText

    • 对于img等单标签，不涉及文本

    • innerHTML 指的是从元素内部的起始位置到终止位置的全部内容, 包括其内部的Html标签

    • innerText 指的是从元素内部起始位置到终止位置的文本内容, 不包含内部的Html标签

    （4）操作属性

    • 方法1：setAttribute(属性名，属性值) 和getAttribute(属性名)

    • 方法2: .属性名

    • 说明：方法1可以对自定义属性进行操作；但是方法2只能对标准属性进行操作。  

    （5）操作元素 

    • 创建节点的方法 document.createElement(“div")

    • 加入孩子节点的方法

      1. parentNode.appendChild(childElement)：末尾追加方式插入节点

      2. parentNode.insertBefore(newNode,beforeNode)：在指定节点前插入新节点

    • 删除节点的方法 parentNode.removeChild(childNode)

    • 替换节点的方法 parentNode.replaceChild(newNode, oldNode)

    （6）操作CSS 

    使用style对象操作CSS

            对于单个单词的css属性，在style对象中的属性名称不变。

            对于多单词的属性改写为小驼峰写法。例如：css中的font-size对应style属性为fontSize.

            注意：是JavaScript的style对象，不是HTML标签的style属性。

    使用className属性操作CSS

            节点的className属性对应于css中的类选择器

            注意：不是this.class = "out"; 是this.className = "out";

  • 相关阅读:
    如何将驱动编译为kernel 模块
    perspectiveTransform warpPerspective getPerspectiveTransform findHomography
    JavaCV音视频开发宝典：UDP推流 使用UDP方式推送TS流 实现UDP一对一直播点播
    全链路压测：优化系统性能的关键措施
    MPI简谈
    Vue3用js跳转带参数的URL
    浅谈static_cast、dynamic_cast、const_cast、reinterpret_cast用法
    ConcurrentHashMap 成员、方法分析
    数据库1（新手易懂，超详细）
    黑魔法-认识 Docker
  • 原文地址：https://blog.csdn.net/weixin_53455615/article/details/126929467