html中的JavaScript

article/2025/11/9 14:47:36

JavaScript ——简介

JavaScript 是目前最流行脚本语言,简称 JS。JavaScript 编写在 HTML 页面中,由浏览器负责解释和执行,JavaScript 通常用来给 HTML 页面增加交互能力。
JS可以给html带来的功能:
为页面增加动画效果
验证表单输入项有效性
实现本地数据存储

 

html、CSS和JS之间的关系

JS的语言应用——内嵌/内部/外部

在html中,可以通过以下三种方法来应用JS:

1.内嵌式:又称行内式,在HTML标签上编写JS,如:<button οnclick="alert('你好 JavaScript');">Hello!JavaScript</button>
<html>
<head><meta charset="UTF-8"><title>JS</title>
</head>
<body><button onclick="alert('你好 JS');">Hello JS</button>  </body>
</html>
2.内部式:在HTML页面中的script标签中编写JS,如:<script>...</ script >
<html>
<head><meta charset="UTF-8"><title>JS</title><script type="text/javascript">    	alert(“你好 JS”);    </script></head>
<body>
</body>
</html>
3.外部式:在HTML页面中引入外部JS文件,如:<script src=“xx.js"></ script >

 

<html>
<head><meta charset="UTF-8"><title>JS</title>
</head>
<body><script src="main.js"></script>
</body>
</html>

这个要在main.js文件中加入语句  alert(“你好 JS”);     才能运行。

JavaScript 变量——存储数据信息的“容器”

JS对变量定义比较特殊,使用var来进行定义,如:var name=“hello”;

命名规则:

1.变量名只能包含:字母、数字、下划线( _ )
2.不能以数字开头
3.不能使用JS关键字
4.变量名区分大小写,下面是两个不同的变量

var name=“学习”;

var Name=“XueXi” ;

<script type=“text/javascript”>        var age=21;var phone1=“13800000000”;var my_address=“YunNan”;x=5,y=10;</script>

JS中定义多个变量利用逗号 , 分割,如:var name=“张三”,age,phone;

 

JS关键字

JS关键字又称“Js保留字”,不能用作变量名或者函数名,以下是部分保留字列表:

abstract

arguments

boolean 

break

byte

case

catch

char

class*

const

continue

debugger

default

delete

do

double

else

enum*

eval

export*

extends*

false

final

finally

float

for

function

goto

if

implements

import*

in

instanceof

int

interface

let

long

native

new

null

package

private

protected

public

 

JavaScript 中的6种数据类型

1. 字符串 String
var name = “张三”;  // 字符串(单引号或双引号)
2. 数字 Number)
var age = 20;  // 数字
3. Boolean
var isFirst = true; // 布尔( true 或 false )
4. 对象 Object
var company = new Object(); // 对象
5. Null
var address = null; // 空
6. 未定义 Undefined
var phone; // 未定义

 

我们可以利用JavaScript内置函数typeof 判断数据类型。

JS动态类型

JS拥有动态类型特征,这意味着相同的变量可以用来存储不同的类型值,也就是说,JavaScript中的变量,可以根据其存储的值,动态改变其变量类型

<script type=“text/javascript”>        var x;  // x 为未定义类型 undefinedx = 20;  // 现在 x 为数字类型 numberx = “Hello”; // 现在 x 为字符串类型 string
</script>

JS注释

注释不会被执行,但可以提高代码的可读性或方便调试。在JS中,注释的编写有两种方式:一种是单行注释,一种是多种注释

<script type=“text/javascript”>        var name = “张三”;  // 姓名/* x初始值必须为 20如果大于20则… */var x = 20
</script>

调试时可以将暂时不用的部分注释掉,待调试完后去掉注释符号即可

<script type=“text/javascript”>var y = 30;// y = y + 100; /*var x = 25;y = x + 80;*/       
</script>

如有帮助,可以留下一个免费的赞支持一下,感激不尽!


http://chatgpt.dhexx.cn/article/u7kL19Rf.shtml

相关文章

在 HTML 中引入 vue.js 写页面

突然说要写两个页面&#xff08;只有两个页面&#xff0c;不是一个完整的项目。。&#xff09;&#xff0c;有点懵&#xff0c;不知道从哪下手&#xff0c;而且只对 vue 熟悉那么一丢丢&#xff0c;其他框架不是很熟悉。但是没办法鸭&#xff0c;只能硬着头皮去做了&#xff01…

html 中引入外部 css 、js 文件

1. 引入 css 文件 引入外部 css 文件代码如下&#xff0c;css文件引入代码应放在 <head></head> 中。 <!-- 本地相对路径&#xff0c;" ../ "是上翻一个目录级&#xff0c;样例如下&#xff1a;导入本地 index.css 文件 --> <!-- 目录级的解释…

js_js引入到html文件中

一.变量提升 JavaScript 引擎的工作方式是&#xff0c;先解析代码&#xff0c;获取所有被声明的变 量&#xff0c;然后再一行一行地运行。这造成的结果&#xff0c;就是所有的变量的声 明语句&#xff0c;都会被提升到代码的头部&#xff0c;这就叫做变量提升 &#xff08;hoi…

1.如何在HTML5中引入js文件

在HTML5中引入js文件有两种方式如下&#xff1a; 新建一个html5文件&#xff0c;输入以下代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><!-- 内部js-->…

html引入js文件

html引入js文件 在开发中我们常常会用到全局变量&#xff0c;通过修改public里面的js文件去修改变量&#xff0c;问题是我们怎么在html中引入这个文件&#xff0c;使文件在整个项目中起作用尼&#xff1f; 代码 <script src"<% BASE_URL %>js/config.js"&…

Web前端 | HTML嵌入JS代码的三种方式

✅作者简介&#xff1a;一位材料转码农的选手&#xff0c;希望一起努力&#xff0c;一起进步&#xff01; &#x1f4c3;个人主页&#xff1a;每天都要敲代码的个人主页 &#x1f525;系列专栏&#xff1a;Web前端 目录 一&#xff1a;JavaScript概述 二&#xff1a; HTML嵌入…

如何在HTML网页引入JavaScript

方式一: 在HTML网页内,书写script标签,里面定义js代码 缺点: 1.js代码不能重复使用(不能在其他网页里使用) 2.HTML标签和js代码耦合,不便于后期维护修改 优点: 1.HTML网页和js代码写在一起,便于阅读和测试 小结:在开发环境中使用方式一(编写阶段) 方式二: 1.在外部定义…

C语言分段函数计算

#include <stdio.h> #include <math.h> int main() { float x,y,a;printf("请你输入x的值:\n");scanf("%f",&x);if (x<-300)y-1;if (x>300)y-1;elsey(x*x*x)/log10(x2.6) ;printf("f(%0.03f)%0.03f",x,y);return 0; }

启动延时缩短 50%-80%,函数计算发布镜像加速功能

简介&#xff1a; 容器镜像因其颠覆式创新成为云原生时代应用部署格式的事实标准。头部云厂商 FaaS (Function-as-a-Service) 服务如阿里云函数计算、AWS Lambda 也相继在 2020 年支持使用容器镜像部署函数&#xff0c;全面拥抱容器生态。 作者 | Shuai Chang 阿里云云原生 Se…

python-使用递归函数计算阶乘

不用多说&#xff0c;看完代码绝对明了&#xff0c;只是要提一句&#xff0c;递归函数会创造大量的函数对象&#xff0c;过量的消耗内存和运算能力。而我们也会用递归实现分析几何&#xff0c;画出漂亮的图案。 实现阶乘的大概思路&#xff1a; 引用一下老师课程中的图案 当n5…

阿里云函数计算(一)

最近接触到了阿里云的函数计算的服务&#xff0c;经过几天的尝试还是有所收获&#xff0c;因此不妨把学习过程中的点滴记录下来&#xff0c;方便以后温习。 什么是函数计算 根据阿里云的中的相关介绍&#xff0c;可以知道函数计算是事件驱动的全托管计算服务。用户无需管理服…

yolov5目标检测神经网络——损失函数计算原理

前面已经写了4篇关于yolov5的文章&#xff0c;链接如下&#xff1a; 1、基于libtorch的yolov5目标检测网络实现——COCO数据集json标签文件解析 2、基于libtorch的yolov5目标检测网络实现(2)——网络结构实现 3、基于libtorch的yolov5目标检测网络实现(3)——Kmeans聚类获取anc…

计算机上怎么用函数算比例,如何使用Excel函数计算所占的比例

通过Excel的函数的使用&#xff0c;我们可以轻松计算出某种产品在同类或总产品中所占的比例。 下面是一个实例&#xff0c;希望对您有帮助。 如上图&#xff0c;我们所要计算的是&#xff0c;男女款的服装&#xff0c;各占同类款式的比例分别为多少。 比如&#xff0c;A2单元格…

python中三角函数计算

1、采用math库计算 #!/usr/bin/python import mathprint "cos(3) : ", math.cos(3) print "cos(-3) : ", math.cos(-3) print "cos(0) : ", math.cos(0) print "cos(math.pi) : ", math.cos(math.pi) print "cos(2*math.pi) : &…

计算机及格人数函数公式大全,excel函数计算及格人数和合格人数

下面小编为大家介绍如何利用excel函数计算及格人数和合格人数方法&#xff0c;有需要的朋友快快来学习吧&#xff01; 步骤 用countif函数计算单科及格人数。如图&#xff0c;分别在单元格内输人函数&#xff0c;计算出语文及格人数和数学及格人数。 合格人数要求计算出语文和数…

年龄的计算方式计算机函数,excel使用时间函数计算年龄 使用Excel函数计算年龄的三种方法...

excel使用时间函数计算年龄 使用Excel函数计算年龄的三种方法,听说excel的教程在抖音很火,很多白领小朋友都在争相学习,下面就跟小编一起学习一下excel使用时间函数计算年龄的新技能吧,看完excel使用时间函数计算年龄 使用Excel函数计算年龄的三种方法会帮助你完成很多复杂…

python 三角函数 计算

今天做结构的时候突然要算一下角度&#xff0c;就想用python简单计算一下&#xff0c;结果发现&#xff0c;中学学的三角函数内容全喂狗了。 python中三角函数计算当然就是直接进math库&#xff0c;这没啥说的&#xff0c;导入这个库就行。但是下边计算的时候度这个东西就难搞…

计算机total函数,Excel中怎样用subtotal函数计算总值

Excel计算各种总计值的SUBTOTAL函数是如何使用的呢?具体该怎么去进行操作?对于不常用函数的朋友或许有点难度&#xff0c;今天&#xff0c;学习啦小编就教大家在Excel中subtotal函数计算各种总计值的操作方法&#xff0c;欢迎大家来到学习啦学习。 Excel中subtotal函数计算各…

一文搞懂函数计算及其工作原理

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 什么是函数计算&#xff1f; 大家都了解&#xff0c;Serverless 并不是没有服务器&#xff0c;而是开发者不再需要关心服务器…

函数计算简介

什么是函数计算 大家都了解&#xff0c;Serverless 并不是没有服务器&#xff0c;而是开发者不再需要关心服务器。下图是一个应用从开发到上线的对比图&#xff1a; 在传统 Serverful 架构下&#xff0c;部署一个应用需要购买服务器&#xff0c;部署操作系统&#xff0c;搭建开…