JavaScript基础Day_01：js入门，输出方式，变量，常量，基本数据类型，算术运算符与算术表达式，复合算术运算符，Math高级数学计算，模板字符串

本文链接：https://blog.csdn.net/weixin_53893103/article/details/114163074

js和html，css的区别三者的区别

js：编程语言，交互
html：超文本标记语言，结构
css：行为、样式

JavaScript语言的组成

1. ECMAScript： JavaScript的核心

基本语法和数据类型

2. DOM：文档对象模型(WebAPI)

操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

3. BOM：浏览器对象模型(WebAPI)

操作浏览器功能的API

BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

JavaScript的三种写法

外联

<script src="js/index.js"></script>

内联：一般写在head与head之间，或者body结束标签的上面

 <script>
        console.log('你好')
    </script>

行内：

<body>
    <a href="#" onclick="alert('你好2')">点击之后会有效果</a>
</body>

js的五种输出方法

document.write（`你好`）：页面输出

console.log（'你好'）：控制台输出

prompt（'请输入'）：弹出一个输入框

alert('你好')：弹出一个提示框

confirm（'你好'）：弹出一个确认框

变量(variable)

原理：内存中用来保存数据的一块空间

作用：在内存中存储数据

特点：数据是可以改变的

let和var的区别：let不能重复声明，var可以重复声明（建议用let变量，安全性更高）

声明变量语法：

//声明变量
let name;    
 //变量名='值';
    name = '名字';   

//或者
//声明变量 变量名='值';
let name = '名字';     

//赋值后输出变量名
console.log(name);  //输出结果为名字

变量重新赋值

<script>
        let name = '姓名';
        name = '张飞'
        console.log(name)   //输出张飞
    </script>

批量声明：的两种语法

 <script>
        //第一种
        let a, b, c;
        a = 1;
        b = 2;
        c = 3;
        console.log(a, b, c);    //结果为：1 2 3

        //第二种
        let num1 = 10, num2 = 20, num3 = 30;
        console.log(num1, num2, num3);//结果为：10 20 30
    </script>

变量命名规范

起名要有意义
使用驼峰命名法
以下划线、字母、$开头，后面接任意的数字、下划线、字母、$
不能以JS的关键字作为变量名
严格区分大小写

基本数据类型(5种)

字符串(String)：用于展示文本

数字（Number）：用于数学计算

布尔类型(Boolean)：只有两个值 true(真) false(假)

Undefined类型：变量只有声明，没有赋值

null类型

1、空对象，只是目前没有具体内容

2、变量赋值为null

3、应用于不确定未来是什么数据类型

常量（const）

常量不能被再次赋值

数据是不会变化的，固定的

typeof关键字：检测数据类型

语法

 <script>
        // 第一种直接输出检测
        console.log('123');  //string
        console.log(123);   //number
        console.log(ture);  //boolean


        //第二种赋值声明检测
        let num = typeof 1;
        console.log(num);    //number


    </script>

算术运算符与算术表达式

1.算术运算符：数学中的算术运算
+：加法
-：减法
*：乘法
/：除法
%：求余（求模运算）

 <script>
        console.log(10 / 3);		//3.333333
        console.log(10 / - 2);	//-5
        console.log(10 * 2);     //20
        console.log(5 % 2);      //1
        console.log(5 + 2)       //7

    </script>

复合算术运算符

num += 2 只是 num = num +2的简写形式，他们之间完全等价

<script>
        let num1 = 1;
        let num2 = 1;
        num1 = num1 + 2;
        num2 += 2;
        console.log(num1);  //3
        console.log(num2);  //3
    </script>

Math高级数学计算

Math.ceil(数字) ：向上取整

Math.floor(数字) ：向下取整

Math.round(数字)：四舍五入

Math.max(数字1,数字2,...) ：求最大值

Math.min(数字1,数字2,...) ：求最小值

Math.random() ：随机小数，返回 (0,1) 之间的小数

<script>
        console.log(Math.ceil(2.2));  //3
        console.log(Math.floor(2.6));  //2
        console.log(Math.round(4.5))    //5
        console.log(Math.max(2, 6, 1, 9, 3));  //9
        console.log(Math.min(2, 6, 1, 9, 3)); //1
        console.log(Math.random()) //随机小数
    </script>