js:基础-优快云博客

本文链接：https://blog.youkuaiyun.com/Au_ust/article/details/144059934

js是什么

JavaScript是一种运行在客户端的编程语言，实现人机交互的效果

js只要有个浏览器就能跑

js可以做网页特效、表单验证、数据交互、服务端编程

服务端编程是前端人拿他们特有的后端语言node.js来干后端干的事情

js怎么组成

JavaScript=ECMAScript(语言基础，规定语法规范；还有一种叫JCRIPT是微软的脚本语言)+Web ApIs

Web APIs=DOM（页面文档对象模型）+ BOM（浏览器对象模型）

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

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

js写在哪里

css分为行内样式表、内部样式表、外部样式表

js像css一样分为行内js、内部js、外部js

内部

直接写在html文件里，用script标签包住

规范：写在哪里都行但是最好script标签写在</body>上面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
<script>alert('你好，js~')</script>
</body>

</html>

像函数一样，先声明才能使用

外部

通过script在body里的调用

.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <script src="truejs/my.js">//中间不能写js代码，会被忽略</script>
</body>

</html>

.js

alert('你好，js~我是外部的js文件')

语法

js的分号像go一样可写可不写，建议不写

js的代码执行规范是按照html文档流的顺序执行的，alert()和prompt()它们会跳过页面渲染先被执行

输出

向body输出内容，如果里面包含html标签，也会被解析为网页元素

document.write('我是div标签')
document.write('<h1>我是标题h1</h1>')</script>

还有我们刚刚写的alert也可以输出，做页面弹出警告对话框

console.log('我是控制台')

f12调试，点击console查看控制台，控制台是给程序调试人员使用的

输入

prompt('请输入你的名字')

字面量：在计算机科学里，字面量（literal）是在计算机中描述事/物的量，就是被写在代码中的固定的值

包括数字字面量、字符串字面量、数组字面量、对象字面量等等

变量

变量：储存数据的容器

变量的创建（声明、定义）

let 变量名（声明关键字 变量名（标识））

let age
age = 18
alert(age)

let num = 20
let uname='张三'
console.log(num,uname);

更新变量

let age = 18
age=19

var会重复声明，但是let不会

而且var会先使用再声明，声明过的变量可以重复声明，没有变量提升、全局变量、块级作用域

交换变量

let a = 10
let b = 20
let temp = a
a = b
b = temp
console.log(a,b);

不用的变量会自动销毁

变量名规则

不能有关键字、数字不能开头、符号只能包含下划线和$、js区分大小写

规范

遵守小驼峰：第一个单词首字母小写，后面每个单词首字母大写

数组

let arr=[]//let 变量 数组字面量

使用数组名+索引号索引

let arr=[11,22,33,44]
document.write(arr)
document.write(arr[2])

打印数组的长度

document.write(arr.length)

常量

常量：永远不改变的量

const G=9.8

常量只能初次声明的时候赋值，后面不能再次赋值，必须初始化

数据类型

js是动态类型的语言，不需要强制类型转换（弱数据类型，有隐式转换）

基本数据类型

number数字型、string字符串、boolean布尔型、undefined未定义型、null空

用单引号、双引号、反引号包裹的是string（字符串），单双引号在js里没有区别，推荐使用单引号

单引号里可以套双引号、反引号，相同符号不能随便嵌套；也可以用转移字符“\”解决嵌套问题

引用数据类型

object对象

算术运算符

+-*/%学过不说了

+除了四则运算，还可以进行字符串的拼接

let age=19
document.write('我今年'+age)

模板字符串，简化拼接字符串的步骤

let age=19
document.write(`我今年${age}岁了`)

可以实现一样的效果，外面用``来包含，里面用${}包含变量

Boolean和C语言的bool一样，true和flase是Boolean的自变量

未定义是比较特殊的类型，只有一个值underfined

let age
document.write(age)

遇到这种变量没赋值的情况变量默认值为undefined

工作中会有等待数据传过来的变量，这时候就可以判断变量是不是undefined来看数据是不是传过来了

null空类型，打印出来就是什么都没有，代表无，空，值未知

let obj=null
console.log(obj);

null和undefined的区别是：null是定义了值为空，undefined是未定义

null在开发中，通常被视作一个尚未创建的对象（就像C语言里面的指针被置为null一样）

检测数据类型

因为是弱数据类型，所以需要检测你的数据是什么类型

可以使用函数和运算符

typeof x//常用的写法，运算符
typeof(x)//函数形式

let num=10
console.log(typeof num)

number类型

prompt输入的类型默认是字符串类型，这时候如果对它进行+运算会进行字符串的拼接：

这时候要把数据进行类型转换

类型转换

隐式转换

某些运算符在被执行的时候，系统内部会自动将数据类型转换，称之为隐形转换

规则：

+号两边只要有一个是字符串，都会把另外一个转换为字符串

-*/都会自动把两边的数据转化为数字类型

除非+作为正号，如果是正好则将数据转换为数字类型

let num=+prompt('你输入的数据将是number类型')
document.write(typeof num)

这样输入的数据就必为number类型了

parseInt(数据)//只保留整数
parseFloat(数据)//可以保留小数

缺点是转换类型不明确，不好记

显示转换

转换为数字类型

let str='123'
Number(str)

要转换的类型首字母要大写

let str = '123'
console.log(typeof Number(str))

类型为number

前面说的在’123‘这样类型的字符串前面加正号也可以转为数字类型

除此之外还有

parseInt(数据)//只保留整数
parseFloat(数据)//可以保留小数

这两个会自动提取数据里的整数和小数部分，但是数字要在前面，如果数据为‘abc123px’就提取不出来数字了

练习一下：

let num1 = +prompt('请输入第一个数字')
let num2 = +prompt('请输入第二个数字')
let sum=num1+num2
alert(`答案是${sum}`)

练习将js和样式的效果

.js

let price = +prompt('输入商品价格：')
let num = +prompt('输入商品数量：')
let address = prompt('输入收货地址：')

let sum = price * num

document.write(`
    <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总计</th>
            <th>收货地址</th>
        <tr>
            <td>小米爪机</td>
            <td>${price}</td>
            <td>${num}</td>
            <td>${sum}</td>
            <td>${address}</td>
        </tr>
        </tr>
    </table>
    `)

.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <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;
            text-align: center;
        }

        th {
            padding: 5px 30px;
        }

        table,
        th,
        td {
            border: 1px solid #000;
        }
    </style>
</head>


<body>

    <h2>订单确认</h2>
    <script src="truejs/my.js"></script>
</body>

</html>

根据你输入的内容不同改变价格、数量、总合计和收货地址