JavaScript基础学习（上）

最新推荐文章于 2024-08-29 20:45:01 发布
最新推荐文章于 2024-08-29 20:45:01 发布
阅读量190 收藏
点赞数
分类专栏： WEB前端 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kilotwo/article/details/113763686
版权
这篇博客详细介绍了JavaScript的基础知识，包括它的起源、作用、在HTML中的嵌入方式，以及变量、函数、数据类型、事件和控制语句等内容，帮助初学者快速掌握JavaScript编程。
摘要由CSDN通过智能技术生成

JavaScript

文章目录

1、什么是JavaScript，有什么用？

​ JavaScript是运行在浏览器上的脚本语言。简称JS。
​ JavaScript是网景公司（NetScape）的 布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。
​ LiveScript的出现让浏览器更加的生动了，不再是单纯的静态页面了。页面更具有交互性。
​ 在历史的某个阶段，SUN公司和网景公司他们之间有合作关系，SUN公司把LiveScript的名字修改为JavaScript。
​ JavaScript这个名字中虽然带有“Java”但是和Java没有任何关系，只是语法上优点类似。他们运行的位置不同，
​ Java运行在JVM当中，JavaScript运行在浏览器的内存当中。

JavaScript程序不需要我们程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。
JavaScript的“目标程序”以普通文本形式保存，这种语言都叫做“脚本语言”。

Java的目标程序已.class形式存在，不能使用文本编辑器打开，不是脚本语言。

网景公司1998年被美国在线收购。

网景公司最著名的就是领航者浏览器：Navigator浏览器。

LiveScript的出现，最初的时候是为Navigator浏览器量身定制一门语言，不支持其他浏览器。

当Navigator浏览器使用非常广泛的时候，微软害怕了，于是微软在最短的时间内组建了一个团队，
开始研发只支持IE浏览器的脚本语言，叫做JScript。

JavaScript和JScript并存的年代，程序员是很痛苦的，因为程序员要写两套程序。
在这种情况下，有一个非营利性组织站出来了，叫做ECMA组织（欧洲计算机协会）
ECMA根据JavaScript制定了ECMA-262号标准，叫做ECMA-Script。

现代的javascript和jscript都实现了ECMA-Script规范。（javascript和jscript统一了。）

JSP和JS有啥区别？
JSP : JavaServer Pages（隶属于Java语言的，运行在JVM当中）
JS : JavaScript（运行在浏览器上。）

2、在HTML中怎么嵌入JavaScript代码？

​ 三种方式。

1.HTML中嵌入JS代码的第一种方式

<!doctype html>
<html>
	<head>
		<title>HTML中嵌入JS代码的第一种方式</title>
	</head>
	<body>
		
		<!--
			1、要实现的功能：
				用户点击以下按钮，弹出消息框。

			2、JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
			在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。并且任何
			事件都会对应一个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：
			事件句柄是在事件单词前添加一个on。】，而事件句柄是以HTML标签的属性存在
			的。

			3、οnclick="js代码"，执行原理是什么？
				页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。
				等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
			
			4、怎么使用JS代码弹出消息框？
				在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。
				window对象有一个函数叫做:alert，用法是：window.alert("消息");这样就可以弹窗了。
			
			5、JS中的字符串可以使用双引号，也可以使用单引号。

			6、JS中的一条语句结束之后可以使用分号“;”，也可以不用。
		-->
		<input type="button" value="hello" onclick="window.alert('hello js')"/>

		<input type="button" value="hello" onclick='window.alert("hello jscode")'/>

		<input type="button" value="hello" onclick="window.alert('hello zhangsan')
													window.alert('hello lis')
													window.alert('hello wangwu')"/>
		
		<!-- window. 可以省略。-->
		<input type="button" value="hello" onclick="alert('hello zhangsan')
													alert('hello lis')
													alert('hello wangwu')"/>
		
		<input type="button" value="hello" onclick="alert('hello zhangsan');
													alert('hello lis');
													alert('hello wangwu');"/>

	</body>
</html>

2.HTML中嵌入JS代码的第二种方式


<!--
	javascript的脚本块在一个页面当中可以出现多次。没有要求。
	javascript的脚本块出现位置也没有要求，随意。
-->
<script type="text/javascript">
// alert有阻塞当前页面加载的作用。（阻挡，直到用户点击确定按钮。）
window.alert("first.......");
</script>

<!doctype html>
<html>
	<head>
		<title>HTML中嵌入JS代码的第二种方式</title>

		<!--样式块-->
		<style type="text/css">
			/*
				css代码
			*/
		</style>

		<script type="text/javascript">
			window.alert("head............");
		</script>

	</head>
	<body>

		<input type="button" value="我是一个按钮对象1" />
		
		<!--第二种方式：脚本块的方式-->
		<script type="text/javascript">

			/*
				暴露在脚本块当中的程序，在页面打开的时候执行，
				并且遵守自上而下的顺序依次逐行执行。（这个代
				码的执行不需要事件）
			*/
			window.alert("Hello World!"); // alert函数会阻塞整个HTML页面的加载。
			
			// JS代码的注释，这是单行注释。
			/*
				JS代码的多行注释。和java一样。
			*/
			window.alert("Hello JavaScript!");

		</script>

		<input type="button" value="我是一个按钮对象" />

	</body>
</html>

<script type="text/javascript">
window.alert("last.......");
</script>

<!--
/**
*
* javadoc注释，这里的注释信息会被javadoc.exe工具解析提取生成帮助文档。
*/
-->

3.HTML中嵌入JS代码的第三种方式：引入外部独立的js文件

<!doctype html>
<html>
	<head>
		<title>HTML中嵌入JS代码的第三种方式：引入外部独立的js文件。</title>
	</head>
	<body>
		
		<!--在需要的位置引入js脚本文件-->
		<!--引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。-->
		<!--
		<script type="text/javascript" src="js/1.js"></script>
		-->

		<!--同一个js文件可以被引入多次。但实际开发中这种需求很少。-->
		<!--
		<script type="text/javascript" src="js/1.js"></script>
		-->

		<!--这种方式不行，结束的script标签必须有。-->
		<!--
		<script type="text/javascript" src="js/1.js" />
		-->
		<!--
		<script type="text/javascript" src="js/1.js"></script>
		-->

		<script type="text/javascript" src="js/1.js">
			// 这里写的代码不会执行。
			// window.alert("Test");
		</script>

		<script type="text/javascript">
			alert("hello jack!");
		</script>


	</body>
</html>

1.js

window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js test!");

3、关于JS中的变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于JS中的变量</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				回顾java中的变量：
					1、java中怎么定义/声明变量？
						数据类型 变量名;
						例如：
							int i;
							double d;
							boolean flag;
					2、java中的变量怎么赋值？
						使用“=”运算符进行赋值运算。（"="运算符右边先执行，将右边执行的结果赋值给左边的变量。）
						变量名 = 值;
						例如：
							i = 10;
							d = 3.14;
							flag = false;
					3、java语言是一种强类型语言，强类型怎么理解？
						java语言存在编译阶段，假设有代码：int i;
						那么在Java中有一个特点是：java程序编译阶段就已经确定了
						i变量的数据类型，该i变量的数据类型在编译阶段是int类型，
						那么这个变量到最终内存释放，一直都是int类型，不可能变成
						其他类型。
							int i = 10;
							double d = i; 
							这行代码是说声明一个新的变量d，double类型，把i变量中保存的值传给d。
							i还是int类型。
							
							i = "abc"; 这行代码编译的时候会报错，因为i变量的数据类型是int类型，不能将字符串赋给i。
							
							java中要求变量声明的时候是什么类型，以后永远都是这种类型，不可变。编译期强行固定变量的数据类型。
							称为强类型语言。
							
							public void sum(int a, int b){}
							sum(?,?);
							
				javascript当中的变量？
					怎么声明变量？
						var 变量名;
					怎么给变量赋值？
						变量名 = 值;
					javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
						var i = 100;
						i = false;
						i = "abc";
						i = new Object();
						i = 3.14;
					
					重点：javascript是一种弱类型编程语言。
					
			*/
		   // 在JS当中,当一个变量没有手动赋值的时候,系统默认赋值undefined
		   var i;
		   // undefined 在JS中是一个具体存在值.
		   alert("i = " + i); // i = undefined
		   
		   alert(undefined);
		   var k = undefined;
		   alert("k = " + k);
		   
		   // 一个变量没有声明/定义,直接访问?
		   // alert(age); //语法错误：age is not defined (变量age不存在。不能这样写。)
		   
		   var a, b, c = 200;
		   alert("a = " + a);
		   alert("b = " + b);
		   alert("c = " + c);
		   
		   a = false;
		   alert(a);
		   
		   a = "abc";
		   alert(a);
		   
		   a = 1.2;
		   alert(a);
		   
		</script>
	</body>
</html>

4、JS函数1

<!DOCTYPE html>
<html>
	<head>
		<meta
最低0.47元/天 解锁文章
万般滋味皆生活
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础学习
07-10
JavaScript基础学习
JavaScript学习（基础）
m0_49034593的博客
08-19 1296
js基础
Web前端 | JavaScript（变量和数据类型）
m0_61933976的博客
10-12 1182
Web前端 | JavaScript（变量和数据类型）Undefined、Number、Boolean、Null、String、Object数据类型
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
Javascript 入门基础学习
10-29
这只是JavaScript入门的基础知识，随着学习的深入，你还将接触到函数、对象、数组、事件处理、DOM操作、异步编程（如Ajax）以及更多的高级特性。理解并掌握这些概念，你就能创建出丰富交互性的网页应用。继续学习和...
JavaScript基础学习-1
12-20
1. JavaScript基础：学习ECMAScript的基本规则，这是JavaScript的核心语言部分。 2. ES6实战：了解并应用ES6引入的新特性，如箭头函数、类、模板字符串等。 3. 面向对象编程：理解面向对象的概念并学会在JavaScript...
javascript基础学习代码总结
01-18
还有写对于javascript对应的知识点案例。每个文件里都会有很多的注释信息，方面阅读和学习。 ...2.每个模块代码都有注释可用来...4.适合于没有javascript基础或javascript基础不扎实想要学习js知识点的人群参考和学习。
JavaScript代码片段
weixin_66128399的博客
08-26 347
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-27 715
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
jQuery基础——DOM
m0_54066656的博客
08-27 1249
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 4417
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
vue ref和reactive区别
灰海
08-25 1557
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
uni-app的示例项目--简单的登陆页面及列表页面
bingbingyihao的博客
08-24 856
uni-app的示例项目--简单的登陆页面及列表页面
vue2 part3
E___V___E的博客
08-25 878
年龄+1岁添加性别属性，默认值：男修改性别在列表首位添加一个朋友
class 2: vue.js 3 模板语法和内置指令
ComingLiu的博客
08-29 296
vue.js 3
vue part 5
最新发布
E___V___E的博客
08-29 354
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
浏览器精度问题
m0_46281382的博客
08-25 709
浏览器如何解析后端返回的long类型的数据
vue最早可以读取this的生命周期函数
youhebuke225的博客
08-25 368
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。：在实例创建完成后被立即调用。在这一步，实例已完成所有的数据观测、计算属性和方法的配置，但是还没有挂载到DOM，：在挂载开始之前被调用：相关的 render 函数首次被调用。如果你需要在Vue实例创建后立即执行某些操作，比如发送请求获取数据并更新到组件的状态中，那么。因此，如果你需要在Vue实例创建后尽早地访问其属性或方法，但又不需要直接操作DOM，那么。替换，并挂载到实例上去之后调用该钩子。
vue-cli搭建项目过程
2302_78078800的博客
08-25 1030
前端js框架 vue-cli的使用
"轻松入门JavaScript基础学习及用法
学习 JavaScript 的教材是非常重要的，因为它可以帮助你快速掌握基础知识并建立强大的基础。在学习 JavaScript 的过程中，你将会了解到什么是 JavaScript，如何在 HTML 页面中添加 JavaScript 代码，以及如何使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值