1.js的作用及其组成部分
我们为什么要学习JavaScript?
-
一个前端网页主要由
三门语言组成，他们之间是缺一不可的关系 -
HTML：确定网页的结构
-
CSS: 确定网页的样式
-
JavaScript: 确定网页的行为(交互）
JavaScript作用
-
JavaScript作用:确定网页的行为交互
JavaScript三个组成部分
-
ECMAScript- JavaScript的核心-
ECMAScript定义了JavaScript的语言规范
-
JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
-
-
DOM- 文档对象模型-
一套操作页面元素的API
-
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
-
-
BOM- 浏览器对象模型-
一套操作浏览器功能的API
-
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
-
2 js三种书写位置及其注释写法
1.js三种书写位置：
-
JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致
-
1.行内样式：不推荐，因为不便于维护
-
<button onclick="window.alert('js行内写法')">欢迎来到黑马程序员</button>
-
-
2.内部样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
-
<script >alert("JS内联样式")</script >
-
-
3.外部样式：写在js文件中，使用script的src属性导入
-
<script src="./01-JS外联写法.js"></script>
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 2.js外部写法 -->
<script src="./js外部.js"></script>
</head>
<body>
<!-- 1.行内写法 -->
<button onclick="alert('01-行内写法')">我是按钮</button>
<!-- 2-内部写法 -->
<script>
alert('02-我是js内部写法')
</script>
</body>
</html>
2.js的注释：
-
代码注释的作用：
-
1.理清思路，方便自己以后阅读代码
-
2.规范编程，方便以后别人接手代码便于维护
-
-
JS注释有两种写法
-
// 注释内容:单行注释：注释内容只能是一行，适用于注释内容较少-
vscode快捷键 CTRL + /
-
-
/* 注释内容 */:多行注释：注释内容可以是多行，适用于注释内容较多，比如一行写不下-
vscode快捷键 ALT + SHIFT + A
-
-
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//单行注释：注释内容只能是这一行
/* 多行注释：注释内容可以是多行
第一行
第二行
*/
</script>
</body>
</html>3.js代码执行原理介绍
程序运行原理：
1.计算机将存储在硬盘中的html文件读取到内存中
2.浏览器内核编译器开始编译代码（cpu只能处理二进制数据，需要将我们写的代码转成二进制）
3.CPU处理与计算
4.CPU将我们代码在运行时产生的数据保存到内存中
4.输入与输出语句
输出语句1 : 在网页弹出一个提示框，输出数据
//输出语句1:弹出一个提示框，通常用于提示用户，也可以用于调试
alert("hello world");
输出语句2：在控制台打印某个数据
//输出语句2:打印某个数据的值，查看数据是否成功
//这个写法不是给用户看的，而是给程序员自己调试看的
console.log("欢迎大家来到黑马程序员");
输出语句3：将数据显示到网页
//输出语句3:将数据显示到网页，相当于给body添加内容
document.write("黑马程序员是中国最牛逼的IT培训机构");
输入语句1：在网页弹出一个输入框，让用户输入数据
//输出语句1:弹出一个提示框，通常用于提示用户，也可以用于调试
alert("hello world");
输出语句2：在控制台打印某个数据
//输出语句2:打印某个数据的值，查看数据是否成功
//这个写法不是给用户看的，而是给程序员自己调试看的
console.log("欢迎大家来到黑马程序员");
输出语句3：将数据显示到网页
//输出语句3:将数据显示到网页，相当于给body添加内容
document.write("黑马程序员是中国最牛逼的IT培训机构");
扫一扫
960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
