JavaScript概述
JavaScript的介绍
js属于一门面向对象的编程语言 属于跨平台
面向对象(oop) 以对象方式实现所有的功能
跨平台：js代码不论是在什么样的操作系统上执行结果都是一样
JavaScript发展史
ECMA根据微软与网景 配合设计了JS的语法标准(ECMAScript 简称叫做ES)
ES存在很多的版本包括 ES3 ES5 ES6 ES8 等
JavaScript应用场景
1、实现网页效果
2、实现小游戏
3、小程序
4、APP应用
5、鸿蒙应用 等等
浏览器端JavaScript组成(记忆)
浏览器属于js的一种运行环境(比不可少的)
组成：ES+BOM+DOM
ES:语法标准
DOM:浏览器对象模型提供了控制到浏览器的功能的API
BOM:文档对象模型 提供了控制页面元素的功能API
JS在HTML中书写位置
行内
<!-- 1、标签上使用on开头的属性(事件)
onclick 表示的是点击事件
对应的属性值就可以使用js语句
alert属于DOM所功能的功能 用于弹窗提示
如果提示的是文本内容 就使用引号 数字 可以直接写
-->
<button onclick="alert('js语言')" >按钮</button>
<button onclick="alert(20)">按钮2</button>
<!-- 2、a标签的 href属性中使用javascript:js代码; js代码可以不写 -->
<a href="javascript:alert('阻止默认行为');" >百度一下</a>
<!-- 行内方式使用js代码会导致结构与行为不分离 -->
内嵌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn" class="btns">按钮</button>
</body>
</html>
<script>
document.querySelector('#btn').onclick = function(){
alert("javascript高级程序设计");
}
</script>
外联
<body>
<button id="btn">按钮</button>
</body>
</html>
<!--
外联方式 还是使用script标签 需要设置src属性指定文件地址
一旦使用了src属性 script标签中包裹的任何js代码都无效了
引入的文件没有后缀要求 一般使用js后缀 可以有语法提示
-->
<script src="./base.txt">
alert("hello world")
</script>
JS中的输出语句
alert()
<!-- 1、alert 页面弹窗提示 alert(需要输出的内容) 数字不用使用引号 字符串 需要使用引号（使用英文的引号） -->
<script>
alert("测试");
</script>
document.write()
<!-- document.write(要输出的内容) 页面上输出某些内容 -->
<script>
document.write("<strong>加粗的内容 可以正常的渲染</strong>")
</script>
prompt()
<!-- 3、prompt(提示内容) 接受用户输入 -->
<script>
var sex = prompt("输入你的性别");
alert(sex)
</script>
confirm()
<!-- 4、confirm 询问 -->
<script>
var isDelete = confirm('是否删除数据，一旦删除就无法恢复');
alert(isDelete)
</script>
console.log() 重点
<!-- console.log(输出的内容) -->
<script>
var num = 10;
console.log(num);
console.log('勇哥每天刷美女');
</script>
JS中注释
// 单行注释 不能换行
/*
注释代码随便写
多行注释中不要嵌套多行注释 会产生歧义
*/
JS的变量（重点）
表达式
一种计算 只要能得到一定结果都叫做表达式
例如 数学中1+1 就是一种表达式 y = n+2
每一个表达式都可以计算出一个结果 这个结果对后面肯定是有用的 所以就需要保存起来，存储一定内容就需要使用变量
变量属于数据的一种容器
变量声明与赋值
// 1、变量声明(创建) 就是创建 创建一个可以存放数据的容器
// 语法 var 变量名称 注意一定要有空格
var num;//js中每一句话结束可以选择是否使用分号 推荐使用
// 2、变量赋值 变量第一次赋值也叫做初始化
// 语法 变量名称 = 值
num = 20;
// 使用变量的时候 不要带引号 使用引号表示为字符串
console.log(num)
// 3、简化写法 同时创建变量并且赋值
// 语法 var 变量名称 = 值
var n = 30;
// 使用变量进行计算
var m = n+20;
// 先将n的值输出 在将m的值输出 如果需要使用console.log输出多个值 可以使用逗号分割
console.log(n,m)
变量命名规则（记忆）
1、规则
1、js严格区分大小写
2、变量名称可以使用的字符只能是 英文字母、数字、下划线(_)、美元符号($)
3、变量名称不能使用数字开头
4、不能使用js中内置的关键字与保留字作为变量名称
关键字：系统内置需要使用的一些单词
保留字：系统预留的一些单词
2、规范
1、尽可能使用单词表示变量名称（见名知意）
2、采用驼峰式写法(一般变量名称使用小驼峰 类名称才使用大驼峰)
JS数据类型
数据类型分类(记忆)
数据类型是以变量中所保存的值进行的归类
基本类型
数值类型
字符串类型
布尔类型
undefined
null
引用类型
数组、
对象
函数等
数值类型
整数的基本使用
// 1、数值类型的基本使用 在js中所有可以使用的数字都是数值类型(正数、负数、小数、科学计数法、进制数)
var n = 10;
// 变量类型的检查
// typeof 变量名称
// typeof(变量名称)
var res = typeof n;
console.log(res);//number 表示是数值数据类型
var height = 1.78;
console.log(typeof height)
小数的使用
// 2、小数
var num = 0.1 + 0.2;
console.log(num);
// 将0.2+0.2表达式计算的结果进行输出
console.log(0.2 + 0.2)
// 为什么0.1+0.2 不等于0.3 因为小数的计算会存在精度问题 计算机中cpu只有加法运算 并且只能计算整数 其他的运算都是经过转换后在进行计算的而转换小数的过程中就有可能会出现精度丢失
// 解决方案 1、等比缩放 先将每个数都乘以一个系数
console.log((0.1*100+0.2*100)/100)
// 解決方案 2、使用toFixed内置函数解决(保留小数点的位数)
// 使用数值的变量.toFixed(位数)
console.log(num.toFixed(2))
NaN
// 3、NaN 是数值类型但是是一个无法表示的数字
// 以后一般计算出NaN之后 后面所有的计算都是有问题
var str = "hello";
var res2 = str * 2;
console.log(res2)
console.log(typeof res2)
数值的范围（了解）
// 4、数值的范围
// 最大的安全整数 计算的过程中 在这个数子内的计算都保证准确
console.log(Number.MAX_SAFE_INTEGER)
// 最小安全整数
console.log(Number.MIN_SAFE_INTEGER);
console.log(Infinity);//无穷
字符串数据类型
存储字符串数据类型的数据
一个英文字母与一个函数都是一个字符 多个字符组合到一起就叫做字符串
在js中值使用单引号或者双引包裹的就是字符串
// 1、基本使用
var str = '字';
var str2 = "头发会影响到脑的发育吗?";
console.log(typeof str2);//string
字符串单双引号的嵌套
// 2、引号的嵌套问题
// 字符串中使用引号不能使用现在包裹的引号
// 因为js在理解相同的会产生歧义
var str2 = 'my name"s leo';
字符串转义符
// 3、字符串转义符 在特殊符号前面使用\ 取消原有的作用
var str3 = 'my name\'s leo';
console.log(str3)
// 转移符号使用场景
var path = 'D:\\phpstudy_pro\\WWW\\WHHTML2306\\课前分享\\打地鼠';
console.log(path)
字符串拼接
// 4、字符串拼接
var firstName = '蔡';
var lastName = '徐坤';
// js中拼接字符串使用的加符号
console.log(firstName + '先生')
console.log(20 + 30);
// 在使用+符号运算 只有连接的两边都是数字才进行加法运算 否则一律作为字符串拼接功能
console.log(firstName + 20);
布尔类型
// 1、布尔类型
// 布尔类型表示事物的两面 真与假 true与false
var b1 = true;//表示真 True
// var b2 = True; 这个是错误写法
console.log(typeof b1);//boolean
undefined
// 2、undefined 属于js语言为变量默认初始化的一种数据类型 表示应该有值但是现在没有
var un;
var nu2 = undefined;
console.log(un);
console.log(typeof un);
null
// 3、null 空 只有一个值就是null
var nu = null;
console.log(typeof nu);//object
运算符
算数运算符
// 算数运算符 就是数学中+(加 可以加法也可以拼接) -(减法运算) *(乘法运算) /(除法运算) %(取余 求模)
console.log(10%3);//10对3求余数 得1
// 求余数经常使用它计算是否可以将某个数整除 从而可以计算是否是某个数的倍数(奇数偶数)
赋值运算符
// 将某一个值赋值给一个变量
// = += -= *= /= %=
// 等号在编程语言中表示赋值 将右边的结果赋值给左边
// 将10 + 20 的结果赋值给n变量
var n = 10 + 20;
// 将字符串赋值给n变量保存
n = '你好！';
// js因为是弱类型语言 变量可以存储任意的数据类型的值
// +=
var m = 10;
// 先将m变量中存储的值加10 最后将结果在重新保存到m变量中
m = m + 10;
m = m + 20;
// += -= *= /= %=属于简化写法 例如 a+=b 等价于 a = a + b
var num = 10;
num += 10;
num += 20;
var name = '李白';
var age = 70;
var htmlStr = '<table>';
htmlStr += '<tr>';
htmlStr += '<td>'+name+'</td>';
htmlStr += '<td>'+age+'</td>';
htmlStr += '</tr></table>'
document.write(htmlStr)
比较运算符
// 所有的比较运算符最后得到的是布尔值
console.log(10>20);//false
console.log(10>=20);//false
console.log(10<20);//true
console.log(10<=20);//true
console.log(10==20);//判断相等 不等
var n = 10;
var str = '10';
console.log(n == str);//涉及到数据类型自动转换 只会比较值是不是相同的
console.log(n != str);//判断n与str值是否不相等
// === 全等判断 判断值与数据类型全部相等
console.log(n === str)
// 判断n与str不全等 判断n与str变量中的数据类型与值有任何一个不相同就是不全等
console.log(n !== str);
逻辑运算符
// 逻辑运算符 有三个 &&并且 ||或者 ！ 取反
// 逻辑运算符最终得到的结果也是布尔值
// && 并且运算符 要求连接的都是真最终结果才为真 只要有一个为假最终结果为假
var n = 10;
var res = (n > 5) && (n < 20);
console.log(res)
console.log(n > 30 && n < 20);
// || 或者 只要有一个为真最终结果为真
console.log(n > 30 || n < 20)
// !取反 真取反为假 假取反为真
var flag = true;
console.log(!flag)