第二章前端开发学习——JavaScript

第二章前端开发学习——JavaScript

一、初识JavaScript

二、JavaScript基础

三、JavaScript数据类型

四、JavaScript运算符

一、初识JavaScript

什么是JavaScript（what）：

JavaScript，通常会简称为'JS', 是一种浏览器脚本语言。

JavaScript特点：

JavaScript是一种脚本编程语言
JavaScript是一种解释型语言
Javas的语法结构与C++、java十分类似
JavaScript是弱类型语言
JavaScript是事件驱动的语言
JavaScript是一种基于对象的语言
JavaScript具有跨平台性
JavaScript具有安全性与简单性

JavaScript版本：

ECMAScript3.0
ECMAScript5.0
ECMAScript6.0 (ECMA2015、ECMAScript2016、ECMAScript2017)

JavaScript应用领域：

WEB前端 (网页)
后端（node.js）
混合APP(IOS 安卓)
游戏

二、JavaScript基础

1.如何在Html中使用JS

①引入外部脚本文件

②在<script>标签内写代码

③通过事件属性定义在元素内部

2.JavaScript注释

单行注释

多行注释

3.语句结束符（为了方便记忆末尾都加上分号，实际也可以不使用分号）

4.JavaScript中的输出

①输出到控制台

②输出到屏幕

③弹窗

5.JavaScript变量定义

变量名规范：

标识符必须由 "数字","字母", "_" 或者 "$" 组成,并且不能以数字开头
标识符不能与保留字（关键字）冲突
区分大小写（user_name/userName(推荐)/UserName/UserNameAge）

6.JavaScript弹框

①警告框alert（没有返回值）

②确认框confirm（返回布尔值True/False）

③输入框prompt（返回用户输入的内容，点击取消视为null）

7.获取html中的DOM属性

document.getElementById()

eleObj.innerHTML 获取/设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <style>
        input {
            width: 300px;
            font-size: 16px;
            line-height: 18px;
            padding:10px;
            border: 1px solid #ccc;
        }
        
        button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #f5f5f5;
        }
        .res {
            width: 300px;
            height: 100px;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>计算器</h1>
    <hr>
    
    <table>
        <tr>
            <td>加数1：</td>
            <td>
                <input type="text" id="num1">
            </td>
        </tr>

        <tr>
            <td>加数2：</td>
            <td>
                <input type="number" id="num2">
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <button onclick="add()">+</button>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <div class="res" id="box"></div>
            </td>
        </tr>
    </table>

    <script>
        
        //定义函数
        function add() {
            // 获取 用户在 input 中输入的内容
            // 获取元素对象 返回对象 对象描述 id是num1的元素 
            var inputEle1 = document.getElementById('num1');
            var inputEle2 = document.getElementById('num2');

            //获取用户在input中输入的值
            var v1 = inputEle1.value;
            var v2 = inputEle2.value;

            //判断用户输入是否是纯数字
            if (isNaN(v1)) {
                alert('加数1必须是纯数字');
                return; 
            }
            if (isNaN(v2)) {
                alert('加数2必须是纯数字');
                return;
            }

            //把字符串转换为数字
            v1 = Number(v1);
            v2 = Number(v2);

            //两个数相加
            var sum = v1 + v2;

            //获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容
            var boxEle = document.getElementById('box');
            boxEle.innerHTML = sum;

        }
    </script>
    
</body>
</html>

简单计算器（加法）

三、JavaScript数据类型

1.数据类型分类

原始类型 Number(数字)、 String(字符串)、Boolean(布尔值)、Null(空)、Undefined(未定义）
对象类型 Object、Array、Date、Math、Error Set(ES6).....
函数检测：typeof

2.Number数字类型

Tips：JavaScript不区分整型和浮点型

定义方式：

//十进制
var num = 100
//十六进制
var num = 0x10f
//科学计数法
var num = 123e100

浮点精度：

console.log(.1 + .2)

数值范围：

可表示的数字范围： -5e324 ~ 1.7976931348623157e+308

超过范围，会显示为 Infinity(正无穷) 或 -Infinity(负无穷)

isFinite()    //函数判断是否在范围内

特殊值NaN：

表示Not A Number，类型是Number 但又不是常规的数字

和任何值都不相等

与任何值运算,结果还是NaN

isNaN()    //函数 判读是否是 NaN

3.String字符串类型

声明方式：

①单引号：

②双引号

③反引号

Tips：${}方式嵌入变量

转义字符：

\b 退格         
\f 走纸换页     
\n 换行         
\r 回车         
\t 水平制表符    
\' 单引号     
\" 双引号     
\\ 反斜杠     
\xXX 十六进制XX指定的Latin-1 字符        
\xXXXX 十六进制XXXX指定的Unicode 字符

4.Boolean布尔值类型

let a = true
let b = false
while (true) {

}

5.null和undefined

null 表示未定义的对象（被动产生）
undefined 表示"缺少值"（被动产生）

6.数据类型转换

①自动类型转换

②强制类型转换

四、JavaScript运算符

1.算数运算符

表达式 表达式通常由运算符和操作数组成。简单表达式也有复杂表达式
表达式的特点表达式有计算结果
有些表达式还会产生额外的作用（对操作产生影响）

加法运算符 +
减法运算符 -
乘法运算符 *
除法运算符 /
模运算符 %
负号运算符 -
正号运算符 +
递增运算符 ++
递减运算符 --

2.关系运算符

相等运算符 ==
全等运算符 ===
不等运算符 !=
不全等运算符 !==
小于运算符 <
大于运算符 >
小于或等于运算符 <=
大于或等于运算符 >=
in运算符判断一个值是否属于某个数组或者一个属性是否属于一个对象
instanceof 判断一个对象的实例是否属于某个对象

3.逻辑运算符

逻辑与 &&
逻辑或 ||
逻辑非 !

4.位运算符

按位与 &
按位或 |
按位异或 ^
按位非 ~
左移 <<
右移 >>

5.赋值运算符

=
+=
-=
/=
*=
%=

6.其他运算符

条件运算符 ?:
typeof运算符判断操作数类型
delete运算符删除对象属性或者数组元素
void运算符忽略操作数的值
逗号运算符 ,
字符串连接 +

第二章 前端开发学习——JavaScript

猜你喜欢

第二章前端开发学习——JavaScript