JavaScript是什么
JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
JavaScript作用
JavaScript作用:确定网页的行为交互(教网页做事情)
JavaScript组成
-
ECMAScript- JavaScript的核心-
ECMAScript定义了JavaScript的语言规范 -
JavaScript的核心：描述了语言的基本语法和数据类型，
ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
-
-
DOM- 文档对象模型-
一套操作页面元素的API
-
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
-
-
BOM- 浏览器对象模型-
一套操作浏览器功能的API
-
通过
BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
-
JavaScript书写位置
JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，
内部样式(内嵌式)
通过 script 标签包裹 JavaScript 代码
如果js代码较少较少的话可以使用,比较复杂的话不推荐
<script>
// 页面弹出警示框
alert('欢迎来到中国')
</script>外部样式
一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入
// my.js
alert('嗨，欢迎来学习前端技术！')
<script src="my.js">
// 中间不要写内容
</script>
行内样式
此处了解即可,后面Vue框架会使用这种模式
<button onclick="alert('点我')">天王盖地虎</button>注释和结束符
单行注释
使用 // 注释单行代码
通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：
快捷键:ctrl + /
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 注释</title>
</head>
<body>
<script>
// 这种是单行注释的语法
// 一次只能注释一行
// 可以重复注释
document.write('嗨，欢迎来学习前端技术！');
</script>
</body>
</html>多行注释
使用 /* */ 注释多行代码
快捷键:shift + alt + A (或ctrl+shift+/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 注释</title>
</head>
<body>
<script>
/* 这种的是多行注释的语法 */
/*
更常见的多行注释是这种写法
在些可以任意换行
多少行都可以
*/
document.write('嗨，欢迎来前端技术！')
</script>
</body>
</html>结束符
在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 结束符</title>
</head>
<body>
<script>
alert(1);
alert(2);
alert(1)
alert(2)
</script>
</body>
</html>实际开发中有许多人主张书写 JavaScript 代码时省略结束符 `;
输入和输出语法
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。
输出
将数据显示到网页
// 1. 将数据显示到网页，相当于给body添加内容
document.write('我是div标签')
document.write('<h1>我是标题</h1>')在网页弹出一个提示框，输出数据
//2 .在网页弹出一个提示框
alert("hello world");控制台输出语法，程序员调试使用
//3. 控制台打印输出,给程序员看的.
console.log("欢迎程序员");变量
理解变量是计算机存储数据的“容器”，掌握变量的声明方式
变量就是计算机中用来存储数据的容器,它可以让计算机变得有记忆.简单理解变量就是一个装东西的盒子.
变量作用:用来存放数据.
声明变量
声明(定义)变量有两部分构成：声明关键字、变量名（标识)
<!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 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;
let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！
变量赋值
声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
<script>
// 1. 声明一个年龄变量
let age
//2. 赋值，将 18 这个数据存入了 age 这个“容器”中
age = 18
console.log(age)
// 3. 声明的同时直接赋值 变量的初始化
// let age = 18
// 小案例
let num = 20
let uname = 'pink老师'
console.log(num)
console.log(uname)
</script>
</body>
</html>变量的基本使用
更新变量
变量赋值后，还可以通过简单地给它一个不同的值来更新它。
// 1 声明的同时直接赋值 变量的初始化
let age = 18
age = 19
console.log(age)
//let 不允许多次声明一个变量
let age = 19
声明多个变量
多个变量中间使用逗号隔开
// 2 声明多个变量
let age = 18, uname = '迪丽热巴'
console.log(age, uname)
//提倡声明方式 一行声明一个变量,可读性比较好
let age = 18
let uname = '迪丽热巴'
console.log(age, uname)变量案例
用户输入
浏览器中弹出对话框： 请输入姓名， 页面中输出：刚才输入的姓名
// 输出用户名案例
// 1. 用户输入
// prompt('请输入姓名')
// 2. 内部处理保存数据
let uname = prompt('请输入姓名')
// 3. 打印输出
document.write(uname)交换变量
有2个变量： num1 里面放的是 10， num2 里面放的是20
最后变为 num1里面放的是 20 ，num2里面放的是 10
// 1 声明 num1 num2 2个变量并赋值
let num1 = 10
let num2 = 20
// 2.声明临时变量
let temp
temp = num1
num1 = num2
num2 = temp
console.log(num1, num2)变量命名规范
关于变量的名称（标识符）有一系列的规则需要遵守：
-
只能是字母、数字、下划线、$，且不能能数字开头
-
字母区分大小写，如 Age 和 age 是不同的变量
-
JavaScript 内部已占用于单词（关键字或保留字）不允许使用
-
尽量保证变量具有一定的语义，见字知义
注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。
let age = 18 // 正确
let age1 = 18 // 正确
let _age = 18 // 正确
// let 1age = 18; // 错误，不可以数字开头
let $age = 18 // 正确
let Age = 24 // 正确，它与小写的 age 是不同的变量
// let let = 18; // 错误，let 是关键字
let int = 123 // 不推荐，int 是保留字规范:
-
起名要有意义
-
遵守小驼峰命名法
-
第一个单词首字母小写，后面每个单词首字母大写。例：
userName
变量练习-输入用户信息
// 1. 姓名
let uname = prompt('请输入姓名')
let age = prompt('请输入年龄')
let gender = prompt('请输入性别')
document.write(uname, age, gender)let与var的区别
在较旧的JavaScript，使用关键字 var 来声明变量 ，而不是 let
var 现在的开发中一般不会在使用它,但是在比较老的项目里面还存在.
let为了解决var的一些问题
var 声明:
-
可以先使用 在声明 (不合理)
-
var 声明过的变量可以重复声明(不合理)
-
比如变量提升、全局变量、没有块级作用域等等
变量扩展-数组
数组 (Array) —— 一种将 一组数据存储在单个变量名下 的优雅方式
数组是一种复杂数据类型
数组可以在容器中 存储多个数据
数组三要素: 元素 下标 数组长度
数组声明语法:
let arr = [数据1,数据2,数据3,...,数据n]// let arr = [10, 20, 30]
// 1. 声明数组
let arr = ['刘德华', '张学友', '黎明', '郭富城', 'pink老师', 10]
// 2. 使用数组 数组名[索引号] 从0
// console.log(arr)
console.log(arr[0]) // 刘德华/
console.log(arr[4])
// 3. 数组长度:数组名.length
// 数组长度 = 索引号 + 1
console.log(arr.length) // 6
// let 刘德华 = 10
// console.log(刘德华)常量
概念：使用 const 声明的变量称为“常量”。
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
命名规范：和变量一致
// 1.常量 不允许更改值
const PI = 3.14
// PI = 3.15
// console.log(PI)
// 2. 常量声明的时候必须赋值
const PI注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）
数据类型
基本数据类型:number(数字型) . string(字符串型). boolean(布尔型) . undefined(未定义型) . null(空类型)
引用数据类型: object对象
数字型
即我们数学中学习到的数字，可以是整数、小数、正数、负数
// js 弱数据类型的语言 只有当我们赋值了，才知道是什么数据类型
let score = 100 // 正整数
let price = 12.345 // 小数
let temperature = -40 // 负数
// java 强数据类型的语言 int num = 10JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。
算术运算符
数学运算符也叫算术运算符，主要包括加(+)、减(-)、乘(*)、除(/)、取余(%)（取模）
console.log(1 + 1)
console.log(1 * 1)
console.log(1 / 1)
console.log(4 % 2) // 求余数 0
console.log(5 % 3) // 求余数 2
console.log(3 % 5) // 求余数 3 NaN
NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
NaN :not a number
//NaN not a number 不是一个数字
console.log('波哥' - 2)
console.log(NaN - 2)
console.log(NaN + 2)
console.log(NaN / 2)
console.log(NaN === NaN)计算圆的面积
面积的数学公式： π*r²
// 1. 页面弹出输入框
let r = prompt('请输入圆的半径：')
// 2. 计算圆的面积（内部处理）
let re = 3.14 * r * r
// 3. 页面输出
document.write(re)字符串型
通过单引号（ ''） 、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
注意事项：
-
无论单引号或是双引号必须成对使用
-
单引号/双引号可以互相嵌套，但是不以自已嵌套自已(口诀:外双内单 或者外单内双)
-
必要时可以使用转义符
\，输出单引号或双引号
let str = '波哥'
let str1 = "波哥"
// 反引号
let str2 = `中文`
console.log('波哥讲课非常有'基情'')// 报错
console.log('波哥讲课非常有"基情"')//正确
console.log('波哥讲课非常有\'基情\'')//正确字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个 字符串的长度
// 检测获取字符串的长度 length
let str = 'my name is ldh';
console.log(str.length);字符串拼接
+运算符 可以实现字符串的拼接。
口诀：数字相加，字符相连
console.log(1 + 2)
console.log('我叫' + 'sober')
let age = 25
document.write('我今年' + age + '岁了')模板字符串
模板字符串 外面用`` 里面 ${变量名}
// let age = 20
// document.write(`我今年${age}岁了`)
let uname = prompt('请输入您的姓名:')
let age = prompt('请输入您的年龄:')
// 输出
document.write(`大家好，我叫${uname}， 我今年贵庚${age}岁了`)布尔型
表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。
// 1. true false 是布尔型字面量
console.log(3 > 4)
let isCool = false
console.log(isCool)未定义
未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
// 2. 未定义类型 弱数据类型 声明一个变量未赋值就是 undefined
let num
console.log(num)空类型
JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值
// 3. null 空的
let obj = null
console.log(obj)
// 计算有区别
console.log(undefined + 1) // NaN
console.log(null + 1) // 1undefined与null的区别
undefined 表示没有赋值
null 表示赋值了，但是内容为空
数据类型检测
typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：
1.作为运算符： typeof x （常用的写法）
2.函数形式： typeof(x)
有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。
let num = 10
console.log(typeof num)
let str = 'pink'
console.log(typeof str)
let str1 = '10'
console.log(typeof str1)
let flag = false
console.log(typeof flag)
let un
console.log(typeof (un))
let obj = null
console.log(typeof obj)
let num1 = prompt('请输入第一个数：')
console.log(typeof num1)//string类型转换
理解弱类型语言的特征，掌握显式类型转换的方法
在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
+号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
任何数据和字符串相加结果都是字符串
console.log(1 + 1)
console.log('pink' + 1)
console.log(2 + 2)
console.log(2 + '2') // 22
console.log(2 - 2)
console.log(2 - '2') // 0
console.log(+12)
console.log(+'123') // 转换为数字型
console.log('1' * 1);显式转换
编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
转换为数字型
let str = '123'
console.log(Number(str))
console.log(Number('bozai'))//NaN
// let num = Number(prompt('输入年薪'))
// let num = +prompt('输入年薪')
// console.log(Number(num))
// console.log(num)
console.log(parseInt('12px'))
console.log(parseInt('12.34px'))
console.log(parseInt('12.94px'))
console.log(parseInt('abc12.94px'))
// -------------------
console.log(parseFloat('12px')) // 12
console.log(parseFloat('12.34px')) // 12.34
console.log(parseFloat('12.94px')) // 12.94
console.log(parseFloat('abc12.94px')) // 12.94转换为字符型
// 1. 把数字型转换为字符串型 变量.toString()
let num = 10;
let str = num.toString();
console.log(str);
console.log(typeof str);
// 2. 我们利用 String(变量)
console.log(String(num));求和案例
// 1. 用户输入 prompt 得到是字符串类型 要转换为 数字型
let num1 = +prompt('请输入第一个数字：')
let num2 = +prompt('请输入第二个数字：')
// 2. 输出
alert(`两个数相加的和是:${num1 + num2}`)每日一语：
越努力越幸运
2245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
