js

最新推荐文章于 2022-12-01 21:45:00 发布
最新推荐文章于 2022-12-01 21:45:00 发布
阅读量231 收藏
点赞数
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jaabbbbbbb/article/details/113865070
版权

一、引言

1.1 JavaScript简介
  • JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。
  • 它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。
1.2 JavaScript组成部分
1.2 JavaScript发展史
  • 它是由Netscape公司的Brendan Eich用10天设计出来一门脚本语言，JavaScript是甲骨文公司的注册商标。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。
  • Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。两者都属于ECMAScript的实现，为了互用性，ECAM（欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。ECMAScript最新版本是2015发布的 ECMAScript 6（ES6）。

二、JavaScript基本语法

2.1 变量声明
  • 在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。
  • var是声明关键字，a是变量名，语句以分号结尾。
  • 这里值得注意的是，JavaScript中的关键字，不可以作为变量名。就像在Java中你不可以写"int int=1;"一样。
var a;

JavaScript的部分关键字：

abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、import、short、while、double、in、static、with。
2.2 基本类型
  • 变量的基本类型又有Number、String、Boolean、Undefined、Null五种。
  • 来声明一个数字Number类型，如下：
var a=1;

  • 来声明一个字符串String类型。

  • 你可以使用:

var a="1";
  • 来声明一个布尔Boolean类型。
  • 你可以使用：
var a=false;

  • 在Java中，当一个变量未被初始化的时候，Java中是null或者基本数据类型的默认值。

  • 在JavaScript中，当一个变量未被初始化的时候，它的值为undefined。

  • 下面是演示undefined的情况：(当一个引用不存在时，它为Null。这个现象我们在之后的引用类型时再详细探讨)

var a;
document.write(a);
2.3 引用类型

在Java中需要类定义，然后再实例对象：

public class Student{
  public int id;
  public String name;
  public int age;
}
public class Test{
    public static void main(String [] args){
        Student student=new Student();
      	student.id=1;
      	student.name="张三";
      	student.age=18;
    }
}

在JavaScript中对象可以直接写出来：

var student={id:1,name:"张三",age:18};
document.write(student.id);
document.write(student.name);
document.write(student.age);

三、JavaScript的DOM【重点】

3.1 概述

  • 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

  • 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

  • HTML DOM 模型被构造为对象的树：

  • 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
    • JavaScript 能够改变页面中的所有 HTML 元素。
    • JavaScript 能够改变页面中的所有 HTML 属性。
    • JavaScript 能够改变页面中的所有 CSS 样式。
    • JavaScript 能够对页面中的所有事件做出反应。
3.2 查找HTML元素

  • 通常，通过 JavaScript，您需要操作 HTML 元素。

  • 为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

    • 通过 id 找到 HTML 元素
      • 在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
      • 方法：document.getElementById(“id属性值”);
      • 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
      • 如果未找到该元素，则 x 将包含 null。
    • 通过标签名找到 HTML 元素
      • 方法：getElementsByTagName(“合法的元素名”);
    • 通过类名找到HTML 元素
      • 方法：getElementsByClassName(“class属性的值”)
3.3 改变HTML

改变HTML输出流：document.write() 可用于直接向 HTML 输出流写内容

<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello world,I'm JavaScript");
</script>
</body>
</html>

改变HTML内容：使用 innerHTML 属性

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="abcd";
</script>
</body>
</html>
  • 改变HTML属性：document.getElementById(id).attribute=新属性值
  • 将attribute替换成真实的属性名
<!DOCTYPE html>
<html>
<body>
<img id="image" src="1.gif">
<script>
document.getElementById("image").src="2.jpg";
</script>
</body>
</html>
3.4 CSS变化
  • 对象.style.property=新样式
  • 将property替换成真实的css属性名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
 
</body>
</html>
3.5 DOM事件
  • HTML DOM 允许我们通过触发事件来执行代码。·
  • 比如以下事件：
    • 元素被点击。
    • 页面加载完成。
    • 输入框被修改。
  • 本例改变了 id=“id1” 的 HTML 元素的样式，当用户点击按钮时
<!DOCTYPE html>
<html>
<body>

<h1 id="id1">myH1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
button</button>

</body>
</html>
  • HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
    • 在本例中，当用户在 h1 元素上点击时，会改变其内容：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

本例从事件处理器调用一个函数：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

如需向 HTML 元素分配 事件，您可以使用事件属性。

<button onclick="displayDate()">点这里</button>

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
3.6 EventListener

addEventListener() 方法

  • 在用户点击按钮时触发监听事件
document.getElementById("myBtn").addEventListener("click", displayDate);

  • addEventListener() 方法用于向指定元素添加事件句柄。

  • addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

  • 你可以向一个元素添加多个事件句柄。

  • 你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。

  • 你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

  • addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

  • 当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

element.addEventListener(event, function, useCapture);
参数名描述
event事件的类型 (如 “click” 或 “mousedown”)
function事件触发后调用的函数
useCapture用于描述事件是冒泡还是捕获。该参数是可选的

当用户点击元素时弹出 “Hello World!” :

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

你可以向同个元素添加不同类型的事件：

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

  • addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。

  • 当用户重置窗口大小时添加事件监听：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

  • 事件传递有两种方式：冒泡与捕获。

  • 事件传递定义了元素事件触发的顺序。 如果你将 p 元素插入到 div元素中，用户点击p 元素, 哪个元素的 “click” 事件先被触发呢？

    • 在 *冒泡 *中，内部元素的事件会先被触发，然后再触发外部元素，即：p 元素的点击事件先触发，然后会触发 div 元素的点击事件。
    • 在 *捕获 *中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：div 元素的点击事件先触发 ，然后再触发 p元素的点击事件。

  • addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);
3.7 操作元素
  • 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
    • 创建元素：document.createElement()
    • 追加元素：appendChild()
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>
  • 删除已有的 HTML 元素
  • 使用方法：removeChild()
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

四、浏览器BOM

  • 浏览器对象模型 (BOM-Browser Object Model) 使 JavaScript 有能力与浏览器"对话"。

  • 由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

4.1 window

  • 所有浏览器都支持 window 对象。它表示浏览器窗口。

  • 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

  • 全局变量是 window 对象的属性。

  • 全局函数是 window 对象的方法。

  • 甚至 HTML DOM 的 document 也是 window 对象的属性之一：

  • window的尺寸

    • 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

      • window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
      • window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

    • 对于 Internet Explorer 8、7、6、5：

      • document.documentElement.clientHeight

      • document.documentElement.clientWidth

    或者

    • document.body.clientHeight

    • document.body.clientWidth

var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
  • Window Screen
    • 可用宽度：screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
    • 可用高度：screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。
document.write("可用宽度: " + screen.availWidth);
document.write("可用高度: " + screen.availHeight);
  • Window Location
    • window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
    • window.location 对象在编写时可不使用 window 这个前缀。 一些例子：
      • location.hostname 返回 web 主机的域名
      • location.pathname 返回当前页面的路径和文件名
      • location.port 返回 web 主机的端口 （80 或 443）
      • location.protocol 返回所使用的 web 协议（http:// 或 https://）
      • location.href 属性返回当前页面的 URL
      • location.assign() 方法加载新的文档
<html>
<head>
<script>
function newDoc()
  {
  window.location.assign("http://www.baidu.com/")
  }
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>
  • Window History
    • window.history 对象包含浏览器的历史。
    • window.history 对象在编写时可不使用 window 这个前缀。
      • history.back()
      • history.forward()
    • 一些方法示例如下：

history.back() - 与在浏览器点击后退按钮相同

<html>
<head>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

history.forward() - 与在浏览器中点击按钮向前相同

<html>
<head>
<script>
function goForward()
  {
  window.history.forward()
  }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>
  • Window Navigator
    • window.navigator 对象在编写时可不使用 window 这个前缀。
<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
4.2 JavaScript定时器
  • 定义定时器：
    • setInterval(‘调用函数’,毫秒时间)：每间隔固定毫秒值就执行一次函数
    • setTimeout(‘调用函数’,毫秒时间)：在固定时间之后执行一次调用函数
  • 关闭定时器：
    • clearInterval(定时器名称)
    • clearTimeout(定时器名称)
jaabbbbbbb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mavlink.js:mavlink javascript 库
06-05
mavlink.js MAVLink 协议的 JavaScript 库集合如何生成从克隆 mavlink 存储库执行生成器工具（它是一个 python 脚本..）：python \ -m pymavlink.tools.mavgen \ --lang=JavaScript \ message_definitions/v1.0/{...
sm-crypto-js:用于 SM 加密算法的 JavaScript 库
05-31
JavaScript Library for SM Crypto Algorithms npm install --save git+https://github.com/bianjieai/sm-crypto-js.git sm2 获取密钥对 const sm2 = require('sm-crypto').sm2 let keypair = sm2....
JS基础篇2：
JH灰色的博客
01-14 333
文章目录1. JS变量1.1 局部变量和全局变量2. JS函数3. 数据类型4. 事件 1. JS变量 注意：JS是弱编程语言，不论何种数据类型，赋值方式： 声明：var 变量名； 赋值：变量名=值； 变量声明后，没手动赋值时，系统默认赋值是undefined. <!DOCTYPE html> <html lang="en"> <head> <...
运行js_轻量级JS运行时-IJJS
weixin_39616348的博客
01-13 310
## 概述ijjs是一个轻量级的JS运行时，使用了libuv，quickjs，支持module开发## 特征- URL- Jemalloc memory pool- XMLHttpRequest & fetch- Worker API- Crypto API- WebAssembly - TCP KCP and UDP sockets- TTY handles- Unix sockets ...
JavaScript
jbjbjbjb10000的博客
06-17 217
使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回true值。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!variable做检测，只要变量的值为:0、null、" "、undefined或者NaN都将返回的是false，反之返回的是true。比如下面的示例： function Account(cash) { this.cash = cash; this.hasMoney = !!cash; } var acco
JavaScript和Node.js的关系
cnds123的专栏
12-01 2554
JavaScript和Node.js的联系与区别。
Node.js | JavaScript也能写后端？
只想和你一起进步
09-23 8357
Node.js作为前端人员高薪必备技能，本文带你了解Node.js的前世今生以及环境搭建
JavaScript(JS)源码集锦
cnds123的专栏
11-07 3802
JavaScript(JS)源码集锦：实现点击图片在两张图片之间来回进行切换；制作倒计时
JavaScript之Three.js
站在巨人的肩膀上前行
07-19 2560
在VisualStudioCode打开。1.安装依赖包node_modules。three.js官网中文文档。Threejs中文网。然后右键打开集成终端。
【前端灵魂脚本语言JavaScript①】——JS引入方式
热门推荐
学Python的小白！
07-12 3万+
Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言
JavaScript JS 如何定义多行文本
lc574907580的博客
03-25 3395
JavaScript JS 如何定义多行文本 JavaScript JS 定义多行文本最优雅的方式 var lines = function () { 你的文本内容开始 asd ccac 文本结束 }; var text = lines.toLocaleString() text = text.substring(15, text.length - 1); console.log(text) ...
JavaScript变量，js定义变量
weixin_43392676的博客
05-17 7509
一、JavaScript的变量分类。js内存为堆或栈 1、基本数据类型变量 a.number 整型 b.string 字符串类型 c.Boolean 布尔值类型 d.null 空 e.undefined 未定义类型 PS：基本数据类型存放在栈中 2、引用数据类型变量 object 对象 array 数组 function 函数 PS：引用数据类型存放在堆中 二、JavaScript中var、let、const的区别和使用 1、var定义变量 var定义的变量能够预解析，如果变量没有定义就直
JS(javascript)-md5加密工具类
06-14
JS(javascript)-md5加密工具类
Eclipse的JavaScript插件 JSEditor
06-02
Eclipse的JavaScript插件 JSEditor
kuromoji.js:日本形态分析器JavaScript实现
07-24
kuromoji.js -- JavaScript file for browser (Browserified) demo/ -- Demo dict/ -- Dictionaries for tokenizer (gzipped) example/ -- Examples to use in Node.js src/ -- JavaScript source test/ -- Unit ...
钢桁架结构振动特性渐变分析工具
最新发布
05-20
钢桁架结构振动特性渐变分析工具
数据库实战-收集一些常见的 MySQL 死锁案例.zip
05-20
数据库实战-收集一些常见的 MySQL 死锁案例.zip 数据库实战-收集一些常见的 MySQL 死锁案例.zip 在工作过程中偶尔会遇到死锁问题，虽然这种问题遇到的概率不大，但每次遇到的时候要想彻底弄懂其原理并找到解决方案却并不容易。这个项目收集了一些常见的 MySQL 死锁案例，大多数案例都来源于网络，并对其进行分类汇总，试图通过死锁日志分析出每种死锁的原因，还原出死锁现场。 实际上，我们在定位死锁问题时，不仅应该对死锁日志进行分析，还应该结合具体的业务代码，或者根据 binlog，理出每个事务执行的 SQL 语句。
Android的移动应用与php服务器交互实例源码.rar
05-20
Android的移动应用与php服务器交互实例源码.rar
【滤波跟踪】基于matlab平方根容积卡尔曼滤波机器人手臂运动跟踪【含Matlab源码 4540期】.mp4
05-20
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
node.js javascript runtime
08-18
Node.js 是一个 JavaScript 运行时(Runtime)，用于在浏览器之外的平台上执行 JavaScript 代码。与浏览器中的 JavaScript 不同，Node.js 不具备内置的 DOM 或浏览器功能。它采用事件驱动、异步编程的方式，并提供了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值