1.编程语言
1.1 编程 : 就是让计算机为解决某个问题而使用某种程序设计语言编写代码,并最终得到结果的过程。
1.2 编程语言 与 标记语言 的区别:
a.编程语言有很强的逻辑和行为能力,主动向计算机发送指令
b.标记语言是用来被读取,它是被动的。
2.计算机基础
2.1 计算机的组成:硬件、软件
a.硬件:
鼠标、键盘…(输入设备);
显示器、打印机…(输出设备);
cpu(负责处理数据与计算);
硬盘:永久存储
内存:暂时存储
b.软件:
系统软件: windows、Linux、macOS…
应用软件: QQ、浏览器、Word…
3.学习Javascript的意义
- 一个前端网页主要由三门语言组成,他们之间是缺一不可的关系
- HTML:确定网页的结构
- CSS: 确定网页的样式
- JavaScript: 确定网页的行为(交互)
- 众所周知,在前端开发中一个网页的源代码主要由三部分组成(HTML,CSS,Javascript),其中HTML确定网页的结构,CSS确定网页的样式,而JavaScript则主要负责网页的行为(动态效果,交互事件等)。
- JavaScript应用场景
- 1.网页特效
- 2.游戏开发(cocos2d-js)
- 3.服务端开发(Node.js)
- 4.命令行工具(Node.js)
- 5.桌面程序(Electron)
- 6.App(Cordova)
- 7.控制硬件-物联网(Ruff)
4.JavaScript语言的组成
- ECMAScript - JavaScript的核心
- ECMAScript定义了JavaScript的语言规范
- JavaScript的核心:描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关
- DOM - 文档对象模型
- 一套操作页面元素的API
- DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作
- BOM - 浏览器对象模型
- 一套操作浏览器功能的API
- 通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等
4.1-JavaScript的三种写法
a.复习CSS代码的三种写法
- 1.行内样式:不推荐,因为不便于维护
<h1 style="background: bisque">哈哈哈</h1>
- 2.内联样式:写在style标签中,如果界面css样式比较简单可以使用,复杂的话不推荐
<style>.div{background: hotpink;}</style>
- 3.外联样式:写在css文件中,使用link导入
<link rel="stylesheet" href="./01-css外联样式.css">
- css外联样式的本质其实就是字符串替换 将下方这行代码替换成对应文件的所有代码
b.JS代码三种写法
- JavaScript也有三种书写方式,并且与CSS的三种书写方式几乎一致
- 1.行内样式:不推荐,因为不便于维护
<button onclick="window.alert('坤哥')">点我就告诉你黑马谁最帅</button>
- 2.内联样式:写在script标签中,如果界面js代码较少可以使用,复杂的话不推荐
<script >alert("这是JS内联样式")</script >
- 3.外联样式:写在js文件中,使用script的src属性导入
<script src="./01-JS外联写法.js"></script>
**c.细节注意点
- 1.无论是CSS还是JS的三种写法,当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的
- 2.如果script标签没有src属性则表示内联样式,如果有src属性则表示外联样式,外联样式JS代码只能写在
js文件中而不能写在script标签中
例:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<!--
总结:js三种写法
1.行内写法:不推荐,因为不便于维护
2.内联写法:写在script标签中
3.外联写法:写在js中,使用script标签的src属性来导入
注意点:如果一个script标签有src属性(外联写法),此时内联的js代码不会执行
-->
<!--3.外联-->
<script src="01-js外联写法.js"></script>
<body>
<!--1.行内-->
<div onclick="alert('js行内')">div</div>
<!--2.内联-->
<script>
alert('js内联')
</script>
</body>
</html>
5. JS注释两种写法
-
代码注释的作用:
- 1.理清思路,方便自己以后阅读代码
- 2.规范编程,方便以后别人接手代码便于维护
-
JS注释有两种写法
// 注释内容
:单行注释:注释内容只能是一行,适用于注释内容较少/* 注释内容 */
:多行注释:注释内容可以是多行,适用于注释内容较多,比如一行写不下
例:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//单行注释:注释内容只能是这一行
/* 多行注释:注释内容可以是多行
第一行
第二行
*/
alert("JS注释");
</script>
</body>
</html>
6.代码运行的原理
程序运行原理:
1.计算机将存储在硬盘中的html文件读取到内存中
2.浏览器内核编译器开始编译代码(cpu只能处理二进制数据,需要将我们写的代码转成二进制)
3.CPU处理与计算
4.CPU将我们代码在运行时产生的数据保存到内存中
1.js代码报错原因
(1) 编译器做两件事 : 识别语法,处理(存储与计算)数据
(2) 报错的原因只有两个 :
a. 语法不识别 : SyntaxError
b. 数据不识别 : ReferenceError
(3) 一旦代码报错,程序终止运行,后面的代码都不会解析。
2.直接量 : 可以直接使用的数据 (能够被编译器识别的数据)
* 哪些数据可以被识别 : 必须要符合js的数据类型
3.数据类型 : js代码在运行时会产生不同的数据,不同的数据存储与处理方式不一样,
所以要对数据进行分类,称之为数据类型。
* JS数据类型一起有7种,分为两大类
a. 基本数据类型(5种)
b. 复杂数据类型(2种)
4.基本数据类型 :
(1) 字符串类型(String) : 一切以单引号'' 或 双引号"" 引起来的内容
* 作用:用于展示文本
(2) 数值类型(Number) : 一切数学中的数字
* 作用: 用于数学计算
(3) 布尔类型(Boolean) : 只有两个值 true(真) false(假)
* 作用: 用于表示事物对立面 (条件成立 / 条件不成立)
小技巧 : 谷歌控制台, 字符串会显示黑色 , 数字和布尔会显示蓝色
5. 检测数据类型
(1)语法
a. typeof 数据
b. typeof (数据)
(2)结果 : 得到该数据所属类型的字符串
typeof ('123') -> 'string'
typeof (123) -> 'number'
typeof (true) -> 'boolean'