js简介以及在html中的2种使用方式(hello world)

简介

javascript :是一个跨平台的脚本语言;是一种轻量级的编程语言。

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。

HTML: 结构

css: 表现

JS: 行为

HTML+CSS 只能称之为静态网页,加入js网页则有了灵魂称之为动态网页

脚本语言的特点:

不能独立运行,要依赖网页;

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

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

javascript 在网页中使用的两种方式:

方式1:直接在script标签中编写;

方式2:引用外部js代码

注意

1.可以有多个script标签,多个script标签都是自上而下顺序执行

2.alert()的作用:控制浏览器弹出一个警告对话框

方式1实例:直接在script标签中编写

1.新建一个html文件(如:demo.html),并将下述内容写入文件中

<!DOCTYPE HTML><html><title>hello world</title><body></body>
</html>

2.在html文件中插入一个script标签

<script>alert("hello world"); </script>
<script>alert("hello world-2"); </script>

 

3.将html文件用浏览器打开,即可看见hello world

点击确定后,可以看见hello world-2

demo.html完整文件内容如下:

<!DOCTYPE HTML>
<html><title>hello world</title><body><script>alert("hello world"); </script><script>alert("hello world-2"); </script></body>
</html>

方式2实例:引用外部js代码

1.新建一个html文件(如:demo.html),并将下述内容写入文件中

<!DOCTYPE HTML><html><title>hello world</title><body></body>
</html>

2.在html文件(如:demo.html)同目录下新建一个js文件(如:demojs.js),并将下述内容写入文件中

alert("hello world");

3.在html文件中引用外部js代码(如:demojs.js)

<script src="./demojs.js">alert("hello world-2");</script>
<script>alert("hello world-3");</script>

 

4.将html文件用浏览器打开,即可看见hello world

点击确定后,可以看见hello world-3

demo.html完整文件内容如下:

<!DOCTYPE HTML>
<html><title>hello world</title><body><script src="./demojs.js">alert("hello world-2");</script><script>alert("hello world-3");</script></body>
</html>

注意:script标签一旦引入外部文件,就不能编写代码了,即使写了浏览器也会自动忽略。

如果需要再创建一个script代码即可。

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

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

相关文章

【腾讯云 TDSQL-C Serverless 产品测评】全面测评TDSQL-C Mysql Serverless

全面测评TDSQL-C Mysql Serverless 文章目录 全面测评TDSQL-C Mysql Serverless前言什么是TDSQL-C Mysql Serverless初始化 TDSQL-C Mysql Serverless新建数据库建立数据表开启外网访问 兼容性SQL文件 导入导出navicat 直接在线传输 构建测试环境准备Python测试脚本准备 Jmeter…

微信小程序 蓝牙设备连接,控制开关灯

1.前言 微信小程序中连接蓝牙设备&#xff0c;信息写入流程 1、检测当前使用设备&#xff08;如自己的手机&#xff09;是否支持蓝牙/蓝牙开启状态 wx:openBluetoothAdapter({}) 2、如蓝牙已开启状态&#xff0c;检查蓝牙适配器的状态 wx.getBluetoothAdapterState({}) 3、添加…

web基础与http协议

web基础 dns与域名&#xff1a; 网络是基于tcp/ip协议进行通信和连接的 应用层----传输层-----网络层-----数据链路层----物理层 IP地址&#xff0c;我们每一台主机都有一个唯一的地址标识&#xff08;固定的IP地址&#xff09;&#xff0c;区分用户和计算机 通信。 IP地址&am…

React 调试开发插件 React devtools 的使用

可以在谷歌扩展应用商店里获取这个插件。如果不能访问谷歌应用商店&#xff0c;可以点此下载最新版 安装插件后&#xff0c;控制台出现 “Components” 跟 “Profiler” 菜单选项。 查看版本&#xff0c;步骤&#xff1a; 下面介绍 react devtools 的使用方式。 在 Component…

unity之Input.GetKeyDown与Input.GetKey区别

文章目录 Input.GetKeyDown与Input.GetKey区别 Input.GetKeyDown与Input.GetKey区别 Input.GetKey 和 Input.GetKeyDown 是 Unity 中用于检测按键状态的两个不同函数。它们之间的区别在于何时触发。 Input.GetKey(KeyCode key): 这个函数会在用户按住指定的键时触发&#xff0…

【Java转Go】快速上手学习笔记(三)之基础篇二

【Java转Go】快速上手学习笔记&#xff08;二&#xff09;之基础篇一 了解了基本语法、基本数据类型这些使用&#xff0c;接下来我们来讲数组、切片、值传递、引用传递、指针类型、函数、map、结构体。 目录 数组和切片值传递、引用传递指针类型defer延迟执行函数map结构体匿名…

【gitkraken】gitkraken自动更新问题

GitKraken 会自动升级&#xff01;一旦自动升级&#xff0c;你的 GitKraken 自然就不再是最后一个免费版 6.5.1 了。 在安装 GitKraken 之后&#xff0c;在你的安装目录&#xff08;C:\Users\<用户名>\AppData\Local\gitkraken&#xff09;下会有一个名为 Update.exe 的…

K8s+Docker+KubeSphere+DevOps笔记

K8sDockerKubeSphereDevOps 前言一、阿里云服务器开通二、docker基本概念1.一次构建、到处运行2、docker基础命令操作3、docker进阶操作1.部署redis中间件2.打包docker镜像 三、kubernetes 大规模容器编排系统1、基础概念&#xff1a;1、服务发现和负载均衡2、存储编排3、自动部…

【腾讯云 TDSQL-C Serverless 产品体验】基于腾讯云轻量服务器以及 TDSQL-C 搭建 LNMP WordPress 博客系统

文章目录 一、前言二、数据库发展与云原生数据库2.1 数据库发展简介2.2 云原生数据库简介2.2.1 云数据库与云原生数据库区别 三、腾讯云 TDSQL-C 数据库3.1 什么是腾讯云 TDSQL-C 数据库3.2 为什么推出 TDSQL-C 数据库&#xff1f;传统 MySQL 架构存在较多痛点3.2.1 传统 MySQL…

完美解决微信小程序van-field left-icon自定义图片

实现效果&#xff1a; <view class"userName"><van-field left-icon"{{loginUserNameIcon}}" clearable class"fieldName" value"{{ loginUserName }}" placeholder"请输入账号" border"{{ false }}" &g…

[保研/考研机试] KY11 二叉树遍历 清华大学复试上机题 C++实现

题目链接&#xff1a; 二叉树遍历_牛客题霸_牛客网编一个程序&#xff0c;读入用户输入的一串先序遍历字符串&#xff0c;根据此字符串建立一个二叉树&#xff08;以指针方式存储&#xff09;。题目来自【牛客题霸】https://www.nowcoder.com/share/jump/43719512169254700747…

Linux:安全技术与防火墙

目录 一、安全技术 1.安全技术 2.防火墙的分类 3.防水墙 4.netfilter/iptables关系 二、防火墙 1、iptables四表五链 2、黑白名单 3.iptables命令 3.1查看filter表所有链 iptables -L ​编辑3.2用数字形式(fliter)表所有链 查看输出结果 iptables -nL 3.3 清空所有链…

vue根据template结构自动生成css/scss/less样式嵌套

vscode搜索安装插件&#xff1a;AutoScssStruct4Vue

基于ACF,AMDF算法的语音编码matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .......................................................................... plotFlag …

飞机打方块(二)游戏界面制作

一、背景 1.新建bg节点 二、飞机节点功能实现 1.移动 1.新建plane节点 2.新建脚本GameController.ts,并绑定Canvas GameControll.ts const { ccclass, property } cc._decorator;ccclass export default class NewClass extends cc.Component {property(cc.Node)canvas:…

二、7.用户进程

TSS 是 x86CPU 的特定结构&#xff0c;被用来定义“任务”&#xff0c;它是内置到处理器原生支持的多任务的一种形式。 通过 call 指令&#xff0b;TSS 选择子的形式进行任务切换&#xff0c;此过程大概分成 10 步&#xff0c;这还是直接用 TSS 选择子进行任务切换的步骤&…

Hive底层数据存储格式

前言 在大数据领域,Hive是一种常用的数据仓库工具,用于管理和处理大规模数据集。Hive底层支持多种数据存储格式,这些格式对于数据存储、查询性能和压缩效率等方面有不同的优缺点。本文将介绍Hive底层的三种主要数据存储格式:文本文件格式、Parquet格式和ORC格式。 一、三…

jenkins同一jar包部署到多台服务器

文章目录 安装插件配置ssh服务构建完成后执行 没有部署过可以跟这个下面的步骤先部署一遍&#xff0c;我这篇主要讲jenkins同一jar包部署到多台服务器 【Jenkins】部署Springboot项目https://blog.csdn.net/qq_39017153/article/details/131901613 安装插件 Publish Over SSH 这…

三款远程控制软件对比,5大挑选指标:安全、稳定、易用、兼容、功能

陈老老老板&#x1f934; &#x1f9d9;‍♂️本文专栏&#xff1a;生活&#xff08;主要讲一下自己生活相关的内容&#xff09;生活就像海洋,只有意志坚强的人,才能到达彼岸。 &#x1f9d9;‍♂️本文简述&#xff1a;三款远程控制软件对比&#xff0c;5大挑选指标&#xff1…

openpnp - 板子上最小物料封装尺寸的选择

文章目录 openpnp - 板子上最小物料封装尺寸的选择概述END openpnp - 板子上最小物料封装尺寸的选择 概述 现在设备调试完了, 用散料飞达载入物料试了一下. 0402以上贴的贴别准, 贴片流程也稳, 基本不需要手工干预. 0201可以贴, 但是由于底部相机元件视觉识别成功率不是很高…