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 变量名称 = 变量值；

扫描二维码关注公众号，回复： 15269862 查看本文章

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

web前端 --- javascript（01）-- 介绍、变量和数据类型