js基础(1)

JS的组成

Javascript由ECMAScript、DOM和BOM组成。

ECMAScript是由ECMA国际进行标准化的一门编程语言，Javascript是他的实现和扩展

DOM的全名为文档对象模型，是w3c组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

BOM的全名为浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

JS有三种书写位置：行内、内嵌、外部

<!-- 行内式
其实这里的代码并不需要都复制到vs code，只需在vs code上打！即可自动补全，只需要把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>
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>
</html>

接着在vs code上安装插件open in browser，右键，点击open in default browser，即可打开一个网页查看效果

<!-- 内嵌式 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert('js初学者');
    </script>
</head>
<body>
     <!-- 向前跑 -->//注释快捷键 ctrl /
<!-- <input type="button" value="唐伯虎" onclick="alert('秋香姐')"> -->
</body>
</html>

<!-- 外部式，得先在同级目录下建立一个 js文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="D:\Microsoft VS Code\JavaScript实验\test.js"> 
    </script>
    <!-- <script>alert('星星孤单坠落在那片海') </script> -->
</head>
<body>
     <!-- 向前跑 -->
<!-- <input type="button" value="唐伯虎" onclick="alert('秋香姐')"> -->
</body>
</html>

1 2	//js文件 alert('外部js无法执行')

这里我不知道为什么外部无法引用，在网上找到的解决方案：改路径、清缓存。都无法解决，未完。。。。

输入输出语句

prompt：输入框

1	<script>prompt('请输入你的年龄')</script>

alert：弹出警示框

1	<script>alert('请输入你的年龄')</script>

console.log 控制台输出，提供给程序员测试用的

1	<script>console.log('请输入你的年龄')</script>

按F12进入开发者模式，在console下即可找到

变量

声明变量：var 变量名

也可以不声明直接使用，这点和python是一样的

变量命名规范

由字母（A-Z，a-z）、数字（0-9）、下划线、美元符号（$）组成。严格区分大小写、不能以数字开头、不能是关键字、保留字、首字母小写，后面单词的首字母需要大写(驼峰命名法)、尽量不是使用name作为变量名

保留字：预留的“关键字”，意思是现在虽然不是关键字，未来可能成为关键字。不能使用他们作为变量名或方法名

数据类型

JS把数据类型分为两类：简单数据类型和复杂数据类型

简单数据类型

Number

数字前面加0表示八进制，输出时默认转化为十进制。数字前面加0x表示十进制

Infinity代表无穷大，大于任何数值。Infinity代表无穷小，小于任何数值。NaN，Not a number，代表一个非数值

isNaN(变量名)：这个方法用来判断是否时数字，是数字，返回false，不是数字，返回true

String

length：检测获取字符串的长度

1 2	var str="what is your name" alert(str.length)

字符串的拼接

用+进行拼接，这里和python也是一样的。唯一不同的是js的字符串拼接无论+号两边是否为同一类型，均允许拼接。而python不行

 var str="what is your name"
 var str1="my name is andy "
 //str1=12
alert(str+str1)

Boolean

布尔类型只有true和false，用于数据运算时，true表示1，false表示0

Undefined

一个声明后没有被赋值的变量会有一个默认值undefined。可以与字符串进行相连，与数字相加为NaN

1
2
3

var age;
alert("DENGYI"+age)//DENGYIundefined
alert(age+1)//NaN

Null

空值

1
2
3

var space=null
alert(space+"DENGYI")//nullDENGYI
alert(space+1)//1

检验数据类型

使用typeof进行检测

var num="213"
alert(typeof num)//number
var time=null
alert(typeof time)//这里注意，输出的不是null，而是object

还有一点值得注意，prompt取回的值为字符串型

1
2
3

var num
num=prompt("请输入一个数字")
alert(typeof num)//string

除了通过typeof检测数据类型，我们还可以通过控制台的颜色进行判断

console.log(12)//蓝色
console.log("13")//黑色
console.log(true)//蓝色
console.log(undefined)//灰色
console.log(null)//灰色

数据类型转换

转换为字符串

其中第三种转化为隐式转换

转换为数字

第一种方法和第二种方法可以将数字后的字母去掉，比如parseInt(120px)就会得到120

转换为布尔型

使用Boolean()函数转换为布尔型

alert(Boolean(NaN))//false
alert(Boolean(undefined))//false
alert(Boolean(null))//false
alert(Boolean(12))//true
alert(Boolean("易班打卡"))//true

运算符

算术运算符

算术运算符包括+ 、- 、* 、/、%

1	alert(0.1+0.2)//0.30000000000000004

结论：尽量避开浮点数的使用

1 2	alert(num++)//1 alert(++num)//3

自增自减运算符，这和其他语言是一样的，num++先用了再加，++num先加了再用。减减运算符同理。前置运算符和后置运算符单句使用时一样效果

比较运算符

比较运算符也叫关系运算符，<、>、>=、<=、==、!=、===、!==，返回布尔值

1	alert(18=="18")//true,默认转换数据类型，会把字符串型的数据转换为数字型

在这里，我学到新的比较运算符===，这个运算符叫全等。要求两侧的值还有数据类型完全一致才可以true

1	alert(18==="18")//false

逻辑运算符

&& 逻辑与 || 逻辑或 ! 逻辑非。这和其它语言是一样的

短路运算

短路运算也叫逻辑中断：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不在继续运算右边的表达式的值

逻辑与

语法：表达式1&&表达式2

如果第一个表达式1的值为真，则返回表达式2

如果第一个表达式1的值为假，则返回表达式1

alert(123&&456)//456
alert(0&&456)//0
alert(NaN&&1+2&&5)//NaN,这对于'',null,undefined是一样的
alert(null&&1+2&&5)//null

逻辑或

语法：表达式1||表达式2

如果第一个表达式1的值为真，则返回表达式1

如果第一个表达式1的值为假，则返回表达式2

赋值运算符

=、+=、-=、*=、/=、%=

优先级

还有一个注意的点是，一元运算符里面的逻辑非优先级最高