HTML5新特性、JS【初识JS 、JS核心语法】--学习JavaEE的day47

news2025/3/16 6:41:50

day47

HTML5新特性

定义文档类型

在文件的开头总是会有一个标签

语言文档类型声明方式
html4<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html5<!DOCTYPE html>

新增语义化标签

理解：就是一个个div，用于分区

标签描述
<header>头部标签
<nav>导航标签
<article>内容标签
<section>块级标签
<aside>侧边栏标签
<footer>尾部标签
<body>		
	<style type="text/css">
            header,nav,article,aside,footer,section{
                background-color: #87A442;
                text-align: center;
                border: black 1px solid;
                border-radius:20px;
                margin: 10px;
                padding: 10px;
            }

            header{
                height: 120px;
            }

            nav{
                height: 50px;
            }

            article{
                width: 46%;
                height: 120px;
                float: left;
            }

            aside{
                width: 46%;
                height: 120px;
                float: right;yu
            }

            footer{
                clear: both;
                height: 120px;
            }

            section{
                height: 70px;
            }
		
	</style>
	<header>头部标签 - header</header>
	<nav>导航标签 - nav</nav>
	<div>
		<article>内容标签 - article
			<section>块级标签 - section</section>
		</article>
		<aside>侧边栏标签 - aside</aside>
	</div>
	<footer>尾部标签 - footer</footer>
</body>

运行：
语义化标签

新增表单内容

对于输入框是有规范限制

<form action="#" method="post">
        日期选择器：<input type="date"/><br/>
        时间选择器：<input type="time"/><br/>
        邮箱输入框：<input type="email"/><br/>
		数字输入框：<input type="number" value="50" min="10" max="100" step="5"/><br/>
		URL输入框： <input type="url" list="url_list"/>
		<datalist id="url_list">
			<option label="W3School" value="http://www.w3school.com.cn" />
			<option label="谷歌" value="http://www.google.com" />
			<option label="百度一下" value="http://www.baidu.com" />
		</datalist><br/>
	
	<input type="submit" value="提交"/>
</form>

运行：
新增表单标签

JS

初识JS

什么是javascript

Javascript是基于对象和事件驱动的脚本语言，主要是嵌入到HTML中，应用在客户端，动态操作网页元素，也可以作用于服务端。

特点：

交互性（表单校验，信息提示，动态数据图表，ajax异步提交，解析服务端响应数据等等）

安全性（不可以直接访问本地硬盘）

跨平台性（由浏览器解析执行，和平台无关）

注意：

现在主要用在前端，一个标签为一个对象

事件：比如前面学习的鼠标单击事件

了解Javascript的历史

1995-2001

Netscape vs Microsoft

硅谷商战 李彦宏

IE浏览器 vs 非浏览器

非浏览器获胜

Javascript vs Java

JavaScript只需浏览器解析就可以执行，而java需要先编译成字节码文件，然后通过JVM来执行。

JavaScript是一种弱类型语言，java是强类型语言。

ps：

“100”–Java:String【Java对数据类型有严格的划分】

“100”–JavaScript:String、Number、Boolean【0为false，非0为true】

一个完整 JavaScript实现由以下3个部分组成
JS

JS核心语法
DOM – Document Object Model,文档对象模型
BOM – Browser Object Model,浏览器对象模型

javascript版的HelloWorld

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

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

注意：console兼容浏览器多，Console兼容IE浏览器【一般不考虑】

对于JS语句后面分号【;】可写可不写

console.log自动换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<script type="text/javascript">
			
			//弹框
			//alert("HelloWorld...1");
			
			//控制台输出
			console.log("HelloWorld...1");
			
		</script>
		
	</head>
	<body>
		
		<script type="text/javascript">
			
			//弹框
			//alert("HelloWorld...2");
			
			//控制台输出
			console.log("HelloWorld...2");
		</script>
		
	</body>
</html>

运行
JS版HelloWorld

JS核心技术

JS核心语法

变量
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			/*
			 * 知识点：变量
			 * 
			 * 语法格式：
			 * 		var 变量名 = 值;
			 * 
			 * 注意：
			 * 		1.var表示变量
			 * 		2.变量的类型随着值的类型发生改变
			 */
			
			var v = 100;
			console.log(v);
			
			v = "abc";
			console.log(v);
			
		</script>
		
	</body>
</html>

运行;
变量

JS的基本数据类型

基本数据类型图

JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
实例
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写

JavaScript 字符串
字符串是存储字符（比如 “Bill Gates”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
实例
var carname=“Bill Gates”;
var carname=‘Bill Gates’;
单引号和双引号支持互相包含

JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。
var x=true
var y=false

undefined
访问一个不存在的变量或使用已声明但未赋值的变量，都会得到一个值undefined，undefined类型的值只有一个undefined

Null
被赋予null值的变量通常认为已经定义了，只是不代表任何东西。

Javascript的数据类型主要分为
基本数据类型
非基本数据类型（对象）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
			 * 知识点：JS的基本数据类型的使用
			 * 分类：
			 * 		number - 数值型
			 * 		string - 字符串类型
			 * 		boolean - 布尔类型
			 * 		undefined - 未定义类型
			 * 		null - 空类型
			 */
			
			//number - 数值型
			//注意：number类型不分整数和小数
			var num = 100;
			console.log(num);//100
			num = 123.123;
			console.log(num);//123.123
			
			//string - 字符串类型
			//注意：string类型的值可以用单引号也可以用双引号括起来
			var str = 'abc';
			console.log(str);
			str = "abc";
			console.log(str);
			
			//boolean - 布尔类型
			var bool = true;
			console.log(bool);//true
			bool = false;
			console.log(bool);//false
			
			//undefined - 未定义类型
			var v;
			console.log(v);
			v = undefined;
			console.log(v);
			
			//null - 空类型
			var xx = null;
			console.log(xx);
			
			
		</script>
	</body>
</html>

运行：
基本数据类型

特殊点

注意：判断引用是否是某个数据类型

Java–instanceof

JavaScript–typeof

数字类型

各种数字的结果都是number【typeof 123】

Infinity：用来代表超过了javascript处理范围的数值。1e308

两个正无穷大相加会是一个什么结果？

正负相加—NaN

字符串

字符串转换问题，字符串和数字类型进行数学运算的时候，除了加法运算以外，其他都会转换为数字类型

布尔类型

做逻辑的判断

在javascript中，除了以下值，其他都是true

空字符串“”

null

undefined

0

NaN

false

注意：NaN == NaN吗？如何正确判断是否为NaN

比较运算符：

== vs ===

通过typeof对比undefined和null的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			/**
			 * 知识点：JS基本数据类型的特殊点
			 */
			
			//number类型的特殊点
			//注意：Infinity表示无穷大
			console.log(Infinity + (-Infinity));//NaN - Not a Number
			
			//string类型的特殊点
			//注意：string加号是字符串拼接符，其余是算数运算符
			var str1 = "10";
			var str2 = "3";
			console.log(str1 + str2);//103
			console.log(str1 - str2);//7
			console.log(str1 * str2);//30
			console.log(str1 / str2);//3.3333333335
			console.log(str1 % str2);//1
			
			//boolean类型的特殊点
			//注意：""、0、undefined、null表示false
			if(""){
				console.log("true");
			}else{
				console.log("false");
			}
			
			if(0){
				console.log("true");
			}else{
				console.log("false");
			}
			
			if(undefined){
				console.log("true");
			}else{
				console.log("false");
			}
			
			if(null){
				console.log("true");
			}else{
				console.log("false");
			}
			
			//undefined vs null
			var v1 = undefined;
			var v2 = null;
			console.log(typeof v1);//undefined
			console.log(typeof v2);//object
			
			//== vs ===
			//==判断两个值是否相等
			//===判断两个值+类型是否相等
			var v3 = 10;
			var v4 = "10";
			console.log(v3 == v4);//true
			console.log(v3 === v4);//false
		</script>
		
	</body>
</html>

运行：
基本数据类型特殊点

数组

创建一个数组

var arr = [1,2,3];

更新数组的元素

添加数组的元素

删除数组的元素（delete arr[1],注意，此处只是将该元素留空，数组的长度并不会发生变化）

数组的数组

var a = [[1,2,3],[4,5,6]];

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			/**
			 * 知识点：数组
			 */
			
			var arr = ["小龙","小杨","小马"];
			
			//设置指定下标上的元素
			arr[0] = "小喻";
			
			//获取指定下标上的元素
			console.log("获取指定下标上的元素：" + arr[0]);//小喻
			
			//获取元素个数
			console.log("获取元素个数：" + arr.length);
			
			//添加元素
			arr[3] = "小陈";
			arr[4] = "小李";
			arr[10] = "小牛";
			
			//删除元素
			delete arr[4];
			
			console.log("--------------------");
			
			//遍历数组 - for循环
			for(var i = 0;i<arr.length;i++){
				console.log(arr[i]);
			}
			
			console.log("--------------------");
			
			//遍历数组 -- for-in
			//注意：遍历有效元素的下标（undefined的元素认为是无效元素）
			for(var index in arr){
				console.log(arr[index]);
			}
			
		</script>
		
	</body>
</html>

运行：
数组

小结

HTML5新特性

初识JS

JS核心语法：变量、基本数据类型、数组

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

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

相关文章

SpringBoot + MybatisPlus

SpringBoot + MybatisPlus

SpringBoot MybatisPlus 整合记录 1. 硬件软件基本信息2. 相关链接3. 通过idea快速生成一个Springboot项目4. 启动报错问题解决问题一&#xff1a;Springboot启动的时候报错提示 “没有符合条件的Bean关于Mapper类型”问题二&#xff1a;启动的时候提示需要一个Bean&#xff0…
阅读更多...
民国漫画杂志《时代漫画》第16期.PDF

民国漫画杂志《时代漫画》第16期.PDF

时代漫画16.PDF: https://url03.ctfile.com/f/1779803-1248612470-6a05f0?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps:资源来源网络&#xff01;
阅读更多...
Jenkins在windows上进行安装

Jenkins在windows上进行安装

今天为了实现jmeter接口测试脚本的持续性集成安装了jenkins&#xff0c;主要记录jenkins的安装和端口的修改。 前提条件&#xff1a;安装了jdk&#xff0c;我本机安装的jdk1.8。 1.下载jenkins安装包 安装jenkins我们需要先下载安装包&#xff0c;可以通过下面的链接进行下载&a…
阅读更多...
深入理解内联函数（C语言）

深入理解内联函数（C语言）

目录 1.什么是内联函数2.内联函数与宏3.编译器对内联函数的处理4.参考文献 1.什么是内联函数 很多人都会知道&#xff0c;可以将比较小的函数写成内联函数的形式&#xff0c;这样会节省函数调用的开销&#xff0c;具体是什么样的开销呢&#xff1f; 一个函数在执行过程中&…
阅读更多...
低利率之后如何选择？以日本养老金为例

低利率之后如何选择？以日本养老金为例

天风证券认为&#xff0c;日本养老金资产配置行为具备的关键特征包括&#xff1a;海外资产占比上升、日元境内资产占比下降&#xff1b;权益类&#xff08;包括境内和境外&#xff09;占比上升&#xff0c;等等。 日本从1990年代开始陷入低增长、低通胀的局面&#xff0c;我们以…
阅读更多...
解决win系统msvcp140.dll丢失的多种常用方法，亲测有效！

解决win系统msvcp140.dll丢失的多种常用方法，亲测有效！

msvcp140.dll 是一个重要的Windows系统文件&#xff0c;属于Microsoft Visual C Redistributable runtime components的一部分&#xff0c;特别与Visual Studio 2015及之后版本编译的C应用程序相关联。这个动态链接库&#xff08;DLL&#xff09;文件包含了一系列C标准库的功能…
阅读更多...
好用的window粘贴板

好用的window粘贴板

可以设置指定的快捷键&#xff0c;在需要使用最近复制的记录时快速的复用 -> Ditto。 选择Download即可 地址&#xff1a;Ditto clipboard manager (sourceforge.io)https://ditto-cp.sourceforge.io/
阅读更多...
VUE3+Vite+vant4从零开始构建前端项目

VUE3+Vite+vant4从零开始构建前端项目

VUE3Vitevant4从零开始构建前端项目 1. 环境准备Node.js 安装 2. Vite 构建项目3. 集成Vant41. 安装Vant 组件2. 引入组件3. 使用vant按钮组件 1. 环境准备 Node.js 安装 Node.js官网地址&#xff1a;https://nodejs.p2hp.com/ 下载最新的版本&#xff0c;下载文件为msi结尾的…
阅读更多...
用本地大模型(llama3)进行数据分类标记｜LLM 用例

用本地大模型(llama3)进行数据分类标记｜LLM 用例

001&#xff5c;背景 这是我最新发布的导航站点 https://aiwith.me 这个站点由于第一版数据来源于第三方&#xff0c;只有站点基础数据&#xff0c;没有对数据进行分类&#xff0c;最近站点上线了&#xff0c;主体框架都搭建完成了&#xff0c;这才有空去对数据做分类. 目前的…
阅读更多...
Android kotlin协程

Android kotlin协程

说明 可代替线程整异步可控制&#xff0c;灵活 &#xff08;控制优先级&#xff0c;内存占用等&#xff09;速度快 效率高有数量上限 使用 runBlocking 一般用于测试 不建议使用GlobalScope.launch 全局的 生命周期跟随application 不建议使用CoroutineScope(job) 用 基本使…
阅读更多...
C结构详解

C结构详解

目录 1、结构模板 1. 建立结构声明 2. 定义结构变量 3. 访问结构成员 4. 初始化结构 声明结构数组 声明和初始化结构指针 1、结构模板 1. 建立结构声明 struct book{char title[MAXTITL];char author[MAXAUTL];float value; }&#xff1b; 该声明描述了一个又两个字符…
阅读更多...
指北者智能音乐学习机隆重亮相广州国际乐器展

指北者智能音乐学习机隆重亮相广州国际乐器展

2024年5月23-26日广州国际乐器展览会在广交会展馆B区隆重开幕&#xff0c;本届展会开设5大展厅、50000平方米的主题展区&#xff0c;吸引了700多家国内外参展商参展&#xff0c;打造集展示、商贸、文化交流、文娱于一体的广阔平台。深圳市指北科技有限公司也携旗下品牌指北者智…
阅读更多...
plt多子图设置

plt多子图设置

import matplotlib.pyplot as plt# 使用 subplots 函数创建一个 2x3 的子图网格 fig, axs plt.subplots(nrows2, ncols3, figsize(16, 10)) # 调整 figsize 来改变图像大小# 遍历每个子图&#xff0c;并绘制一些内容&#xff08;这里只是简单的示例&#xff09; for ax in ax…
阅读更多...
leetcode230 二叉搜索树中第K小的元素

leetcode230 二叉搜索树中第K小的元素

题目 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你设计一个算法查找其中第 k 个最小元素&#xff08;从 1 开始计数&#xff09;。 示例 输入&#xff1a;root [5,3,6,2,4,null,null,1], k 3 输出&#xff1a;3 解析 这道题应该是能做出…
阅读更多...
计算机网络-BGP概述

计算机网络-BGP概述

一、概述 到目前为止我们已经学习了静态路由、OSPF、RIP、IS-IS了&#xff0c;前面我们也了解到按照区域或者范围来分&#xff0c;路由协议可以划分为&#xff1a;IGP内部网关协议、EGP外部网关协议&#xff0c;而我们前面学习的动态路由都属于IGP的范畴. IGP是用于单一自治系统…
阅读更多...
AI大模型探索之路-训练篇25：ChatGLM3微调实战-基于LLaMA-Factory微调改造企业级知识库

AI大模型探索之路-训练篇25：ChatGLM3微调实战-基于LLaMA-Factory微调改造企业级知识库

系列篇章&#x1f4a5; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 AI大模型探索之路-训练篇4&#xff1a;大语言模型训练数据集概…
阅读更多...
NetSuite Intercompany COGS科目设置问题

NetSuite Intercompany COGS科目设置问题

在22年底的NetSuite多公司功能串讲中&#xff0c;有一个题目是Intercompany COGS科目的设置问题。近期在项目上这个问题被密集讨论。为了方便分享&#xff0c;所以在此摘出来独立成文。有兴趣的同学也可以翻看之前的视频。 NetSuite知识会 第8谈 多公司功能串讲 NetSuite Inter…
阅读更多...
性能测试--线程的监控

性能测试--线程的监控

1.线程的状态 1.1.线程的5种状态 java的线程总共有5种状态&#xff0c;如下&#xff1a; * 新建&#xff1a;new 【新建之后不启用都是new】* 运行&#xff1a;runnable* 等待&#xff1a;waitting(无限期等待),timed waitting(限期等待)* 阻塞&#xff1a;blocked* 结束&am…
阅读更多...
1.存储部分

1.存储部分

1.Flash Memory--闪速存储器&#xff08;注&#xff1a;U盘&#xff0c;SD卡就是闪存&#xff09;在EEPROM基础上发展而来的&#xff0c;断电后也能保存信息&#xff0c;且可进行多次 快速擦除重写。注意&#xff1a;由于闪存需要先擦除再写入&#xff0c;因此闪存写的速度要比…
阅读更多...
[less配置]vue2引入less

[less配置]vue2引入less

1、终端输入&#xff1a;npm install less less-loader --save-dev 2、在package.json查看是否安装less依赖 3、调用
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023