学习来源:尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版
我们已经知道ECMAScript是JavaScript标准,所以一般情况下这两个词我们认为是一个意思。但是实际上JavaScript的含义却要更大一些。
解释型语言
类似于 C 和 Java 的语法结构
动态语言
:可以暂时理解为在语言中一切内容都是不确定的。
基于原型的面向对象
标签中。script
标签写到head
中。(和style标签有点像)type
:默认值text/javascript
可以不写,不写也是这个值。src
:当需要引入一个外部的js文件时,使用该属性指向文件的地址。DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script type="text/javascript">
// 控制浏览器弹出一个警告框
alert("这是我的第一行js代码");
// 让计算机在页面中输出一个内容
document.write("我是js写在body里的输出喔~~")
// 向控制台输出一个内容
console.log("我只会出现在控制台喔!");
script>
head>
<body>
body>
html>
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<button onclick="alert('么么哒(可霸总可不霸总版)')">点我一下button>
<a href="javascript:alert('许沁真是恋爱脑');">你也点我一下a>
body>
html>
<script type="text/javascript">
alert("方法二");
script>
<script type="text/javascript" src="外部的js文件.js">script>
script标签一旦用于引用外部文件,就不能再编写代码(即使编写了浏览器也会忽略)。如下,wuwuwu
是不会出现的。
<script src="a.js">alert("wuwuwu")script>
如果你还需要,则可以再创建一个新的script标签用于编写内部代码。
<script type="text/javascript" src="外部的js文件.js">script>
<script type="text/javascript">
alert("我是内部的js代码");
script>
//注释内容
/*多行注释*/
;
号结尾字面量:不可变。可以直接使用,当我们一般不会直接用。
变量:用var
来声明一个变量。用变量去保存一个字面量。
var num=123;//把字面量赋值给变量
字母
、数字
、_
、$
- 基本数据类型
String
:字符串Number
:数值Boolean
:布尔值Null
:空值Undefined
:未定义- 引用数据类型:
Object
:对象
\"
表示 "\'
表示 ’\n
表示换行\t
制表符\\
表示\Number.MAX_VALUE
,1.7976931348623157e+308Number.MIN_VALUE
:大于0的最小值,5e-324Infinity
表示正无穷-Infinity
表示负无穷typeof
检查Infinity也会返回numberNaN
是一个特殊的数字,表示Not A Number,使用typeof检查一个NaN也会返回number。
typeof
:检查一个变量的类型
true
:表示真false
:表示假Null
(空值)类型的值只有一个,就是null
object
undefined
(未定义)类型的值只有一个,就undefindundefined
方式一:
toString()
方法方式二:
String()
函数,并将被转换的数据作为参数传递给函数DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
var a = 123;
a = a.toString();
var b = null;
b = String(a);
var c = undefined;
console.log(c);
c = String(c);
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(c);
script>
head>
<body>
body>
html>
方式一:使用Number()
函数
方式二:这种方式专门用来对付字符串
parseInt()
把一个字符串转换为一个整数,可以将一个字符串中的有效的整数内容取出来parseFloat()
把一个字符串转换为一个浮点数,和parseInt()类似,不同的是它可以获得有效的小数DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
var a = "123";
console.log(a);
a = Number(a);
console.log(typeof a);
var b = "123px";
b = Number(b);
console.log(b);
var c = false;
c = Number(c);
console.log(c);
var d = null;
d = Number(d);
console.log(d);
var e = undefined;
e = Number(e);
console.log(e);
a = "123567a567px";
a = parseInt(a);
console.log(a);
a = "123.456.789px";
a = parseFloat(a);
console.log(a)
script>
head>
<body>
body>
html>
使用Boolean()
函数
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
var a = 123; //true
a = -123; //true
a = 0; //false
a = Infinity; //true
a = NaN; //false
//调用Boolean()函数来将a转换为布尔值
a = Boolean(a);
// 空串为false
a =""
a = Boolean(a);
console.log(a);
// 空格不是空串
a = " ";
a = Boolean(a);
console.log(a);
a = null;
a = Boolean(a);
console.log(a);
a = undefined;
a = Boolean(a);
console.log(a);
script>
head>
<body>
body>
html>
0x
开头0
开头0b
开头"070"
,有些浏览器会当成8进制解析,有些则会当成10进制解析。parseInt()
时,一般指定进制。DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
var a = 123;
//十六进制
a = 0x10;
a = 0xff;
a = 0xCafe;
//八进制数字
a = 070;
//二进制数字
//a = 0b10;
//向"070"这种字符串,有些浏览器会当成8进制解析,有些会当成10进制解析
a = "070";
//可以在parseInt()中传递一个第二个参数,来指定数字的进制
a = parseInt(a,10);
console.log(typeof a);
console.log(a);
script>
head>
<body>
body>
html>
运算符也叫操作符
- 通过运算符可以对一个或多个值进行运算,并获取运算结果
- 比如:typeof就是运算符,可以来获得一个值的类型,它会将该值的类型以字符串的形式返回
算术运算符:当对非Number类型的值进行运算时,会将这些值转换为Number然后再运算,任何值和NaN做运算都得NaN。
+
可以对两个值进行加法运算,并将结果返回。
-
可以对两个值进行减法运算,并将结果返回。*
可以对两个值进行乘法运算。/
可以对两个值进行除法运算。%
取模运算(取余数)任何值和字符串相加都会转换为字符串,并做拼串操作,我们可以利用这一特点,来将一个任意的数据类型转换为String。
- 我们只需要
为任意的数据类型 + 一个 ""
即可将其转换为String。- 这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String()函数。
任何值做- * /运算时都会自动转换为Number,我们可以利用这一特点做隐式的类型转换。
- 可以通过为一个值
-0 *1 /1
来将其转换为Number。- 原理和Number()函数一样,使用起来更加简单。
一元运算符,只需要一个操作数
+ 正号
:正号不会对数字产生任何影响。- 负号
:负号可以对数字进行负号的取反。DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一元运算符title>
<script>
var a =true;
a =-a;
console.log(a)//-1
var b ="123";
b = +b;
console.log(b);//123
var c =1+ +"2"+3+ +"4";
console.log(c)//10
script>
head>
<body>
body>
html>
&&
与 ||
非布尔值的情况:对于非布尔值进行与或运算时,会对其转换为布尔值,然后再运算,并且返回原值
//false false
//第一个为false了,不用看第二个直接返回第一个
var result = NaN && 0;
console.log(result)
var c =0 && NaN;
console.log(c)
//TRUE FALSE
//第一个是正确的,那么整段逻辑表达式取决于第二个值,所以它会直接返回第二个值
var a =true && false;
console.log(a);
编码;\u
,\代表转义,u指明输出的字符集<h1 style="font-size: 1000px " align="center">☠h1>
var a ="\u2620";//\为转义,u标明输出为unicode字符集
console.log(a);
相等运算符用来比较两个值是否相等,如果相等会返回true,否则返回false
使用==来做相等运算
不相等 !=
全等===
不全等
undefined
衍生自null
,所以这两个值做相等判断时,会返回true。isNaN()
函数。条件表达式?语句1:语句2;
{}
来进行分组,它们要么都执行,要么都不执行。一个{}中的语句,我们称为一个代码块,在代码块后,不需要写;
了。和C一样一样的
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
var age = 50;
/*if(age >= 60){
alert("你已经退休了~~");
}else{
alert("你还没退休~~~");
}*/
age = 200;
/*if(age > 100){
alert("活着挺没意思的~~");
}else if(age > 80){
alert("你也老大不小的了~~");
}else if(age > 60){
alert("你也退休了~~");
}else if(age > 30){
alert("你已经中年了~~");
}else if(age > 17){
alert("你已经成年了");
}else{
alert("你还是个小孩子~~");
}*/
age = 90;
if(age > 17 && age <= 30){
alert("你已经成年了");
}else if(age > 30 && age <= 60){
alert("你已经中年了");
}else if(age > 60 && age <= 80){
alert("你已经退休了");
}else{
alert("你岁数挺大的了~~");
}
script>
head>
<body>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
/*
* 条件分支语句也叫switch语句
* 语法:
* switch(条件表达式){
* case 表达式:
* 语句...
* break;
* case 表达式:
* 语句...
* break;
* default:
* 语句...
* break;
* }
*
* 执行流程:
* switch...case..语句
* 在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较,
* 如果比较结果为true,则从当前case处开始执行代码。
* 当前case后的所有的代码都会执行,我们可以在case的后边跟着一个break关键字,
* 这样可以确保只会执行当前case后的语句,而不会执行其他的case
* 如果比较结果为false,则继续向下比较
* 如果所有的比较结果都为false,则只执行default后的语句
*
* switch语句和if语句的功能实际上有重复的,使用switch可以实现if的功能,
* 同样使用if也可以实现switch的功能,所以我们使用时,可以根据自己的习惯选择。
*/
num = "hello";
switch(num){
case 1:
console.log("壹");
//使用break可以来退出switch语句
break;
case 2:
console.log("贰");
break;
case 3:
console.log("叁");
break;
default:
console.log("非法数字~~");
break;
}
script>
head>
<body>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
/*
* 循环语句:
* 通过循环语句可以反复的执行一段代码多次
*
* while循环
* - 语法:
* while(条件表达式){
* 语句...
* }
*
* - while语句在执行时,
* 先对条件表达式进行求值判断,
* 如果值为true,则执行循环体,
* 循环体执行完毕以后,继续对表达式进行判断
* 如果为true,则继续执行循环体,以此类推
* 如果值为false,则终止循环
*
* do...while循环
* - 语法:
* do{
* 语句...
* }while(条件表达式)
*
* - 执行流程:
* do...while语句在执行时,会先执行循环体,
* 循环体执行完毕以后,在对while后的条件表达式进行判断,
* 如果结果为true,则继续执行循环体,执行完毕继续判断以此类推
* 如果结果为false,则终止循环
*
* 实际上这两个语句功能类似,不同的是while是先判断后执行,
* 而do...while会先执行后判断,
* do...while可以保证循环体至少执行一次,
* 而while不能
*/
var n = 1;
//向这种将条件表达式写死为true的循环,叫做死循环
//该循环不会停止,除非浏览器关闭,死循环在开发中慎用
//可以使用break,来终止循环
/*while(true){
alert(n++);
}*/
//创建一个循环,往往需要三个步骤
//1.创初始化一个变量
var i = 1;
//2.在循环中设置一个条件表达式
while(i <= 10){
//3.定义一个更新表达式,每次更新初始化变量
document.write(i++ +"
")
}
script>
head>
<body>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
/*
* for语句,也是一个循环语句,也称为for循环
* 在for循环中,为我们提供了专门的位置用来放三个表达式:
* 1.初始化表达式
* 2.条件表达式
* 3.更新表达式
*
* for循环的语法:
* for(①初始化表达式;②条件表达式;④更新表达式){
* ③语句...
* }
*
* for循环的执行流程:
* ①执行初始化表达式,初始化变量(初始化表达式只会执行一次)
* ②执行条件表达式,判断是否执行循环。
* 如果为true,则执行循环③
* 如果为false,终止循环
* ④执行更新表达式,更新表达式执行完毕继续重复②
*/
for(var i = 0 ; i < 10 ; i++ ){
alert(i);
}
/*
* for循环中的三个部分都可以省略,也可以写在外部
* 如果在for循环中不写任何的表达式,只写两个;
* 此时循环是一个死循环会一直执行下去,慎用
* for(;;){
alert("hello");
}
*/
script>
head>
<body>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
/*
* break关键字可以用来退出switch或循环语句
* 不能在if语句中使用break和continue
* break关键字,会立即终止离他最近的那个循环语句
*/
for(var i=0 ; i<5 ; i++){
console.log(i);
if(i == 2){
break;
}
}
for(var i=0 ; i<5 ; i++){
console.log("@外层循环"+i)
for(var j=0 ; j<5; j++){
break;
console.log("内层循环:"+j);
}
}
/*
* 可以为循环语句创建一个label,来标识当前的循环
* label:循环语句
* 使用break语句时,可以在break后跟着一个label,
* 这样break将会结束指定的循环,而不是最近的
*/
outer:
for(var i=0 ; i<5 ; i++){
console.log("@外层循环"+i)
for(var j=0 ; j<5; j++){
break outer;
console.log("内层循环:"+j);
}
}
/*
* continue关键字可以用来跳过当次循环
* 同样continue也是默认只会对离他最近的循环循环起作用
*/
for(var i=0 ; i<5 ; i++){
if(i==2){
continue;
}
console.log(i);
}
outer:
for(var i=0 ; i<5 ; i++){
for(var j=0 ; j<5 ; j++){
continue;
console.log("-->"+j);
}
console.log("@--->"+i);
}
script>
head>
<body>
body>
html>