JS笔记01

最新推荐文章于 2024-01-17 08:33:32 发布

VIP文章最爱琴女E

最新推荐文章于 2024-01-17 08:33:32 发布

阅读量631

点赞数

分类专栏： JavaScript 文章标签： javascript 脚本语言

本文链接：https://blog.csdn.net/qwq_666/article/details/117928193

版权

初识Javascript

作用：

表单动态校验（密码强度检测）
网页特效
服务端开发（Node.js）
桌面程序（Electron）
App（Cordova）
控制硬件-物联网（Ruff）
游戏开发（Cocos2d-js）

HTML/CSS/JS的关系

HTML/CSS标记语言–描述类语言

HTML决定网页结构和内容（决定看到什么），相当于人的身体
CSS决定网页呈现给用户的模样（决定好不好看），相当于给人家穿衣服、化妆

JS脚本语言–编程类语言

实业业务逻辑和页面控制（决定功能），相当于人的各种动作

浏览器执行JS简介

渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
JS引擎：也称为JS解释器。用来读取网页中的Javascript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行js代码，而是通过内置的JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会执行解释执行

JS的组成

ECMAScript：JavaScript语法
DOM：页面文档对象模型
BOM：浏览器对象模型

ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套js语法工业标准

DOM—文档对象模型：文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

BOM—浏览器对象模型：它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

js初体验

js有3种书写位置，分别为行内、内嵌和外部

注意在HTML中我们推荐使用双引号，js中我们推荐使用单引号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 2.内嵌式的js -->
		<script>
			// alert('坚毅咏叹调');
		</script>
		<!-- 3.外部js script双标签 -->
		<script src="js/my.js"></script>
	</head>
	<body>
		<!-- 1.行内式的js直接写到元素的内部 -->
		<!-- <input type="button" value="琴瑟仙女" οnclick="alert('娑娜')" /> -->
	</body>
</html>

alert('英勇赞美诗');

注意：引用外部js文件的script标签中间不可以写代码

js注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//  1.单行注释   Ctrl + /
			/* 
				2.多行注释
				  多行注释
				  多行注释
			 */
		</script>
	</head>
	<body>
	</body>
</html>

输入输出语句

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//这是一个输入框
			prompt('请输入您的年龄');
			// alert 弹出警示框 输出的 展示给用户的
			alert('计算的结果是');
			//console 控制台输出 给程序员测试用的
			console.log('我是程序员能看到的');
		</script>
	</head>
	<body>
	</body>
</html>

js变量

概述：什么是变量

白话：变量就是一个装东西的盒子

通俗：变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改

声明变量

//声明变量
var age;//声明一个名称为age的变量

var是一个js关键字，用来声明变量，使用该关键字声明变量后，计算机会自动为变量分配内存空间

age是程序员定义的变量名

赋值

age = 10;//给age这个变量赋值为10

=用来把右边的值赋给左边的变量空间中，此处代表赋值的意思

变量值是程序员保存到变量空间里的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.声明一个age变量
			var age;
			// 2.赋值
			age = 18;
			// 3.输出
			console.log(age);
		</script>
	</head>
	<body>
	</body>
</html>

变量的初始化

var age = 18;//声明变量同时赋值为18

声明一个变量并赋值，我们称之为变量的初始化

变量的使用案例

弹出一个输入框，提示用户输入姓名
弹出一个对话框，输出用户刚输入的姓名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.用户输入姓名
			var myname = prompt('请输入您的名字')

最低0.47元/天解锁文章

最爱琴女E

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
JS笔记01

初识Javascript作用：表单动态校验（密码强度检测）网页特效服务端开发（Node.js）桌面程序（Electron）App（Cordova）控制硬件-物联网（Ruff）游戏开发（Cocos2d-js）HTML/CSS/JS的关系HTML/CSS标记语言–描述类语言HTML决定网页结构和内容（决定看到什么），相当于人的身体CSS决定网页呈现给用户的模样（决定好不好看），相当于给人家穿衣服、化妆JS脚本语言–编程类语言实业业务逻辑和页面控制（决定功能），相当于人的各种动
复制链接

扫一扫