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