javascript基础介绍与变量
. javascript是什么
. javascript 书写位置
. javascript 的注释
. javascript 的结束符
. 输入语法和输出语法
. 字面量
.JS代码执行原理介绍
.变量
.变量声明和赋值/取值
变量使用注意事项
变量命名规则
Javascript的初步了解
问题.1 为什么要学习JavaScript?
一个前端网页主要由三门语言组成，他们之间是缺一不可的关系
HTML：确定网页的结构
CSS: 确定网页的样式
JavaScript: 确定网页的行为(交互)
众所周知，在前端开发中一个网页的源代码主要由三部分组成
（HTML,CSS,Javascript）,其中HTML确定网页 的结构,
CSS确定网页的样式,而JavaScript则主要负责网页的行为（动态效果，交互事件等）。
总结：因为前端网页由三部分组成,HTML、CSS、JavaScript
问题 .2 JavaScript 是什么
是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
说人话: 就是教网页做事情跟电脑打交道语言 !
2. 作用
网页特效: (监听用户的一些行为让网页作出对应的反馈)
表单验证: (针对表单数据的合法性进行判断)
数据交互: (获取后台的数据, 渲染到前端)服务端编程 (node.js)
JavaScript的组成
JavaScript的核心
ECMAScript定义了JavaScript的语言规范
JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，
定义了一种语言的标准与具体实现无关.
文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作.
浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等.
权威网站： MDN
体验Javascript
javascript 书写位置
内部样式
直接写在html文件里，用script标签包住.
规范：script标签 </ body> 写在上面.
拓展： alert(‘你好，js’) 页面弹出警告对话框.
内部样式：写在script标签中,如果界面JS样式比较简单可以使用，复杂的话不推荐.
<body>
<script>
alert('你好, JS')
</script>
</body>
外联式
代码写在以.js结尾的文件里
语法：通过script标签，引入到html页面中。
<script src="./01-JS外联写法.js"></script>
行内式
代码写在HTML结构内部
行内样式：不推荐，因为不便于维护
<button onclick="window.alert('js行内写法')">欢迎来到黑马程序员</button>
细节注意点
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, 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>
<! js三种书写位置(与css一致)
1.行内写法 : 写在标签行内
2.内部写法 : 写在script标签内部
3.外部写法 : 写在js外部文件中,使用script标签的src属性导入
* 注意： 如果script标签写了src属性，就表示外部写法。此时内部的js代码不会执行。
>
javascript 的注释
-
代码注释的作用：
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>
javascript 的结束符
结束符\
代表语句结束
英文分号 ;
可写可不写（现在不写结束符的程序员越来越多）\
换行符（回车）会被识别成结束符 ,所以一个完整的语句，不要手动换行
因此在实际开发中有许多人主张书写 JavaScript 代码时省略结束符
但为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.）
<script>
alert(11);
alert(11);
</script>
<script>
alert(11)
alert(11)
</script>
输入语法和输出语法
语法：
人和计算机打交道的规则约定
我们要按照这个规则去写 比如： 你吃了吗？
我们程序员需要操控计算机，需要计算机能看懂
输入和输出
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。
输出
JavaScript 可以接收用户的输入，然后再将输入的结果输出：
`alert()`、`document.wirte()`
以数字为例，向 `alert()` 或 `document.write()`输入任意数字，他都会以弹窗形式展示（输出）给用户。
输入
向 `prompt()` 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
字面量
在计算机科学中，字面量（literal）是在计算机中描述 事/物
比如：
-
我们工资是： 1000 此时 1000 就是 数字字面量 2.'黑马程序员' 字符串字面量\
-
[] 数组字面量\
-
{} 对象字面量
javasript执行原理介绍
1-计算机组成
1.软件
应用软件：浏览器(chrome/ie/firefox)、QQ、Sublime、Word、webstorm
系统软件：windows，Linux，unix，OSX，iOS，android
2.硬件
三大件：CPU,内存,硬盘
输入设备：鼠标,键盘,摄像头等
输出设备：显示器,打印机,投影仪等
2-代码运行的原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
程序运行原理：
1.计算机将存储在硬盘中的html文件读取到内存中
2.浏览器内核编译器开始编译代码（cpu只能处理二进制数据，需要将我们写的代码转成二进制）
3.CPU处理与计算
4.CPU将我们代码在运行时产生的数据保存到内存中
-->
</body>
</html>
变量
问题1：为什么要学习变量？
需求：弹出一个输入框，让用户输入自己的年龄，我们如何拿到用户输入的数据，并且显示在网页呢？
使用变量就可以获取到用户输入的数据
问题2：变量的作用？
将数据存储在内存中
问题3：变量原理
变量原理：内存中一块存储数据的空间
说人话：内存相当于现实世界中的大酒店，而变量相当于这个酒店中的一个小房间
<script>
// x 符号代表了 5 这个数值
x = 5;
// y 符号代表了 6 这个数值
y = 6;
//举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！
// 将用户输入的内容保存在 num 这个变量（容器）中
num = prompt('请输入一数字!');
// 通过 num 变量（容器）将用户输入的内容输出出来
alert(num);
document.write(num);
</script>
变量声明和赋值/取值
声明
声明(定义)变量有两部分构成：声明关键字、变量名（标识）
关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 let 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;
let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！
赋值
声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。
<!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>
</head>
<body>
<script>
//变量作用： 在内存中存储数据
//1.声明变量 ： 在内存中开辟一个空间
let age
//2.变量赋值
// = : 赋值运算符（把右边的数据放入左边的变量中）
age = 18
//3.变量取值 ： 读取变量(容器)中存储的数据
document.write( age )
//变量可以在声明的时候赋值
let name = '白毛赛高'//等价于 (1) let name
(2)name = '白毛赛高'
document.write( name )
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
<script>
// let 变量名
// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
// age 即变量的名称，也叫标识符
let age;
</script>
</body>
</html>
变量使用注意事项
JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：
以下是使用 let 时的注意事项：
- 允许声明和赋值同时进行
- 不允许重复声明
- 允许同时声明多个变量并赋值
- JavaScript 中内置的一些关键字不能被当做变量名
以下是使用 var 时的注意事项：
- 允许声明和赋值同时进行
- 允许重复声明
- 允许同时声明多个变量并赋值
大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let，后期会更进一步介绍二者间的区别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
1.变量作用 ： 在内存中存储数据
2.变量语法：
2.1 声明变量 ： let 变量名;
2.2 变量赋值 : 变量名 = 值;
2.3 变量取值 : 变量名
3.变量使用注意点：
3.1 变量不能重复声明，程序会报错
3.2 变量重复赋值，会先销毁旧值，然后存入新值
3.3 一个变量 赋值给 另一个变量，会将自己的数据拷贝一份然后赋值
*/
//声明变量并且赋值
let num1 = 10;
/* 注意点1 ： 变量不能重复声明，否则程序会报错 */
// let num1 = 20;
/* 注意点2 ： 变量重复赋值，会先销毁旧值，然后存入新值 */
num1 = 20;
/* 注意点3 ： 一个变量 赋值给 另一个变量，会将自己的数据拷贝一份然后赋值 */
let num2 = num1;
console.log(num1,num2);
</script>
</body>
</html>
变量名命名规则
关于变量的名称（标识符）有一系列的规则需要遵守：
- 只能是字母、数字、下划线、$，且不能能数字开头
- 字母区分大小写，如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词（关键字或保留字）不允许使用
- 尽量保证变量具有一定的语义，见字知义
- 尽量使用小驼峰命名法,第一个单词首字母小写,后面每个单词首字母大写,例 :userName 注：所谓关键字是指 JavaScript 内部使用的词语，如( let) 和(var)，保留字是指 JavaScript 内部目前没有使 用的词语，但是将来可能会使用词语。
