前端学习第63天,js基础
一.js三个组成部分
ES: ECMAScript语法
- DOM: document对象模型 => 通过js代码与页面文档(出现在body中的所有可视化标签)进行交互
- BOM: borwser对象模型 => 通过js代码与浏览器自带功能进行交互
二.引入方式
- 行间式
```
出现在标签中的全局事件属性中
this代表该标签, 可以访问全局属性, 再访问具体操作对象(eg: this.style.color = "red")
```
- 内联式
```
出现在script脚本标签中
可以通过标签的id唯一标识,在js代码块中操作页面标签
js采用的是小驼峰命名规范, 属于解释性语言(由上至下依次解释执行)
```
- 外联式
```
通过script标签的src属性链接外部js文件, 链接后, script标签本身内部的js代码块将会被屏蔽
在任何位置都可以使用this对象,当this对象不指向任意一个标签时,代表的是window对象
```
- js具体出现的位置
```
head标签的底部: 依赖性js库
body标签的底部(body与html结束标签的之间): 功能性js脚本
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js引入</title>
<!--js出现的第一个位置-->
<script>
// 一般为 依赖型JS库
</script>
</head>
<body>
<!--脚本:一段功能代码块, 可以嵌套在其他语言中使用, 完成一些额外的功能-->
<!--js可以用来书写脚本, js就是脚本语言, 书写在script标签中-->
<!--js三个组成部分：ES（ECMAScript）语法 | DOM（document object model） | BOM（browser object model）-->
<script>
</script>
<!--1.行间式-->
<!--i) 行间式代码块书写在一个个全局事件名属性中，没有script这样的一个全局属性-->
<!--ii) 在某一个标签的某一个事件属性值中，出现的this代表该标签-->
<!--iii) 该标签对象this可以访问该标签的任意全局属性（eg：style），
然后再间接访问具体需要操作的对象（style.color）-->
<div id="ddd" onmouseover="this.style.color = 'red'" onmouseleave="this.style.color = 'blue'">这是一个拥有行间式js的div</div>
<!--2.内联式-->
<!--i) 可以通过标签的id(唯一标识)，在js代码块中访问到该标签(js的选择器)-->
<!--ii) js代码块中语法采用的是小驼峰命名法, 属性的值都是用字符串形式进行赋值-->
<!--iii) js属于解释性语言，所有加载顺序会影响执行结构 => 内联式的script标签出现的位置-->
<script>
ddd.style.backgroundColor = "pink"
</script>
<!--3.外联式-->
<!--i) 通过script标签的src数据链接外部js文件-->
<!--ii) 使用外联的script(拥有src属性)标签，会屏蔽掉标签内部的js代码块-->
<!--iii) 在js任意地方，均由this对象，this对象不指向任何标签时，指向的是window对象-->
<script src="js/01.js">
// 被屏蔽掉的代码块
ddd.style.fontSize = "100px";
</script>
</body>
<!--js出现的第二个位置-->
<script>
// 一般为 功能性JS脚本
</script>
</html>
三.变量的定义
```js
四种定义变量的方式
语法: 关键词 变量名 = 变量值
num = 10; // 省略关键词, 定义的为全局变量, 在任何位置定义, 在任何位置都可以访问, 但不建议使用
var num = 10; // var关键词, 无块级作用域, 定义在块级作用域中的变量, 外界也可以访问
let num = 20; // let关键词, 有块级作用域, 定义在块级作用域中的变量, 外界无法访问
const NUM = 30; // const关键词,有块级作用域, 定义在块级作用域中的变量, 外界无法访问, 且变量的值不能再被二次修改, 所以为常量
/* 产生块级作用域的方式
{
直接书写
}
if语句可以产生
while语句可以产生
for语句也可以产生
*/
// 函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问
```
```js
// ES5 | ES6
// 是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法
```
```js
// 命名规范
// 变量命名规范
// 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)
// 可以以什么开头: 字母, _, $, 中文
// 不能出现什么: 关键字, 保留字
// 提倡什么书写规范: 小驼峰, 支持_连接语法
好的 = "真好";
console.log(好的);
```
四.三种弹出框
```js
// 普通弹出框
// alert("你丫真帅!!!");
// 输入框: 以字符串形式接收用户输入内容
// var info = prompt("请输入内容:");
// console.log(info)
// 确认框: 根据用户选择确认或取消, 得到 true | false 两个布尔结果
// var res = confirm("你是猪吗?");
// console.log(res)
```
五.数据类型
```js
// 值类型
var a = 10; // Number 10
var a = 'abc'; // String abc
var a = true; // Boolean true
var a = undefined // undefined undefined
// 引用类型
var a = function(){} // function f(){}
var a = {} // Object {}
var a = null // Null null
// 其他Object具体体现
Array | Date | RegExp
```
## 六.值类型的类型转换
```js
// 1.通过类型声明转换
Number() | String() | Boolean()
// 2.方法(函数)
parseInt('10') | parseFloat('3.14')
123..toString()
// 3.隐式转换
+'10' => 10
'' + 10 => '10'
```
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据类型转换</title>
</head>
<body>
number | boolean | string 之间相互转换
</body>
<script>
// 1. number 与 boolean类型
// boolean类型的true就是数字1, false就是数字0
console.log((true + true) * 10 * false)
// number 中 0, NaN 可以直接当false来使用, 其他的都可以当true来使用
// 2. string,boolean 转换为 number
var a = '10'; // => 10
a = '3.14'; // => 3.14
a = '3.14.15'; // => NaN
var b = true;
var n1 = Number(a);
console.log(n1)
var n2 = Number(b);
console.log(n2)
a = '3.14.15'; // 3.14
a = 'a3.14'; // NaN
console.log(parseFloat(a));
a = '3.94.15'; // 3
console.log(parseInt(a));
// 体现弱语言类型
a = '10';
var res = +a; // number 10
console.log(typeof(res), res)
// 3.number, string 转换为 boolean
// 在分支或循环判断中, 系统会将数字与字符串类型自动转换为布尔类型
// 不在判断中, 如何转换
console.log(Boolean(""));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean("1"));
console.log(Boolean(-100));
// 4.number, boolean 转换为 string
console.log(String(true));
console.log(String(1));
var a = 123;
console.log(a.toString());
console.log(123..toString());
console.log(3.14.toString());
var c = 123 + "";
console.log(typeof c, c);
// 用例
var z1 = 2 + +"5"; // 7
z1 = 2 + "5"; // "25"
// z1 = 2 ++"5"; // 语法错误 ++连在一起是 ++语法(了解)
var z2 = "5" - 2; // 3
console.log(z1, z2);
// 补充
// NaN与NaN不相等
</script>
</html>
