JavaScript 02 - 初识JavaScript

最新推荐文章于 2024-07-20 23:54:17 发布

柑橘味柚芽

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量189

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41700993/article/details/106300375

版权

初识JavaScript

02 - JS初体验
03 - JS注释
04 - JS输入输出语句

02 - JS初体验

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>02-JS初体验</title>
	<!--
		1. 初始JavaScript
		=================

		1.1 JavaScript是什么
		--------------------
		布兰登·艾奇 1961~
		神奇的大哥用10天完成JavaScript设计。
		最初命名为LiveScript，后来在与Sun合作之后将其改名为JavaScript。
		JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思）
		脚本语言：不需要编译，运行过程中的js解释器（js引擎）逐行来进行解释并执行
		现在也可以基于Node.js技术进行服务器端编程

		1.2 JavaScript的作用
		--------------------
		表单动态校验（密码强度检测）（JS产生最初的目的）
		网页特效
		服务端开发（Node.js）
		桌面程序（Electron）
		App(Cordova)
		控制硬件-物联网（Ruff）
		游戏开发（cocos2d-js）

		1.3 HTML/CSS/JS的关系
		---------------------
		HTML/CSS标记语言--描述类语言
		HTML决定网页结构和内容（决定看到什么），相当于人的身体
		CSS决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服、化妆
		JS脚本语言--编程类语言
		实现业务逻辑和网页控制（决定功能），相当于人的各种动作

		1.4 浏览器执行JS简介
		-------------------
		浏览器分成两部分：渲染引擎和JS引擎
		渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
		JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码。对其处理后运行，比如chrome浏览器的V8
		浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。
		JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

		1.5 JS的组成
		------------
		JavaScript - ECMAScript(JavaScript语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型)
		1. ECMAScript是由ECMA国际（愿欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。
		ECMAScript-JavaScript网景公司、Jscript微软公司
		ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
		2. DOM - 文档对象模型
		文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。
		通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
		3. BOM - 浏览器对象模型
		BOM（Browser Object Model，简称BOM）是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

		1.6 JS初体验
		------------
		JS有3种书写位置，分别为行内、内嵌和外部。

		a. 行内式JS
		<input type="button" value="点我试试" onclick="alert('Hello World')">
		可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如：onclick
		注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
		可读性差，在html中编写JS大量代码时，不方便阅读
		引号易错，引号多层嵌套匹配时，非常容易弄混
		特殊情况下使用

		b. 内嵌JS
		<script>alert('Hello World~!');< /script>
		可以将多行JS代码写到<script>标签中
		内嵌JS是学习时常用的方式

		c. 外部JS文件
		<script src="my.js">< /script>
		利用HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
		引用外部JS文件的script标签中间不可以写代码
		适合于JS代码量比较大的情况	
	-->
	
	<!-- 2. 内嵌式的js -->
	<script type="text/javascript">
		alert('Hello World');
	</script>
	<!-- 3. 外部js script 双标签 -->
	<script src="my.js"></script>
</head>
<body>
	<!-- 1. 行内式的js 直接写到元素的内部 -->
	<input type="button" value="点我试试" onclick="alert('Hello World')">
</body>
</html>

03 - JS注释

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>03-JS注释</title>
	<!--
		2. JavaScript注释
		=================

		2.1 单行注释
		------------
		为了提高代码的可读性，JS与CSS一样，也提供了注释功能。JS中的注释主要有两种，分别是单行注释和多行注释。
		单行注释的注释方式如下：
		// 我是一行文字，不想被JS引擎执行，所以注释起来
		// 用来注释单行文字（快捷键 ctrl + /）

		2.2 多行注释
		------------
		多行注释的注释方式如下：
		/*
			获取用户年龄和姓名
			并通过提示框显示出来
		*/
		/**/用来注释多行文字（默认快捷键alt + shift + a）
		快捷键修改为：ctrl + shift + /
		vscode -> 首选项按钮 -> 键盘快捷方式 -> 查找原来的快捷键 -> 修改为新的快捷键 -> 回车确认
	-->
	<script>
		// 1. 单行注释 ctrl + /
		/* 
		   2. 多行注释
		*/
	</script>
</head>
<body>

</body>
</html>

04 - JS输入输出语句

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>04-JS输入输出语句</title>
	<!-- 
		3. JavaScript输入输出语句
		========================

		为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

			方法					说明							 归属
		alert(msg)			浏览器弹出警示框					浏览器
		console.log(msg)	浏览器控制台打印输出信息			浏览器
		prompt(info)		浏览器弹出输入框，用户可以输入		浏览器

		注意：alert()主要用来显示消息给用户，console.log()用来给程序员自己看运行时的消息。
	-->
	<script>
		// 这是一个输入框
		prompt('请输入您的年龄');
		// alert 弹出警示框 输出的 展示给用户的
		alert('计算的结果是');
		// console 控制台输出 给程序员测试用的
		console.log('我是程序员能看到的');
	</script>
</head>
<body>

</body>
</html>

柑橘味柚芽

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 02 - 初识JavaScript

文章目录02 - JS初体验03 - JS注释04 - JS输入输出语句02 - JS初体验<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>02-JS初体验</title> <!-- 1. 初始JavaScript ================= 1.1 JavaScript是什么 --------------------
复制链接

扫一扫