当前位置： 首页 > news >正文

JavaScript 入门教程||javascript 简介||JavaScript 用法

news 文章来源：https://blog.csdn.net/m0_69824302/article/details/129065297 2024/11/17 3:44:16

javascript 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

您将学到什么

下面是您将在本教程中学到的主要内容。

JavaScript：直接写入 HTML 输出流

实例

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落。</p>");

尝试一下 »

您只能在 HTML 输出中使用 document.write。如果您在文档加载完成后使用该方法，会覆盖整个文档。

JavaScript：对事件的反应

实例

<button type="button" οnclick="alert('欢迎!')">点我!</button>

尝试一下 »

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。

JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

实例

x=document.getElementById("demo") //查找元素

x.innerHTML="Hello JavaScript"; //改变内容

尝试一下 »

您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

您将在本教程的多个章节中学到有关 HTML DOM 的知识。

JavaScript：改变 HTML 图像

“点亮灯泡”实现代码详解：

<script>functionchangeImage(){//通过查看src中是否有bulbon这个单词来判断当前状态并切换到另外一种状态element=document.getElementById('myimage');if (element.src.match("bulbon")){//如果src属性中有bulbon这个单词，则将其改为下面这个srcelement.src="https://www.w3cschool.cn/statics/images/course/pic_bulboff.gif";}else{//如果src属性中没有bulbon这个单词，则将其改为这个srcelement.src="https://www.w3cschool.cn/statics/images/course/pic_bulbon.gif";}
}
</script><imgid="myimage"onclick="changeImage()"src="https://www.w3cschool.cn/statics/images/course/pic_bulboff.gif"width="100"height="180">

以上实例中代码 element.src.match("bulbon") 的作用意思是：检索 <img id="myimage" οnclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

JavaScript：改变 HTML 样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

实例

x=document.getElementById("demo") //找到元素

x.style.color="#ff0000"; //改变样式

尝试一下 »

JavaScript：验证输入

JavaScript 常用于验证用户的输入。

实例

if isNaN(x) {alert("不是数字")};

尝试一下 »

以上实例只是普通的验证，如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。

您知道吗？

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。

Java（由 Sun 发明）是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

javaScript和ECMAScript的关系

ECMAScript是欧洲计算机制造商协会通过ECMA-262标准化的脚本程序设计语言。

JavaScript 已经由 ECMA 通过 ECMAScript 实现语言的标准化。

ECMAScript 版本

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

年份

名称

描述

1997

ECMAScript 1

第一个版本

1998

ECMAScript 2

版本变更

1999

ECMAScript 3

添加正则表达式

添加 try/catch

ECMAScript 4

没有发布

2009

ECMAScript 5

添加 "strict mode"，严格模式

添加 JSON 支持

2011

ECMAScript 5.1

版本变更

2015

ECMAScript 6

添加类和模块

2016

ECMAScript 7

增加指数运算符 (**)

增加 Array.prototype.includes

ECMAScript 6 也称为 ECMAScript 2015。
ECMAScript 7 也称为 ECMAScript 2016。

JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript:

实例

<script>

alert("我的第一个 JavaScript");

</script>

您无需理解上面的代码。只需明白，浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<body> 中的 JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：

实例

<!DOCTYPE html>

<html>

<body>

.

.

<script>

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落</p>");

</script>

.

.

</body>

</html>

尝试一下 »

JavaScript 函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用：

实例

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction(){

document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

</script>

</head>

<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button" οnclick="myFunction()">尝试一下</button>

</body>

</html>

尝试一下 »

<body> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用：

实例

<!DOCTYPE html>

<html>

<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button" οnclick="myFunction()">尝试一下</button>

<script>

function myFunction(){

document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

</script>

</body>

</html>

尝试一下 »

提示：我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本。

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

实例

<!DOCTYPE html>

<html>

<body>

<script src="myScript.js"></script>

</body>

</html>

尝试一下 »

你可以将脚本放置于 <head> 或者 <body>中 实际运行效果与您在 <script> 标签中编写脚本完全一致。

myScript.js 文件代码如下：

functionmyFunction() {document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; 
}

外部脚本不能包含 <script> 标签。

相关文章：

JavaScript 入门教程||javascript 简介||JavaScript 用法

javascript 简介JavaScript 是互联网上最流行的脚本语言&#xff0c;这门语言可用于 HTML 和 web&#xff0c;更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是脚本语言JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代…...

编程日记 2023/2/17 5:20:34

新闻稿写作指南

当你想要传达一则新闻&#xff0c;写一份新闻稿是非常必要的。新闻稿的目的是让读者了解某个事件或信息&#xff0c;以及提供与之相关的背景信息和重要细节。以下是新闻稿的写作指南&#xff0c;帮助你写出一份清晰、简洁、有价值的新闻稿。1、选择一个有新闻价值的主题你的新闻…...

编程日记 2023/2/17 5:19:26

一文详解Redis持久化的两种方案

一文详解Redis持久化的两种方案1.RDB持久化2.RDB持久化原理3.AOF持久化4.RDB VS AOF1.RDB持久化 RDB全称Redis Database Backup file(Redis数据备份文件)&#xff0c;也被叫做Redis数据快照。简单来说就是把内存中的所有数据都记录到磁盘中。当Redis实例故障重启后&#xff0c…...

编程日记 2023/2/17 5:18:16

第六章 - 数据过滤where（where与and和or的组合用法）

第六章 - 数据过滤&#xff08;where的用法&#xff09;基本用法where的条件限制符等于号不等号! 或者<>小于<大于>小于等于<大于等于>between 的用法空值和非空值组合条件 and组合条件 orand 和 or 的计算次序in 和 not in基本用法 在查询语句中&#xff0…...

编程日记 2023/2/17 5:17:10

Oracle 定时任务例子

背景&#xff1a; 创建一个Oracle的定时任务&#xff0c;每天或指定时间 -----定义存储过程 create or replace procedure AAA_BBB as begin insert into AAA select * from BBB; commit; end; ----------------创建定时任务 declare xjobid number; begin DBMS_JOB.SUBM…...

编程日记 2023/2/17 5:16:02

Android常用9种自动化测试框架对比，Appium有哪些优势？

随着移动终端的普及&#xff0c;手机应用越来越多&#xff0c;也越来越重要。 App的回归测试用例数量也越来越多&#xff0c;全量回归也越来越消耗时间。移动 APP自动化测试 的难点移动 APP的UI自动化测试长久以来一直是一个难点&#xff0c;难点在于UI的”变”, 变化导致自动化…...

编程日记 2023/2/17 5:14:51

在vue2使用百度脑图的kityminder-core进行二次开发思维导图，给节点绑定数据后添加新的图标

需求说明&#xff1a;在给某个节点绑定文件数据后&#xff0c;用户并不能一眼看出哪个节点上绑定了数据&#xff0c;因此需要在绑定文件数据后给节点上加一个图标用于标识。 添加图标 1、在kityminder-core/src/module/file.js文件中添加代码 &#xff08;file.js文件如何添加…...

编程日记 2023/2/17 5:13:44

FPGA时序约束与分析 --- 时序约束概述

本系列参考文献 — FPGA时序与约束分析-吴厚航 FPGA从综合到实现需要的过程如下&#xff1a;synth_design -> opt_design -> place-design -> phys_opt_design -> route_design 1、时序约束的理解 2、时序约束的基本路径 3、时序约束的步骤 4、时序约束的主要方法…...

编程日记 2023/2/17 5:12:36

2022——寒假总结

文章目录背景报名摸索结果总结背景 大一上学期&#xff0c;刚上大学没有尽快适应&#xff0c;什么都没有学到。 因为疫情&#xff0c;所以平时的测试以及期末都是线上进行的&#xff0c;就没怎么认真学&#xff0c;网课直接划水。 我的生活与学习很不平衡&#xff0c;还热衷于参…...

编程日记 2023/2/17 5:11:27

C++11 Lambda表达式

文章首发公众号&#xff1a;iDoitnow 为什么引入Lambda Lambda表达式是一个可以内联在我们代码中的函数&#xff0c;我们可以将他传递给另外一个函数。在没有引入Lambda表达式之前&#xff0c;当我们遇到需要对多个数据&#xff0c;按照同一规则进行操作的时候&#xff0c;创建…...

编程日记 2023/2/17 5:10:21

冰湖灾害遥感监测评价与模拟分析

查看原文>>>mp.weixin.qq.com/s?__bizMzAxNzcxMzc5MQ&mid2247582638&idx1&sna22a1697b16a5edc2b74cb1ccf011689&chksm9be29cbeac9515a8227460103ae1b9f280af688eab0ce5a43448f9fa7c9cab820c389fcdc031&token10630879&langzh_CN#rd【专家简介…...

编程日记 2023/2/17 5:09:13

Highcharts.Chart

Highcharts 是一个使用javascript 脚本来生成图表的工具&#xff0c;和jfreechart 作用类似&#xff0c;都用来生成各种图表&#xff0c;并支持图片的导出和打印。 从官网 www.highcharts.com 上下载的压缩表中的example中有各种图表的例子。 要编写生成图表的例子建议从 文…...

编程日记 2023/2/17 5:08:04

遍历map的几种方法

#先往map加入几个数据 Map<Integer,String> mapnew HashMap<>(); map.put(1,"美好的周一"); map.put(2,"美好的周二"); map.put(3,"美好的周三"); 1 2 3 4 方法一&#xff1a;普通的foreach循环&#xff0c…...

编程日记 2023/2/17 5:06:55

RocketMQ源码分析之Broker概述与同步消息发送原理与高可用设计及思考

1、Broker概述 Broker 在 RocketMQ 架构中的角色&#xff0c;就是存储消息&#xff0c;核心任务就是持久化消息&#xff0c;生产者发送消息给 Broker,消费者从 Broker 消费消息&#xff0c;其物理部署架构图如下&#xff1a; 备注&#xff1a;以上摘录自官方 RocketMQ 设计文档…...

编程日记 2023/2/17 5:05:46

K8s常见面试题总结

部分内容来自&#xff1a;k8s面试题大全&#xff08;持续更新中&#xff09; 目录 k8s常考面试题 1.1.什么是k8s&#xff1f; 1.2.简述Docker和Kubernetes的关系 1.3.k8s的组件有哪些&#xff0c;作用分别是什么&#xff1f; 1.4.简述kubelet的功能和作用 1.5.简述pod是…...

编程日记 2023/2/17 5:04:36

OpenFeign 自定义解码器Decoder 失效

问题描述 项目上开发了OpenFeign的自定义解码器&#xff0c;用来统一处理返回结果。 开发完后测试已经生效了&#xff0c;过两天后&#xff0c;这块代码没有变动的情况下&#xff0c;发现请求结果突然又不走自定义的解码器了。 代码如下 解码器 BaseResponseFeignDecoder …...

编程日记 2023/2/17 5:03:28

c++练习题8

1&#xff0e;在do-while循环中&#xff0c;循环由do开始&#xff0c;用while结束&#xff1b;必须注意的是&#xff1a;在while表达式后面的 不能丢&#xff0c;它表示do-while语句的结束。 A&#xff09;0 B&#xff09;1 C&#xff09;&#xff1b;…...

编程日记 2023/2/17 5:02:20

Python循环语句代码详解：while、for、break

目录 1 while循环 1 while循环 循环语句是程序设计中常用的语句之一。任何编程语言都有while循环&#xff0c;Python也不例外。while循环的格式如下所示。 while(表达式): … else: … while循环的执行过程&#xff1a;当循环表达式为真时&#xff0c;依次执行whi…...

编程日记 2023/2/17 5:01:09

vue父子组件传值不能实时更新

最近做项目&#xff0c;遇到个大坑&#xff0c;这会爬出来了&#xff0c;写个总结&#xff0c;避免下次掉坑。 vue父子组件传值不能实时更新问题&#xff0c;父组件将值传给了子组件&#xff0c;但子组件显示的值还是原来的初始值&#xff0c;并没有实时更新&#xff0c;为什么…...

编程日记 2023/2/17 5:00:00

2023美赛A题思路数据代码分享

文章目录赛题思路2023年美国大学生数学建模竞赛选题&论文一、关于选题二、关于论文格式三、关于论文提交四、论文提交流程注意不要手滑美赛A题思路数据代码【最新】赛题思路 (赛题出来以后第一时间在CSDN分享) 最新进度在文章最下方卡片&#xff0c;加入获取一手资源 202…...

编程日记 2023/2/17 4:58:51

【蓝桥杯集训·每日一题】AcWing 3768. 字符串删减

文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴双指针一、题目 1、原题链接 3768. 字符串删减 2、题目描述 给定一个由 n 个小写字母构成的字符串。 现在&#xff0c;需要删掉其中的一些字母&#xff0c;使得字符串中不…...

编程日记 2023/2/17 4:57:42

Python|每日一练|树|深度优先搜索|数组|二分查找|链表|双指针|单选记录：填充每个节点的下一个右侧节点指针|搜索插入位置|旋转链表

1、填充每个节点的下一个右侧节点指针&#xff08;树&#xff0c;深度优先搜索&#xff09; 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node { int val; Node *left; Node *rig…...

编程日记 2023/2/17 4:56:33

降雨量实时监测系统压电式雨量计

压电式雨量传感器由上盖、外壳和下盖组成&#xff0c;壳体内部有压电片和电路板&#xff0c;可以固定在外径50mm立柱上和气象站横杆上。传感器采用冲击测量原理对单个雨滴重量进行测算&#xff0c;进而计算降雨量。雨滴在降落过程中受到雨滴重量和空气阻力的作用&#xff0c;到…...

编程日记 2023/2/17 4:55:24

滑动相关的原理以及用滤波器实现滑动相关（匹配滤波器捕获DMF）

目录滑动相关匹配滤波器捕获&#xff08;DMF&#xff09;滑动相关 滑动相关属于一种时域捕获方法&#xff0c;其具体原理是是通过本地序列与接收信号在固定窗长内滑动累加得到相关结果。 一般滑动相关算法可以用于对自相关性非常好的伪码进行同步判决。 我们首先生成一组自相关…...

编程日记 2023/2/17 4:54:14

计算机网络笔记（三）—— 数据链路层

数据链路层概述 数据链路层以帧为单位传输数据。 封装成帧&#xff1a;给网络层提供的协议数据单元添加帧头帧尾 差错检测&#xff1a;检错码封装在帧尾 可靠传输&#xff1a;尽管误码不能避免&#xff0c;但如果可以实现发送什么就接受什么&#xff0c;就叫可靠传输 封装成…...

编程日记 2023/2/17 4:53:03

【日常】矩阵正态分布参数检验问题

最近给凯爹做的一个苦力活&#xff0c;统计检验这个东西说实话也挺有趣&#xff0c;跟算法设计一样&#xff0c;好的检验真的是挺难设计的&#xff0c;就有近似算法的那种感觉&#xff0c;检验很难保证size和power都很理想&#xff0c;所以就要做tradeoff&#xff0c;感觉这个假…...

编程日记 2023/2/17 4:51:50

QML矩形（Rectangle）

Rectangle 用于绘制矩形 常见的属性&#xff1a; 填充颜色&#xff1a;纯色&#xff1a;color 渐变 &#xff1a;Gradient类 渐变的优先级大于纯色Gradient&#xff08;渐变色&#xff09;&#xff1a; 渐变由多种颜色定义&#xff0c;这些颜色将无缝混合&#xff0c…...

编程日记 2023/2/17 4:50:42

CSS自定义鼠标样式

CSS自定义鼠标样式 属性值 属性描述url需使用的自定义光标的 URLdefault默认光标&#xff08;通常是一个箭头&#xff09;auto默认。浏览器设置的光标crosshair光标呈现为十字线pointer光标呈现为指示链接的指针&#xff08;一只手&#xff09;move此光标指示某对象可被移动e…...

编程日记 2023/2/17 4:49:33

春招Leetcode刷题日记-D4-双指针算法-滑动窗口快慢指针

D4-双指针算法-滑动窗口&&快慢指针快慢指针算力扣141. 环形链表思路代码力扣142. 环形链表 II思路代码滑动窗口力扣76. 最小覆盖子串思路代码力扣424. 替换后的最长重复字符思路代码快慢指针算 快慢指针算法&#xff0c;多用于链表当中&#xff0c;常见的如&#xff1…...

编程日记 2023/2/17 4:48:25

【go】结合一个go开源项目分析谷歌浏览器cookie为什么不安全 附go项目导包失败怎么解决教程

本文创作背景 源于谷歌浏览器提示密码被泄露 并且某站很快收到了异地企图登录的提醒。 当即怀疑是不是谷歌浏览器保存的密码不安全&#xff0c;最后查阅诸多资料 并找到一个go语言编写的开源项目进行研究&#xff0c;虽然最终不能确定密码是如何泄露的 但研究结论还是让人不由感…...

编程日记 2023/2/17 4:47:18

网站建设为什么这么贵/优化系统的软件

在Linux下怎么确定哪个网卡对应哪个接口&#xff1f; 有个需求&#xff0c;公司一台CentOS 6.5需要连接外网和内网环境&#xff0c;所以额外安装一块千兆网卡&#xff0c;主板集成的一个&#xff0c;以及千兆网卡的两个&#xff0c;一共三个网卡接口。系统安装完成之后&#…...

编程日记 2024/11/17 3:23:49

青浦营销型网站建设/东莞网站建设工作

PMP认证在国内的背景 随着国家经济建设从基础设施转向高端产业以及市场项目规模扩大&#xff0c;投资额度上升&#xff0c;在项目中对项目管理者的要求也越来越高&#xff0c;国内科技的发展&#xff0c;企业扩展项目管理人才时的要求也会随之提高&#xff0c;这时候很需要竞争…...

编程日记 2024/11/17 2:49:25

wordpress pin/51外链代发网

https://www.anquanke.com/post/id/104401 http://blog.nsfocus.net/cve-2018-1273/ http://www.freebuf.com/news/7080.html http://bbs.qcloud.com/thread-49690-1-1.html http://www.cnvd.org.cn/webinfo/show/4247...

编程日记 2024/11/17 0:48:25

平板上做网站的软件/上海网络seo公司

如果是开平方根可以使用函数 SQRT(number)&#xff0c;返回数值的平方根 比如SQRT(9) 计算返回3如果是开立方根或者n次方根&#xff0c;可以进e68a847a64364行幂运算&#xff0c;POWER(number,power)函数表示返回number数值的power次乘幂&#xff0c;如POWER(5,2)表示5的2次方&…...

编程日记 2024/11/16 23:37:32

网站建设分工的通知/免费注册二级域名的网站

亲爱的小伙伴们咱们5月开课计划已出座位有限感兴趣的小伙伴赶紧预约啦建策科技5月开班计划◼ 主从复制&#xff1a;是用来建立一个和主数据库完全一样的数据库环境&#xff0c;称为从数据库&#xff1b;主数据库一般是准实时的业务数据库。◼ 主从复制的作用&#xff1a;做数据…...

编程日记 2024/11/16 23:26:54

做网站买服务器大概多少钱/线上营销推广公司

导出excel时&#xff0c;xls格式只能导出不超过255行或列的文件&#xff0c;超过之后只能使用xlsx,为避免客户选择xls按钮&#xff0c;建议去掉xls按钮 找到jar包&#xff0c;复制一份&#xff0c;注意做好备份。 解压&#xff0c;找到弹出框的文件 &#xff0c;注释掉相应的按…...

编程日记 2024/11/16 23:25:53