认识JavaScript
百度百科信息
从切图仔到面向百度工程师
- HTML+CSS可以做一个静态的网页
- HTML+CSS+JavaScript可以与后端交互数据，做一个动态网页
- 在ES5(ES2014)之前，前端做的逻辑并不多，所以戏称为切图仔
- JavaScript的功能逻辑需要自己手写，不然很可能会成为 “面向百度工程师、CV工程师”
- 学习JavaScript是前端的重中之重，所以必须多花几个月的时间
JavaScript是什么？
- JS属于编程的弱语言
- JS是一种可以嵌套在HTML的脚本语言
- JS可以和后端交互
- JS不能直接操作本地硬盘的安全语言
JavaScript能做什么
- JS可以操作浏览器上面的DOM，可以增、删、改、查
- JS可以动态的校验后端返回的数据
- JS可以跨多个平台使用 (浏览器都有JS解析器)
JS的组成
一、ESMAScript
- 变量、数据类型、类型转换、操作符
- 数组、函数、作用域、预解析
- 对象、属性、方法
- 流程控制语句：判断、循环语句
- 内置对象：Math、Date、RegExp
- 简单数据类型：Numer、Boolear、String、Null、Undefined、Symber、Bigint
- 复杂数据类型: Function、Object、Array
二、 BOM
- location、history
- 定时器
- Windows对象
三、 DOM
- 动态创建元素
- 获取页面元素、注册事件
- 节点属性、节点层级
- 属性操作、样式操作
JS的基本语法
新建一个文件： index.html 复制下面代码：
<!DOCTYPE html>
<html>
<title>JavaScript练习</title>
<body>
<p>JavaScript练习</p>
</body>
<script>
// 后续的JS代码都复制在这里面运行
</script>
</html>
基本调试语句
// 控制台打印语句, 控制台可以直接打印出括号内结果
console.log();
// 弹窗打印语句，浏览器弹出一个窗口显示括号内的结果，会阻断浏览器运行
alert();
// 断点调试，打开浏览器控制台切换到Sources查看数据,会阻断浏览器运行
debug;
类型判断
var a = new Array();
console.log(typeof a); // object
console.log(a instanceof Array); // true
声明变量
var a = true; // 声明全局变量，var 会提前预解析后面的变量为undefined
let b = 'string'; // 声明局部变量，在作用域内可以使用
const c = 0; // 声明一个常量，简单数据类型不能直接更改
console.log(a,b,c); // 打印变量结果为： true,'string',0
类型转换
Numer、Boolear、String可以相互转换
以下代码可以在浏览器控制台上输出结果：
var a = true;
var b = 'string';
var c = 0;
console.log(Boolean(b)); // true
console.log(Boolean(c)); // false
console.log(a.toString()); // 'true'
console.log(c.toString()); // '0'
console.log(parseInt(a)); // NaN // 非数字 属于numbe类型
console.log(parseInt(b)); // NaN
console.log(typeof NaN); // number
引用数据类型使用
var obj = new Object();
var arr = new Array();
console.log(obj, arr); // {}, []
运算符
一、赋值运算符 '='
var a = 0;
console.log(a); // 0
二、算术运算符 '+、-、*、/'
var a = 1;
var b = 2;
var c = '1';
var d = '2';
console.log(a+b); // 3
console.log(c+d); // 12 // 字符串相加会拼凑在一起
console.log(a-b); // -1
console.log(c-d); // -1 // 字符串相减会先将字符串转换成数字类型在相减
console.log(a*b); // 2
console.log(c*d); // 2 // 字符串相乘会先将字符串转换成数字类型在相乘
console.log(a/b); // 0.5
console.log(c/d); // 0.5 // 字符串相除会先将字符串转换成数字类型在相除
三、逻辑运算符 '||、&&、！、！！、？？'
var a = true;
var b = false;
var c = undefined;
var d = null;
var e = 0;
var f = 1;
var g = '';
var h = '0';
console.log(a || b); // true // true || false 取 true
console.log(f || a); // 1 // 1 || true 遇到强制转换为布尔类型结果为true的则直接取首个结果
console.log(d || f); // 1
console.log(c || f); // 1
console.log(e || f); // 1
console.log(g || f); // 1 // 遇到'undefined、bull、''、0、false' 则直接取 || 后面的
console.log(a && b); // false // &&其中一个为false则为false
console.log(!a); // false // 转为之前结果的相反结果
console.log(!!c); // false // 强制转换为布尔类型
console.log(d ?? c ?? e); // 0 // 遇到undefined和null则取后面的结果
四、比较运算符 '>、<、<=、>=、==、==='
var a = 1;
var b = 2;
var c = '1';
var d = '2';
console.log(a > b); // false
console.log(a < b); // true
console.log(a >= b); // false
console.log(a <= b); // true
console.log(a == c); // true
console.log(a === c); // false // 全都等于需要判断类型
console.log(a < d); // true
console.log(a === c); // false
PS
希望大家都可以找到在工作中的乐趣。
热爱前端技术。
新手交流点这里 -->有兴趣一起摸鱼的点击这里
