第一节JavaScript 简介与使用

  • JavaScript简介

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

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

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

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

二、JavaScript用法

1、描述

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

JavaScript脚本代码可被放置在HTML页面的<body>和<head>标签中。

2、<script>标签

如在HTML中插入JavaScript,请使用<script>标签

<script>是代码的起始位置

</script>是代码的结束位置

  1. JavaScript.write(“”)直接写入内容到HTML中

示例代码:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>JavaScript简介与使用</title><script type="text/javascript">document.write("script标签在head标签中,将此内容直接写入到HTml中");document.write("<p>我是一个段落</p>")</script>
</head>
<body><p>您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。</p>
</body>
</html>

效果图:

4、JavaScript对事件的反应

只上在body标签中代码:

<body><h1>我的第一个 JavaScript</h1><p>JavaScript 能够对事件作出反应。比如对按钮的点击:</p><button type="button" onclick="alert('欢迎!')">点我!</button></body>

效果图:

5、JavaScript改变HTMl内容

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

代码:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>JavaScript简介与使用</title><script type="text/javascript">function myFunction () {var curDocument = document.getElementById("pId"); // 查找元素curDocument.innerHTML = "Change HTML Content";    //改变内容}</script></head>
<body><h1>5、JavaScript改变HTMl内容</h1><p id="pId">JavaScript 能改变 HTML 元素的内容。</p><!-- <script type="text/javascript">function myFunction () {var curDocument = document.getElementById("pId"); // 查找元素curDocument.innerHTML = "Change HTML Content";    //改变内容}</script> --><button type="button" onclick="myFunction()">点击这里</button></body>
</html>

效果图:

说明:

 Var x = document.getElementById("修改标签内容的ID") -- 查找元素,

x.innerHTML = “修改的内容”-- 改变内容

将脚本放置于 <head> 或者 <body>中,脚本运行效果完全一致。

6、JavaScript改变HTMl图像

<body><script>
function changeImage()
{element=document.getElementById('myimage')if (element.src.match("bulbon")){element.src="/images/pic_bulboff.gif";}else{element.src="/images/pic_bulbon.gif";}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p></body>

        以上实例中代码 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样式:

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

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

7、JavaScript:验证输入

<body><h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{var x=document.getElementById("demo").value;if(x==""||isNaN(x)){alert("不是数字");}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button></body>

总结:

JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台
  • 将脚本放置于 <head> 或者 <body>中,或者将js放在外部,脚本运行效果完全一致

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/197130.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法基础六

搜索插入位置 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 示例 1: 输入: nums [1,3,5,6], target 5 输出: 2 示例 2: 输入: nums [1,3,5,6], target 2 输…

每日一练2023.12.4——正整数【PTA】

一时间网上一片求救声&#xff0c;急问这个怎么破。其实这段代码很简单&#xff0c;index数组就是arr数组的下标&#xff0c;index[0]2 对应 arr[2]1&#xff0c;index[1]0 对应 arr[0]8&#xff0c;index[2]3 对应 arr[3]0&#xff0c;以此类推…… 很容易得到电话号码是18013…

Linux常用快捷键

1. tab 键补全 1)当我们忘记了一些指令怎么写时&#xff0c;可以双击tab键&#xff0c;查看所有指令&#xff0c;显示出来后可以按enter键往下翻&#xff0c;想要取消命令可以按ctrl c。 2)知道开头怎么写&#xff0c;后面的忘了&#xff0c;也可以双击tab键查询开头排列的指令…

通过证书透明度发现更多相关资产

通过证书透明度发现更多相关资产 1.证书透明度概述2.搜索实战3.为什么证书透明度技术是可行的4.DigiCert 和其他 CA5.缺陷缓解措施 1.证书透明度概述 许多现代网站都采用自动颁发和续订 TLS 证书&#xff0c;在设置 TLS 证书部署的方式上存在缺陷。它允许任何人发现同一服务器…

【皇帝的新装】像管理产品一样,来管理自己

在前进的路上需要不时的回头看&#xff0c;看自己来时的脚步&#xff0c;是杂乱无章&#xff0c;还是方向一致。善于从经验中总结可以让我们少走许多弯路&#xff0c;降低我们的消耗。 偶然间&#xff0c;回头看看&#xff0c;入行产品经理已经三年有余。沉迷在各种具体事务中&…

ChatGPT使用路径:从新手到专家的指南

原文&精华文章&转载注明&#xff1a;ChatGPT与日本首相交流核废水事件-精准Prompt... hello&#xff0c;我是小索奇&#xff0c;有任何问题或者需要帮助的都可以在这里找到我或者留言哈 一、初识ChatGPT 什么是ChatGPT&#xff1f; ChatGPT是一种大型语言模型&…

回溯法及例题(C++实现)

回溯法概念 概念&#xff1a;在包含问题所有解的解空间树中&#xff0c;按照深度优先搜索的策略&#xff0c;根据根结点&#xff08;开始节点&#xff09;出发搜索解空间树。 流程&#xff1a;首先根结点成为活节点&#xff0c;同时也成为当前的扩展结点。在当前的扩展结点处…

docker compose 搭建reids集群 1主2从架构

要使用 Docker Compose 搭建一个包含 1 个主节点和 2 个从节点的 Redis 集群&#xff0c;并将数据和日志文件挂载到宿主机上&#xff0c;你需要编写一个 docker-compose.yml 文件。这个文件将定义三个 Redis 服务&#xff0c;并配置相应的卷来持久化数据和日志。 下面是一个相…

代码随想录day5 哈希表part 01 242.有效的字母异位词 349. 两个数组的交集 202. 快乐数 1. 两数之和

当我们遇到了要快速判断一个元素是否出现集合里的时候&#xff0c;就要考虑哈希法。 哈希碰撞&#xff1a;1、拉链法&#xff1a;其实拉链法就是要选择适当的哈希表的大小&#xff0c;这样既不会因为数组空值而浪费大量内存&#xff0c;也不会因为链表太长而在查找上浪费太多时…

<JavaEE> 单例模式的两种实现:“饿汉模式”和“懒汉模式”

目录 一、单例模式概述 二、“饿汉模式”实现单例模式 三、“懒汉模式”实现单例模式 3.1 单线程下的“懒汉模式” 3.2 多线程下的“懒汉模式” 一、单例模式概述 1&#xff09;什么是单例模式&#xff1f; 单例模式是一种设计模式。 单例模式可以保证某个类在程序中只存…

免费百度SEO优化工具,百度SEO优化排名工具

百度SEO关键词工具 让我们聚焦在百度SEO关键词工具上。对于任何想要在百度搜索引擎中脱颖而出的网站管理员而言&#xff0c;深入了解用户搜索习惯和关键词的选择是至关重要的。 百度SEO关键词工具不仅提供了免费的服务&#xff0c;而且功能强大。通过输入相关领域的关键词&…

ESP32-Web-Server编程-通过 Web 下载文本

ESP32-Web-Server编程-通过 Web 下载文本 概述 当你希望通过网页导出设备的数据时&#xff0c;可以在 ESP32 上部署一个简单的文件 Web 服务器。 需求及功能解析 本节演示如何在 ESP32 上部署一个最简单的 Web 服务器&#xff0c;来接收浏览器或者 wget 指令请求文件数据。…

VMware安装Ubuntu系统(Server端,Desktop端步骤一样)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

MFC发送ZPL指令控制斑马打印机

1、参考1&#xff1a;用Python操控斑马打印机的技术总结 - 重拾初心的青年人 - 博客园 (cnblogs.com) 参考2&#xff1a;VC斑马打印机_vc zpl-CSDN博客 参考3&#xff1a;斑马打印机ZPL语言编程实战_梅长酥的博客-CSDN博客 参考4&#xff1a;关于斑马打印机开发的几种方式_斑马…

Appium:iOS测试比Android测试更难?

iOS测试与Android测试&#xff1a; Appium 是一个开源的自动化测试框架&#xff0c;用于iOS、Android和Web应用程序。它允许开发者使用自己的语言来编写测试脚本&#xff0c;并且可以运行在多种平台上。 就Appium本身而言&#xff0c;它为iOS和Android提供了相似的测试能力和…

java语言中fail-fast机制和fail-safe机制的作用是什么?

Java中的"fail-fast"&#xff08;快速失败&#xff09;和"fail-safe"&#xff08;安全失败&#xff09;是两种不同的迭代器策略&#xff0c;主要用于处理在迭代集合时可能发生的并发修改问题。 Fail-Fast 机制&#xff1a; “Fail-fast” 是 Java 集合框…

JDK8新特性——Lambda表达式

文章目录 Lambda表达式基本使用Lambda表达式省略规则 Lambda表达式是JDK8新增的一种语法形式&#xff0c;其 作用&#xff1a;用于简化匿名内部类代码的书写。 Lambda表达式基本使用 Lamdba是有特有的格式的&#xff0c;具体格式如下&#xff1a; (被重写方法的形参列表) -&…

[ROS2] --- ROS diff ROS2

1 ROS存在的问题 一旦Ros Master主节点挂掉后&#xff0c;就会造成整个系统通信的异常,通信基于TCP实现&#xff0c;实时性差、系统开销大对Python3支持不友好&#xff0c;需要重新编译消息机制不兼容没有加密机制、安全性不高 2 ROS and ROS2架构对比 ROS和ROS2架构如下图所…

我个人最喜欢的远程连接Linux服务器的方案

2023年12月4日&#xff0c;周一晚上 在Windows Terminal用Windows自带的ssh.exe来远程连接Linux服务器是我最喜欢的方案。 因为真的非常简洁美观&#xff0c;而且想改字体、背景什么的也非常方便&#xff0c; 最重要的是&#xff0c;我个人非常喜欢纯文本的界面&#xff0c;觉…

C# - Opencv应用(3) 之矩阵Mat使用[图像截取粘贴、ROI操作、位运算、数学计算]

C# - Opencv应用&#xff08;3&#xff09; 之矩阵Mat使用[图像截取粘贴、ROI操作、位运算、数学计算] 图像读取&#xff0c;大小、截取、位运算图像ROI操作&#xff1a;粘贴赋值、滤波图像数学计算部分结果如下&#xff1a; 1.图像读取&#xff0c;大小、截取、位运算 //图…