JavaScript 基础 - 技术栈

js书写位置

js一般是和HTML、css文件结合，写动态网页的。

HTML文件内

js可以直接写在HTML文件内，一般写在HTML文件内的时候我们会写在</body>的上面，紧挨着它。

html 复制代码

<html>
<head>
</head>

<body>


//<script></script>这两个加上代码块就是内置的js代码了
<script>
代码块
</script>

</body>

</html>

单独的js文件导入HTML文件

我们也可以写一个单独的js文件，并在HTML文件内引用这个文件

html 复制代码

<html>
<head>

</head>

<body>


//常用的三种路径都可以，推荐相对路径
<script src ="js文件路径"></script>
</body>

</html>

HTML标签内置

在单独的HTML标签内应用js，内联。这个前期用的不多，而且我也不是很会，就先略过。^_^

js 常用的三种输出

提示栏提示

弹出提示栏

语法：alert(" ")，可以输出变量，或者想说的话。变量不加引号，想说的话加引号。可以使用+连接

html 复制代码

 let name = "John Doe"
    alert('Hello World!'+name);//提示框输出

输出到浏览器

输出到浏览器，如果是HTML语法会被解析之后再显示

语法: document.write()可以输出变量或者一句话，并且可以拼接

html 复制代码

 let name = "<table align =center border='10'><tr><td>你好</td></tr></table>"
    document.write(name)//打印到当前页面，如果有HTML元素会解析HTML元素

这样浏览器就会生成一个表格

输出到控制台

console.log()打印到控制台。这个不是个用户看的，我们想查看需要右击浏览器界面，选择检查
然后会显示一个

找到控制台就可以查看我们想输出的了。有的浏览器可能是英文，我们只需要找到console就可以了

js 定义变量

js中的变量在定义的时候没有类型这一说，而是存储什么数据就是什么类型。

var

var name 定义一个名字为name的变量。

var可以重复声明同一个变量，会覆盖前面声明的

let

let name 定义一个名字为name的变量。

不可以重复声明

const

const name 定义一个名字为name的变量，这个变量的值是我们一开始就要给出的，并且不可修改

let和var和const的不同之处

首先，这三个关键字声明变量都会（变量提升）也就是说js代码先执行变量声明语句，var在声明语句之前就可以使用，但是没有值（undefined），但是let和const在声明语句之前无法使用，否则会报错。

js数据类型

js的输入语句

我们在定义好变量之后可以使用以下几种方法进行赋值

假设变量name

提示栏输入

name = prompt("what is your name？")这里的话会被输出到提示栏上

大概是这样，我们输入之后会赋值给name变量。通过这个方法获取的都是string类型的变量。

其他输入

其他输入暂时先不讲，因为还没有学到。

js数组

array，数组

定义：let array = [数据1，数据2，数据3......]字符串要加引号，变量直接放上去。

支持下标，0基。array[0]这样。并且一个数组可以存放多个不同数据类型的数值

数组a赋值给数组b，则修改b的值会映射到a

let arr = [1,2,3,4,5,6]

let arrt = arr

arrt[1]=100

document.write(arr[1])//最后输出100

求数组长度，arr.length

数组的增删改查，假设有数组arr =[1,2,3,4]

增：

1--- arr.push(元素1,......,元素n)向数组末尾添加一个或多个元素

2--- arr.unshift(元素1,......,元素n)向数组开头添加一个或者多个元素

删：

1--- arr.pop() 删除数组末尾元素

2--- arr.shift()删除数组第一个元素

改：

arr[对应下标] = 新的值

查：

arr.indexof(元素) 返回元素所在下标，如果有多个相同元素则只会查找第一个

arr.includes(元素) 查找是否存在元素，如果有则返回true没有返回false

合并两个数组：假设有arr =[1,2,3,4]和arr2 = [5,6,7,8,9]

arr.concat(arr2) 这个操作会返回一个新的数组，如果不想改变arr和arr2就可以用一个新的变量来接收这个数组，最后的结果就是[1,2,3,4,5,6,7,8,9]

js字符串

js的字符串表示是 " " ' ' ` `这三个引号引起来的，分别是双引号，单引号，反引号（反引号位置在Esc的下面）

如果我想输出一句话：你好，我是"计算机"。就要遵循一个原则：外单内双，外双内单

document.Write("你好，我是'计算机' ")

document.Write('你好，我是"计算机" ')

如果外围使用的是双引号，里面的引号就需要与外围不一样。或者使用转义字符：\" \'也可以

字符串拼接，可以字符串拼字符串，字符串拼数字，字符串拼变量，变量拼变量。但是要注意+左右必须有一方是字符串类型。

模板字符串，字符串的拼接有时候并不能满足我们。+写起来有点没逼格。我们就可以使用反引号

`你好，我今年 ${age}岁，性别为$ {gender}`。这里面的age和gender都是变量。我们使用${}来告诉电脑它是一个变量。相较于+拼接这个可能会好一点

js bool，undefined，null，类型判断

bool布尔值，这个值只有true和false，表示对和错。一般用于循环条件，判断条件之类的。

5>8 = false，我牛13 = true

undefined未赋值，仅定义但是没有赋值。

null空，赋值了，但是赋值的是"空"

typeof(x)或者typeof x都可以判断数据类型，会将类型作为返回值返回。

js数据类型转换

隐式转换

+如果加号两边有一个是string类型，那么就把另一个也转换成string类型。然后进行拼接。如果两边都是数字，就进行算数运算。-*/都是number类型的操作

显式转换

1.number(x)，把x转换为数字类型，true转成1，false转成0.如果是string类型就需要判断字符串是否是纯数字，如果是就转换，如果不是就为NaN

2.string(x)，转换为字符串类型，"x"转换结果

3.bool(x)，转换为布尔类型，数字类型非零为true，0为false。string类型非空字符串为true，空字符串为false