JavaScript 用法

news2024/9/24 7:18:38


JavaScript 用法

在这里插入图片描述

HTML 中的脚本必须位于 标签之间。

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


< s c r i p t > <script> <script> 标签

如需在 HTML 页面中插入 JavaScript,请使用

< s c r i p t > <script> <script> < / s c r i p t > </script> </script> 会告诉 JavaScript 在何处开始和结束。

< s c r i p t > <script> <script> < / s c r i p t > </script> </script> 之间的代码行包含了 JavaScript:

<script>
alert("我的第一个 JavaScript");
</script>

您无需理解上面的代码。只需明白,浏览器会解释并执行位于 < s c r i p t > <script> <script> < / s c r i p t > </script> </script>之间的 JavaScript 代码
lamp 那些老旧的实例可能会在 < s c r i p t > <script> <script> 标签中使用 type=“text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。


< b o d y > <body> <body> 中的 JavaScript

在本例中,JavaScript 会在页面加载时向 HTML 的 < b o d y > <body> <body> 写文本:

实例

<!DOCTYPE html>
<html>
   
  <body>. .
    <script>document.write("<h1>这是一个标题</h1>");
      document.write("<p>这是一个段落</p>");</script>. .</body>
 
</html>

JavaScript 函数和事件

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

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

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

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


< h e a d > <head> <head> 或者 < b o d y > <body> <body> 的JavaScript

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

脚本可位于 HTML 的 < b o d y > <body> <body> < h e a d > <head> <head> 部分中,或者同时存在于两个部分中。

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


< h e a d > <head> <head> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 < h e a d > <head> <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" onclick="myFunction()">尝试一下</button></body>
 
</html>

< b o d y > <body> <body> 中的 JavaScript 函数

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

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

实例

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

外部的 JavaScript

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

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

如需使用外部文件,请在 < s c r i p t > <script> <script> 标签的 “src” 属性中设置该 .js 文件:
实例

<!DOCTYPE html>
<html>
   
  <body>
    <script src="myScript.js"></script>
  </body>
 
</html>

实例

<!DOCTYPE html>
<html>
   
  <head>
    <meta charset="utf-8">
    <title>JS教程</title></head>
   
  <body>
    <h1>我的第一个 Web 页面</h1>
    <p>我的第一个段落。</p>
    <script>document.write(Date());</script></body>
 
</html>

实例

<!DOCTYPE html>
<html>
   
  <head>
    <meta charset="utf-8">
    <title>JS教程</title></head>
   
  <body>
    <h1>我的第一个 Web 页面</h1>
    <p id="demo">我的第一个段落。</p>
    <script>document.getElementById("demo").innerHTML = "段落已修改。";</script></body>
 
</html>

你可以将脚本放置于 < h e a d > <head> <head> 或者 < b o d y > <body> <body>中 实际运行效果与您在 < s c r i p t > <script> <script> 标签中编写脚本完全一致。

myScript.js 文件代码如下:

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

注:lamp 外部脚本不能包含

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

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

相关文章

计算机网络知识解析

本篇文章主要讲的是计算机网络相关的内容&#xff0c;需要有一定的计算机网络的基础知识才能汲取更多的知识。当然没基础也可以看懂&#xff0c;会对计算机网络有一个基础的理解。在这一篇介绍中&#xff0c;我尽可能的覆盖一些面试中的问题&#xff0c;通过本篇文章&#xff0…

2022年吃瓜事件拆解,打造爆款,让你拥有顶级营销思维!

大环境下&#xff0c;谁又是幸存者&#xff1f;2022年吃瓜事件拆解&#xff0c;打造爆款&#xff0c;让你拥有顶级营销思维&#xff08;完整版&#xff09;&#xff01;小伍带你了解【商业营销内核】&#xff01;咱们开讲&#xff01;【事件1】张兰 vs 大S&#xff0c;大女主张…

【PyTorch学习1】B站刘二大人《PyTorch深度学习实践》——线性模型(Linear Model)

b站课程链接&#xff1a;线性模型 1.基本思想&#xff1a; 给出了一组一维数据&#xff0c;定义了一个简单的线性拟合函数&#xff0c;通过穷举法来列出一些权重&#xff08;拟合函数的系数&#xff09;&#xff0c;并计算这些权重对应的拟合损失函数&#xff08;使用均方误差…

C/C++智能指针详解

系列文章目录 文章目录系列文章目录前言一、什么是智能指针&#xff1f;二、使用方法1.shared_ptr2.unique_ptr3.weak_ptr前言 对C/C学习感兴趣的可以看看这篇文章哦&#xff1a;C/C教程 本章主要介绍一些C/C中智能指针的实现原理以及如何使用 一、什么是智能指针&#xff1…

计算机组成原理复习:存储器系统

计算机组成原理复习&#xff1a;存储器系统3.1 存储器的层次化结构3.2 半导体随机存储器&#xff08;RAM&#xff0c;易失性存储器&#xff09;3.2.1 静态随机存储器&#xff08;SRAM&#xff09;3.2.2 动态随机存储器&#xff08;DRAM&#xff09;3.2.3 只读存储器&#xff08…

token认证、Express中实现token的过程

一、token认证 1. 什么是token token的意思是“令牌"&#xff0c;是服务端生成的一串字符串&#xff0c;作为客户端进行请求的一个标识。当用户第一次登录后&#xff0c;服务器生成一个token并将此token返回给客户端&#xff0c;以后客户端只需带上这个token前来请求数据…

Jenkins搭建 笔记总结

文章目录1. 什么是CI/CD(DI)&#xff1f;2. 环境 安装部署3. 搭建 GitLab服务器&#xff08;ssh方式搭建&#xff09;4. 搭建 GitLab服务器&#xff08;Docker方式搭建&#xff09;4.1 搭建Docker环境4.2 docker容器 安装gitlab5. GitLab 提交代码6. Jenkins 配置Maven Git自动…

【信息论与编码 沈连丰】第五章:离散信道及其信道编码

【信息论与编码 沈连丰】第五章&#xff1a;离散信道及其信道编码第五章 离散信道及其信道编码5.1 信道的分类及其描述5.2 无扰离散信道的传输特性5.3 有扰离散信道的传输特性5.4 译码准则5.5 有扰离散信道的信道编码定理5.6 信道编码定理的应用第五章 离散信道及其信道编码 5…

6\8. 语义分析和中间代码生成

6&8. 语义分析和中间代码生成 从几个问题说起&#xff1a; 要计算 34*5 的值如何计算&#xff1f;按照以前的方法&#xff0c;我们会想到利用符号栈和数值栈来完成这个运算。但是有了语法分析之后我们不再需要进行这么复杂的代码构造了。第一&#xff0c;我们可以使用自顶…

AcWing1206.剪格子——学习笔记(未AC)

题目&#xff1a;1206. 剪格子 - AcWing题库https://www.acwing.com/problem/content/description/1208/ import java.util.Scanner;public class Main {public static void main(String args[]){//读数据Scanner input new Scanner(System.in);String MN input.nextLine();S…

Apache ShardingSphere分表的简单使用和常见问题

目录 简介 什么是 Apache ShardingSphere? 分库分表的背景 使用 pom 配置 1&#xff0c;application.properties配置文件 2&#xff0c;创建配置类 分表 验证分表 常见问题 自定义分表规则未生效 简介 官网&#xff1a;Apache ShardingSphere 版本&#xff1a;4…

ArcGIS基础实验操作100例--实验42创建渔网Fishnet

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 高级编辑篇--实验42 创建渔网Fishnet 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff08;1&a…

深度学习推理框架调研总结

深度学习推理框架1.移动端深度学习推理框架调研1.1 小米的MACE&#xff08;2017&#xff09;1.2 阿里的MNN1.3 腾讯的TNN1.4 ARM的tengine1.5 百度的paddle-mobie1.6 Facebook的Caffe2&#xff08;*&#xff09;1.7 Google的TensorFlow Lite &#xff08;*&#xff09;1.8 Appl…

南京晓庄操作系统期末复习【背诵部分】

操作系统期末复习背诵部分第一章1.操作系统的特征&#xff1a;2.操作系统的最基本特征是什么&#xff0c;为什么3.操作系统的目标4.操作系统的主要功能5.计算机资源6.多道程序设计时应解决什么问题7.三种操作系统及特点第二章1.进程的定义2.进程的特征3.进程的三种基本状态4.进…

Spark04: Transformation与Action开发

一、创建RDD的三种方式 RDD是Spark编程的核心&#xff0c;在进行Spark编程时&#xff0c;首要任务是创建一个初始的RDD这样就相当于设置了Spark应用程序的输入源数据然后在创建了初始的RDD之后&#xff0c;才可以通过Spark 提供的一些高阶函数&#xff0c;对这个RDD进行操作&a…

python学生管理系统(pyqt5 含界面)

学生管理系统项目流程 项目模块 账号登陆 人脸识别 增添学生信息 删除学生信息 改动学生信息 查询学生信息 项目主体框架 app.py为主代码&#xff0c;负责用于界面打开展示。img文件夹负责放置项目qrc的图像page文件夹为单独页面的类plugin文件夹为功能模块的类ui文件夹…

机器人中的数值优化|【一】数值优化基础

数值优化基础 凸集 Convex Sets 凸集的定义 令X是线性空间。如果对于X的子集S中的所有x和y&#xff0c;并且在区间 [0,1]中的所有t&#xff0c;点 (1−t)xty(1-t)x ty(1−t)xty也属于S&#xff0c;则S称为凸集。 不失一般性&#xff0c;对于所有的凸集&#xff0c;其线性组…

Zookeeper详解(二)——API 事件监听

Java API znode是zooKeeper集合的核心组件&#xff0c;zookeeper API提供了一小组方法使用zookeeper集合来操纵znode的所有细节。 客户端应该遵循以下步骤&#xff0c;与zookeeper服务器进行清晰和干净的交互。 连接到zookeeper服务器。zookeeper服务器为客户端分配会话ID。…

uniapp 之 接入小程序客服

目录 前言 小程序客服 代码只需要一步 配置也需要一步​​​​​​​ 前言 小程序客服 因老大 看到别人家有在线客服这个功能&#xff0c;就让我也做一个&#xff0c;这个功能很简单 效果图1 代码只需要一步 <button type"default" open-type"con…

MATLAB | 绘图复刻(六) | 分组环形热图

有粉丝问我Ecology Letters, (2021) 24: 1018–1028 Soil carbon persistence governed by plant input and mineral protection at regional and global scales 这篇文章中的Figure 2咋画&#xff0c;原图长这样&#xff1a; 复刻效果&#xff1a; 完整步骤 0 数据定义 按…