JavaScript
w3c：三层分离
结构层：HTML
表示层：CSS
行为层：JavaScript
介绍
（1）作用：
- 数据校验
- 网页特效
- 数据交互
- 服务器端编程（NodeJS）
（2）javascript几种常见写法
- 标签：标签<onxxxx='属性'>
- 页面的script标签
- 单独的js文件中
（3）示例：第一个javasript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个JavaScript代码</title>
<script>
// 单行注释
alert('我也是对话框')
// 第二种方式：script标签中显示
</script>
<script src="javascript/09.js"></script>
</head>
<body>
<button onclick="alert('点我干嘛')">点击</button>
<!-- 第一种方式：标签引用js -->
</body>
</html>// 第三种方式：单独的js文件中
alert('这是外部js文件中的js代码')
（4）javascript对话框：（js设计之初是基于事件驱动式编程）
- 警告框：alert(“对话框”);
- 确认框：confirm("确认对话框");
- 输入框：prompt("交互对话框");
例：js对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="javascript/001.js"></script>
<title>js对话框</title>
</head>
<body>
</body>
</html>
// 警告框：提示信息
window.alert('这是一个警告框');
// 确认框
var isDel = confirm("确定删除信息吗?");// 该确认框会返回一个变量，该变量是一个布尔值
// var接收变量
// alert(isDel)
if (isDel) {
alert("删除成功");
}
// 输入框
var age = window.prompt("请输入你的年龄：","18")
// 当后面加上年龄，则为默认值(javascript接受到的值为字符串类型)
alert(typeof age); // 进行判断age变量的类型
if(age >= 18){
alert("恭喜您成年了");
}else{
alert("请开启青少年模式");
}
js变量和数据类型
（1）变量：（程序运行时，可以发生变化的量）
- 定义变量：js是一门弱数据语言，不需声名变量类型
在ES6之前：var 变量名称 = 变量值； // 类型由值自己决定
var age = 18;
在ES6开始：var关键字用来定义变量，已被取消（全局变量，无块级作用域）
let 变量名称 = 变量值；
const 关键字 // 定义常量
<1> 示例：js的变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="javascript/002.js"></script>
<title>js的变量</title>
</head>
<body>
</body>
</html> sss = 123;
var name = "刘建宏";
var age = 18;
var gendar = true;
alert(typeof name)
alert(typeof age)
alert(typeof gendar)
// for(var i = 0; i<10;i++){
// console.log(i);
// }
// alert(i);// 依旧能访问到，变量定义在for循环中，但var的作用域在全局
// for(let i = 0; i < 10 ; i ++){
// console.log(i);
// }
// alert(i);// 报错，无法访问，未被定义。let是块级变量
alert(sss);// 当变量前什么都没加，默认是全局变量。该写法禁止使用
// var PI = 3.14;
// PI = 3.15;// 值可以改变，无法形成定值
// console.log(PI + 10)
const PI = 3.14;
console.log(PI + 10)
PI = 3.15 // 报错，不能对常量进行操作
<2> 变量的命名规范
- 只能由有效符号组成：大小写字母 + 数字 + 下划线 + $
- 不能以数字开头
- 不能使用关键字或者保留字
- 变量命名尽量有意义
- 字母命名时，采用驼峰法
- 避免和系统中的类、方法、函数、变量一致
<3> js的注释
- 单行注释 // xxxxxxx
- 多行注释 /* xxxxxx */
- 文档注释 /*! xxxxxx */
区别：压缩时，文档注释不会删除，剩下的都会被删
（2）js数据类型
<1> 基本数据类型：
- 数值型（number）
分类：整数型（int）；浮点型（float）
例：进入控制台进行操作
- 布尔类型（boolean）
仅有两个值：true / flase
- 字符串（基本数据类型）
分类："字符串"；'字符串'；`字符串`（反引号，ES6提供，且可换行，可占位）
例：进入控制台进行操作
- null（代表无）
- NaN（not a number）
- undefined（未定义）
<2> 引用数据类型：（万物皆对象）：array、set、map、object、JSON......
<3> 例：js数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="javascript/003.js"></script>
<title>js数据类型</title>
</head>
<body>
</body>
</html>let a = 10;
alert(a) // 10
typeof a // number
let b = 3.14;
alert(b)
typeof b; // number
let s = 'this is a string'
alert(s) // 'this is a string'
let ss = "this is a string"
alert(ss) // 'this is a string'
let sss = `this
is
a
string`
sss //'this \nis \na \nstring'
alert(sss)
/*
this
is
a
string
*/
alert("a = "+ a +", b = " + b) // a = 10, b = 3.14
alert(`a = ${a}, b = ${b}`) // a = 10, b = 3.14
