JavaScript学习1

最新推荐文章于 2024-09-08 22:38:01 发布

aneyal

最新推荐文章于 2024-09-08 22:38:01 发布

阅读量684

点赞数 1

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/aneyal/article/details/123646633

版权

JavaScript简介

JavaScript是一种运行在客户端的脚本语言。脚本语言就是不需要编译，运行过程中由js解释器逐行来进行解释并执行。现在也可以基于Node.js技术进行服务器端编程

HTML/CSS/JS的关系

HTML是描述类语言，决定网页结构和内容，相当于人的身体

CSS是描述类语言，决定网页呈现给用户的模样，相当于给人穿衣服

JS是编程类语言，实现业务逻辑和页面控制（决定功能），相当于人的动作

浏览器执行JS的过程

浏览器有两部分，渲染引擎和JS引擎

渲染引擎用来解析HTML和CSS，俗称内核

JS引擎也称为JS解释器，用来读取网页中的JavaScript代码，并对其进行处理和运行

浏览器本身并不执行JS代码，而是通过内置的JavaScript引擎来执行。执行时，逐行解释每一句源码，然后交给计算机执行。所以JavaScript语言是一种脚本语言。

JS的组成

JS由3部分组成：JavaScript语法（ECMAScript）、页面文档对象模型（DOM）、浏览器对象模型（BOM）

ECMAScript规定了JS的编程语法和基础核心知识，后两者是ECMAScript语言的实现和拓展。

BOM指的是浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象类型。通过BOM可以操作浏览器窗口。

DOM是文档对象模型，是W3C推荐的处理可拓展标记语言的标准程序接口。通过DOM提供的接口可以对页面上的各种元素进行操作

JS的书写位置

行内式：直接写到元素内部

内嵌式：在head中书写，写在script标签中

外部：写在一个js文件中，引入方法是在script标签中的src属性中写地址。

注意，引入外部js的script标签之间不能写其他代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			// 内嵌式，打开网页时弹出弹框
			alert('内嵌式弹框');
		</script>
		<!-- 外部js -->
		<!-- 外部js文件中的代码为alert('外部弹框') -->
		<!-- 打开网页时弹出弹框 -->
		<script src="外部js.js"></script>
	</head>
	<body>
		<!-- 行内式 -->
		<!-- 点击按钮，弹出弹框 -->
		<input type="button" value="按钮" onclick="alert('行内式弹框')">
	</body>
</html>

效果：

JavaScript代码的注释

单行注释：前面加上//

多行注释：使用/* */

JavaScript输入输出语句

一些常用的输入输出语句：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			// 输入框
			prompt('请输入名字');
			// 弹出警示框
			alert('一个警示框');
			// 控制台输出，给程序员测试用的
			console.log('程序员看到的');
		</script>
	</head>
	<body>
	</body>
</html>

效果：