JavaScript总结(1)

最新推荐文章于 2024-11-03 16:40:52 发布
最新推荐文章于 2024-11-03 16:40:52 发布
阅读量376 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WildKingxue/article/details/119972596
版权

一.JavaScript的简介

1.什么是JavaScript

JavaScript 是一个面向对象的脚本语言。

目前互联网上较流行的脚本语言。

它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

面向对象是一种编程思想。

面向对象是从面向过程升华而来。

脚本语言--编写好以后放到运行环境中直接就能运行的语言。

2.为什么要学JavaScript

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容

CSS 描述了网页的布局

JavaScript 控制了网页的行为

3.JavaScript的产生背景

JavaScript最初由Netscape的Brendan Eich设计，最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java，但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。微软同时期也推出了JScript来迎战JavaScript的脚本语言。

发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript），两者都属于ECMAScript的实现，尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。

完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。 

JavaScript是甲骨文公司的注册商标。

Ecma国际以JavaScript为基础制定了ECMAScript标准。

JavaScript也可以用于其他场合。如服务器端编程（Node.js）。

4.java的发展背景

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

年份名称描述
1997ECMAScript 1第一个版本
1998ECMAScript 2版本变更
1999ECMAScript 3添加正则表达式，添加 try/catch
ECMAScript 4没有发布
2009ECMAScript 5添加 "strict mode"，严格模式，添加 JSON 支持
2011ECMAScript 5.1版本变更
2015ECMAScript 6添加类和模块
2016ECMAScript 7增加指数运算符 (**)，增加 Array.prototype.includes

5.JavaScript的主要功能

  • 嵌入动态文本于HTML页面。 
  • 对浏览器事件做出响应。 
  • 读写HTML元素。
  • 在数据被提交到服务器之前验证数据。 
  • 检测访客的浏览器信息。控制cookies，包括创建和修改等。  
  • 基于Node.js技术进行服务器端编程。

6.JavaScript语言组成

ECMAScript，描述了该语言的语法和基本对象。 

文档对象模型（DOM），描述处理网页内容的方法和接口。 

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

7.JavaScript语言特点

  • 脚本语言
  • 基于对象
  • 简单
  • 动态性
  • 跨平台性

8.运行模式

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

  • 是一种解释性脚本语言（代码不进行预编译）。

  • 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

  • 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。 

  • 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

  • JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

 二.JavaScript的作用

1.直接写入 HTML 输出流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>
			JavaScript 能够直接写入 HTML 输出流中：
		</p>
		<script>
		//显示的内容
			document.write("<h1>前端工程师</h1>");
			document.write("<p>你好啊！</p>");
		</script>
	</body>
</html>

 

2.对事件的反应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 触发事件的名称 -->
		<button type="button" onclick="alert('程序员，你好啊!')">点我!</button>
	</body>
</html>

3.改变 HTML 内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function ceshi(){//事件
				document.getElementById("id1").innerText=("我出来了")//找到元素和需要更改的内容
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试JavaScript脚本" onclick="ceshi()"/>
		<h1 id="id1"></h1>
	</body>
</html>

4.改变 HTML 图像

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function myimg(){//找到触发事件
				x=document.getElementById("id1");//找到元素
				x.src="img/2.jpg";//改变图片
				x.style.width="200px";//改变大小
			}
		</script>
	</head>
	<body>
		<button type="button" onclick="myimg()">显示图片</button>
		<br>
		<img src="img/fala.jpg" id="id1">
	</body>
</html>

 

5.改变 HTML 样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function myname(){//找到触发事件
				one=document.getElementById("id1");//找到元素
				one.style.color="red";//改变颜色
				one.innerText="我已经变为红色字体";//改变文字
			}
		</script>
	</head>
	<body>
		<p id="id1">请把我改成红色字体</p>
		<button type="button" onclick="myname()">改变</button>
	</body>
</html>

 

6.验证输入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>wangxing</title>
	</head>
	<body>
		<h1>我的第一段 JavaScript</h1>
		<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
		<input id="demo" type="text">
		<script>
			function myFunction() {
				var x = document.getElementById("demo").value;
				if (isNaN(x) || x.replace(/(^\s*)|(\s*$)/g, "") == "") {
					alert("不是数字");
				}
			}
		</script>
		<button type="button" onclick="myFunction()">点击这里</button>
	</body>
</html>

三.JavaScript的用法

1.<head> 中的 JavaScript 函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在head中设置js</title>
		<script type="text/javascript">
			function myname(){
				//document.getElementById("id1").innerHTML=("下雨了，我没带伞!");
				x=document.getElementById("id1");//找到元素
				x.innerHTML=("下雨了，我没带伞！");//显示内容
				x.style.color="yellow";//改变颜色
			}
		</script>
	</head>
	<body>
		<h2>下雨了，你带伞了吗?</h2>
		<h2 id="id1"></h2>
		<button type="button" onclick="myname()">回复</button>
	</body>
</html>

2.<body> 中的 JavaScript 函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在body中设置js</title>
	</head>
	<body>
		<h2>下雨了，你带伞了吗?</h2>
		<h2 id="id1"></h2>
		<button type="button" onclick="myname()">回复</button>
		
		<script type="text/javascript">
			function myname(){
				document.getElementById("id1").innerHTML=("下雨了，我没带伞!");//找到元素，改变内容
			}
		</script>
	</body>
</html>

3.外部的 JavaScript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部引入js</title>
		<script src="js/2-3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h2>下雨了，你带伞了吗?</h2>
		<h2 id="id1"></h2>
		<button type="button" onclick="myname()">回复</button>
		
	</body>
</html>

 需引入.js文件

function myname(){
				x=document.getElementById("id1");//找到元素
				x.innerHTML=("下雨了，我没带伞！");//显示内容
				x.style.color="red";//改变颜色
			}

 三个点击按钮事件运行出的结果都是一样的。

颜色不同：

第一个设置黄色

第二个没设颜色默认黑色

第三个设置红色

四.JavaScript 输出显示数据

1.使用 window.alert() 弹出警告框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹出</title>
		<script type="text/javascript">
		function shao(){
			var a=123;
			var b=321;
			var c=a+b;
			alert(c);
		}
			// window.alert(123 + 321);
		</script>
	</head>
	<body>
		请输出123+321的数值
		<input type="button"id="id1" value="显示答案" onclick="shao()"/>
	</body>
</html>

2.使用 document.write() 方法将内容写到 HTML 文档中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function shao(){
				document.write("都这么大了，还让人接。");
			}
		</script>
	</head>
	<body>
		<p>别的小朋友都回家了，你什么时候来接我啊！</p>
		<button type="button" onclick="shao()">对话</button>
	</body>
</html>

 

3.使用 innerHTML 写入到 HTML 元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function shao(){
				document.getElementById("demo").innerHTML=("剪发");
			}
		</script>
	</head>
	<body>
		<h1>头部神经末梢切除术</h1>
		<button type="button" onclick="shao()">说正常话</button>
		<h1 id="demo">?</h1>
	</body>
</html>

 

4.使用 console.log() 写入到浏览器的控制台。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function shao(){
				var a=2;
				var b=18;
				var c=a*b;
				console.log(c);
			}
		</script>
	</head>
	<body>
		<button type="button" onclick="shao()">值</button>
	</body>
</html>

五.JavaScript的注释

注释不会显示到页面上

1.单行注释

多用于代码末尾，用来解释元素

以 //开头 没有结尾      格式：// 内容

2.多行注释

以 /* 开始，以 */ 结尾       格式：/* 内容 */

WildKingxue
关注
专栏目录
JavaScript总结1
08-03
在JavaScript中，字符串可以使用单引号`'`或双引号`"`来定义，如`var str1 = 'example';`或`var str2 = "example";`。与Java不同，JavaScript没有单独的字符类型，字符串是处理文本的基本方式。 变量定义时，`var`...
CSDN现代教育作业
weixin_46499851的博客
03-23 566
现代教育作业什么是JavaScriptJavaScript函数说明函数的参数参数规则\color{red}{参数规则}参数规则通过值传递参数\color{red}{通过值传递参数}通过值传递参数通过对象传递参数\color{red}{通过对象传递参数}通过对象传递参数Java和JavaScript的不同JavaScript正则表达式什么是正则表达式常用的正则表达式结语 什么是JavaScript ...
JS
aklwe的博客
08-18 189
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为J
当装入HTML文档时调用,JSP上机实验六-Javascript内置对象和函数的应用
weixin_35873811的博客
06-04 343
实验内容：1．学习Javascript事件处理2．掌握Javascript内置对象和函数的应用实验步骤：1.JavaScript函数函数在定义时并没有被执行，只有函数被调用时，其中的代码才真正被执行。为了实现函数的定义和调用，JavaScript语句提供了两个关键字：function和return。JavaScript函数的基本语法如下：function 函数名称(参数表)–{–语句块;–...
JavaScript（一）
NI3E
05-27 159
JavaScript学习笔记 JavaScript的介绍 ...
JavaScript中定时器案例（获取验证码60秒倒计时，页面打字机效果，无缝滚动特效）
WangY321的博客
04-23 1116
获取验证码60秒倒计时 <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function() { var btn = document.getElementById('btn...
JavaScript ES6 总结1
08-03
JavaScript ES6 是JavaScript语言的一个重要升级，它在2015年6月正式发布，旨在提升JavaScript的性能和功能，使其更适合开发大型、复杂的应用程序。ECMAScript（简称ES）是JavaScript的规格，而JavaScript是ES的一种...
前端JavaScript总结
06-19
在这个"前端JavaScript总结"中，我们将深入探讨JavaScript的基本概念、语法特性、核心功能以及在实际开发中的应用。 首先，JavaScript是一种解释型的、弱类型的脚本语言，它基于ECMAScript规范，并在Web浏览器中...
JavaScript项目优化总结
01-30
前端时间对公司已有项目JavaScript代码进行优化，本文的是对优化工作的一个总结，拿出来与大家分享。当然我的优化方式可能并不是最优的，或者说有些不对的地方，请指教。JavaScript优化总结分为以下几点优化前后对比...
JavaScript总结
03-15
JavaScript 基础知识总结 JavaScript 是一种高级的、动态的、弱类型的编程语言，主要用于客户端脚本编程。下面是 JavaScript 的基础知识总结。 ### 变量和数据类型 在 JavaScript 中，变量是用来存储值的容器。...
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1132
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 228
关于react hooks的一些知识与应用
JavaScript 生成二维码
qq_30049249的博客
11-02 124
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 224
遍历echarst多个图表，并添加独立的缩放函数
基于SpringBoot+Vue的快递物流信息查询系统设计与实现【前后端分离】
m0_67428300的博客
11-02 759
随着电子商务的快速发展，快递物流系统的重要性愈发突出。针对用户对快递信息的实时查询需求，本系统结合Spring Boot和Vue技术，设计并实现了一个高效、易用的快递物流信息查询系统。系统实现了用户信息管理、订单查询、物流跟踪等功能，用户可通过简单操作即可查询快递状态，实现信息的实时展示。本快递物流信息查询系统基于Spring Boot与Vue的开发，前后端分离架构提升了系统的扩展性和开发效率。
JavaScript的第十一天
全栈学习ing
10-31 728
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
Maven+Jsp+Vue的文视界创作平台
最新发布
战族狼魂的博客
11-03 66
主要擅长SpringBoot、Vue、SSM、HLMT、Jsp、Nodejs、Python、爬虫、数据可视化、小程序、物联网、前端、数据库等设计与开发；功能设计、功能实现、代码编写、代码调试运行、协助代码逻辑理解、调试过程中问题解决；
腾旭地图显示多个位置，点击弹出位置信息
m0_58047199的博客
10-31 234
center: new window.TMap.LatLng(longitude.value, latitude.value), //设置地图中心点坐标。rotation: 0 //设置地图旋转角度。zoom: 11, //设置地图缩放级别。pitch: 43.5, //设置俯仰角。
非父子组件之间的通信vue.js
2401_83905000的博客
10-30 279
【代码】非父子组件之间的通信vue.js。
JavaScript基石与实用技巧总结
"这是一份详尽的JavaScript经验总结文档，涵盖了从初级到进阶的学习者都能受益的知识点。它以清晰的步骤引导读者理解JavaScript的基础，包括但不限于： 1. **HTML基础知识**：文档强调HTML与JavaScript的配合，因为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值