前端学习--JS入门(1) 变量/常量/数据类型/类型转换

Michelle209

已于 2024-02-24 12:28:05 修改

阅读量147

点赞数

文章标签：前端 javascript 学习

于 2023-04-03 22:54:50 首次发布

本文链接：https://blog.csdn.net/Michelle209/article/details/129936584

版权

本文介绍了JavaScript的基础知识，包括它作为客户端编程语言的角色，用于网页特效、表单验证和数据交互。讲解了JS的组成，如ECMAScript和WebAPIs（DOM和BOM）。还涉及JS的书写方式、输入输出语法、执行顺序以及字面量。此外，详细讨论了变量的声明、本质和命名规范，数组的使用，常量的概念，以及数据类型的分类和转换方法。

摘要由CSDN通过智能技术生成

一、JavaScript介绍

1.1 JS是什么

是什么？

运行在客户端（浏览器）的编程语言（html/css是标记语言）,实现人机交互

作用？

网页特效-监听用户行为让网页做出反馈

表单验证-针对表单合法性进行判断

数据交互-获取后台数据渲染到前端

服务器编程-node.js

组成？

ECMAScript（语言基础）

比如变量、分支语句、循环语句、对象等

Web APIs

--DOM（网页文档对象模型）

操作文档，对页面元素进行移动、大小、添加删除等操作

--BOM（浏览器对象模型）

操作浏览器，比如页面弹窗、检测窗口宽度、存储数据到浏览器等等

1.2 JS书写

内部

</body>上方写script标签

外部

</body>上方写<script src="./js/my.js"></script>

内联

<button οnclick="alert('逗你玩')">点击我月薪过万</button>

结束符

分号，一般不加

注释

单行//

多行/* */

1.3 JS输入输出语法

输出

//向网页<body>中输出内容
//写入标签可以被解析为网页元素
document.write('要输出的内容')
document.write('<h1>我是标题</h1>')

//页面警告对话框
alert('警告：不许摸鱼！')

//控制台输出
console.log('给开发人员看的')

输入

//给用户提示一个输入框，并提示用户输入文字
prompt('请输入您的姓名：')

1.4 JS执行顺序

按照HTML文档流顺序执行JavaScript代码

alert（）和prompt（）会跳过页面渲染先被执行

1.5 字面量

9999 数字字面量

'string' 字符串字面量

[ ] 数组字面量

{} 对象字面量

二、变量

2.1 变量是什么

计算机存储数据的容器

2.2 变量的基本使用

let 变量名 = 值

声明多个变量之间用逗号隔开（类似css并集选择器），但是为了可读性最好一行声明一个变量

2.3 变量的本质

程序在内存中申请的一块用来存放数据的小空间

2.4 变量名的规范

规则：

不能用关键字命名

只能用下划线、字母、数字、$组成，数字不能打头

字母区分大小写

规范：

起名要有意义

小驼峰起名法第一个单词首字母小写，后面首字母大写

2.5 数组

let 数组名 = [数据1，数据2，...]

可以存放任意类型数据

数组名.length //数组长度

三、常量

const 变量名 = 值

常量不允许重新赋值，声明时必须初始化

四、数据类型

JS数据类型分为两大类：

基本数据类型

--number数字型

--string字符串型

--boolean布尔型

--undefined未定义型

--null空类型

--symbol表示唯一（ES6）

--bigInt大数字，声明时加上后缀n（2020）

引用数据类型

--object对象（包含Array、Function）

4.1 数字类型

JS属于弱数据类型的语言，只有赋值了才知道是什么数据类型

对应强数据类型（Java/C++）声明数据变量时必须声明类型

算术运算符：+ - * / %

括号可以提高优先级

NaN代表计算错误，由不正确或未定义的数学操作产生，任何对NaN的操作都会返回NaN

4.2 字符串类型

可以用单引号、双引号或反引号声明，作用基本相同

单双引号可以相互嵌套，但是不能自己嵌套自己

字符串拼接：+

模板字符串

//外面用`` 里面${}变量名
let age = 18
document.write(`我今年${age}岁了`)

4.3 布尔类型

true / false

4.4 未定义类型

只声明变量不赋值的情况下，数据值是未定义类型

4.5 空类型

null

undefined 表示没有赋值

null 表示赋值了，值为空，可以存放没有准备好的对象

4.6 检测数据类型

typeof 变量名

typeof (变量名)

五、类型转换

使用表单、prompt获取的数据默认是字符串类型

5.1 隐式转换

+两边只要有一个是字符串，都会把另一个转换成字符串，作为单目可以把字符串转换为数字型

- * /都会把数据转换成数字类型

5.2 显式转换

转换为数字型

Number（数据）//如果有非数字则结果为NaN

parseInt（数据）//只保留整数

parseFloat（数据）//可以保留小数

表格案例

<!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>Document</title>
    <style>
        h2{
            text-align: center;
        }

        table{
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
        }
        th,
        td{
            padding: 5px 15px;
            text-align: center;
        }
        table,
        th,
        td{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h2>订单信息</h2>
    
    <script>
        let num = prompt('请输入需要购买的苹果数量')
        let address = prompt('请输入收货地址')
        const price = 5
        let sumPrice = num * price
        document.write(`
        <table>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>总价</th>
                <th>收货地址</th>
            </tr>
            <tr>
                <td>红富士苹果</td>
                <td>${price}元</td>
                <td>${num}个</td>
                <td>${sumPrice}元</td>
                <td>${address}</td>
            </tr>
        </table>
        `)

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