1、尚硅谷-JavaScript基础-李立超-基础语法

最新推荐文章于 2023-08-13 13:23:39 发布

geekmice

最新推荐文章于 2023-08-13 13:23:39 发布

阅读量702

点赞数 1

分类专栏： # js入门文章标签： javascript html5 rust

本文链接：https://blog.csdn.net/greek7777/article/details/119999631

版权

js入门专栏收录该内容

5 篇文章 3 订阅

订阅专栏

1、JavaScript简介

1.1、什么是语言

计算机就是一个由人来控制的机器,人让它干嘛,它就得干嘛。我们要学习的语言就是人和计算机交流的工具,人类通过语言来控制、操作计算机。
编程语言和我们说的中文、英文本质上没有区别,只是语法比较特殊。
语言的发展:
纸带机:机器语言
汇编语言:符号语言
现代语言:高级语言

1.2、起源

JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证。
所谓的前端验证,就是指检查用户输入的内容是否符合-一定的规则
比如:用户名的长度,密码的长度,邮箱的格式等。

1.3、简史

javascript是由网景公司发明,起初命名为 LiveScript,后来由于SUN公司的介入更名为了javascript
1996年微软公司在其最新的IE3浏览器中引入了自己对javascript的实现 JScript
于是在市面上存在两个版本的 JavaScript,一个网景公司的javascript和微软的 Script
为了确保不同的浏览器上运行的 JavaScrip标准一致,所以几个公司共同定制了S的标准名命名为 ECMAScript

1.4、时间表

在这里插入图片描述

1.5、实现

ECMAScript是一个标准,而这个标准需要由各个厂商去实现
不同的浏览器厂商对该标准会有不同的实现

1.6、学习内容

我们已经知道 ECMAScript是 JavaScript标准,所以一般情况下
这两个词我们认为是一个意思；但是实际上 Javascript的含义却要更大一些
一个完整的 JavaScript实现应该由以下三个部分构成
我们已经知道了一个完整的 Javascript实现包含了三个部分 ECMAScript、DOM和BOM
由此我们也知道了我们所要学习的内容就是这三部分。
- ECMAScript
- DOM
- BOM

1.7、特点

解释型语
类似于C和Java的语法结构
动态语言
基于原型的面向对象

1.71、解释型语言

JavaScript是一门解释型语言,所谓解释型值语言不需要被编译为机器码在执行,而是直接执行。
由于少了编译这一步骤,所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。
不过解释型语言中使用了JIT技术,使得运行速度得以改善。

1.72、类似于c和java语法结构

javascript语法结构和C,java很像，像for,if,while等语句和java的基本上一模一样
javascript和java关系仅仅是看起来像而已

1.73、动态语言

JavaScript是一门动态语言,所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量,这一时刻是个整型,下一时刻可能会变成字符串了。当然这个问题我们以后再谈。
不过在补充一句动态语言相比静态语言性能上要差一些,不过由于 JavaScript中应用的技术,所以S可能是运行速度最快的动态语言了

1.74、基于原型的面向对象

面向对象
java也是面向对象，不同的是 js 基于原型的面向对象

2、JavaScript基本语法

2.1、编写位置

我们目前学习的js全都是客户端的丿S,也就是说全都是需要在浏览器中运行的,所以我们我们的JS代码全都需要在网页中编
我们的S代码需要编写到< script>标签中。
我们一般将 script标签写到head中。(和stye标签有点像)
属性
- type:默认值text/javascript可以不写，不写也是这个值
- src：当需要引入一个外部的js文件时，使用该属性指向文件的地址。
  案例说明

HelloWorld.html

<!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>
</head>

<body>
    <!-- js代码需要写在script标签中 -->
    <script src="./a.js"></script>
    <script type="text/javascript">
        // 浏览器窗口弹出警告框
        alert("你真可爱哟！")

        // 浏览器显示
        document.write('你真可爱')
        // 控制台显示

        console.log('您真可爱')
    </script>
</body>

</html>

a.js

	alert('这是外部js文件')

效果图

2.2、严格区分大小写

Javascript是严格区分大小写的,也就是abc和Abc会被解析器认为是两个不同的东西。
所以在编写上边的 Helloworld时,一定要注意区分大小写。

2.3、注释

注释中的内容不会被解析器解析执行,但是会在源码中显示,我们一般会使用注释对程序中的内容进行解释。
JS中的注释和Java的的一致,分为两种

// 单行注释
/**
  * 多行注释
  **/

2.4、标识符

所谓标识符，就是指遍历、函数、属性的名字，或者函数的参数
标识符可以按照一下格式组合一个或者多个字符
- 第一个字符必须是字母，下划线_，美元符号($)
- 其他字符可以使字母，下划线，美元符号，数字
- 按照惯例ECMAScript标识符采用驼峰命名法
- 但是注意的是 js标识符不能是关键字和保留字

2.5、关键字和保留字

在这里插入图片描述

2.6、变量

变量作用就是给某个值或者对象标注名称
比如我们程序中有一个值123，这个值我们是需要反复使用，这个时候最好定义变量

变量声明
- 使用var关键字声明一个变量
- var a;
变量赋值
- a= 123;
声明和赋值同时进行
var a = 123;

2.7、数据类型

数据类型决定了一个数据的特征,比如:123和123″,直观上看这两数据都是123,但实际上前者是一个数字,而后者是一个字符串。
对于不同的数据类型我们在进行操作时会有很大的不同。
Javascript中一共有5种基本数据类型

字符串型( String)
数值型( Number)
布尔型( Boolean)
null型(Null)
undefined(Undefined)
这5种之外的类型都称为 Object,所以总的来看 JavaScript中共有六种数
据类型。
案例说明

<!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>
</head>
<body>
    <script >
        var str = 'hello';
			
			str = '我说:"今天天气真不错！"';
			
			/*
			 	在字符串中我们可以使用\作为转义字符，
			 		当表示一些特殊符号时可以使用\进行转义
			 		
			 		\" 表示 "
			 		\' 表示 '
			 		\n 表示换行
			 		\t 制表符
			 		\\ 表示\
			 * */
			str = "我说:\"今天\t天气真不错！\"";
			
			str = "\\\\\\";
			
			//输出字面量 字符串str
			//alert("str");
			
			//输出变量str
			//alert(str);
			
			var str2 = "hello";
			
			str2 = "你好";
			
			str2 = 3;
    </script>
</body>
</html>

2.8、typeof运算符

使用typeof操作符可以检查一个变量的数据类型
使用方式：typeof 数据例如：typeof 123
返回结果

typeof 数值 number
typeof 字符串 string
typeof 布尔类型 boolean
typeof undefined undefined
typeof null object

在这里插入图片描述

2.9、String

String用于表示一个字符序列，即字符串
字符串需要使用’'或者""括起来
转义字符

将其他树脂转换为字符串有三种方式：toString(),String(),拼串

<!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>
</head>

<body>
    <script>
        /**
         * 强制类型转换
         * - 指的是将一个数据类型强制转换为其他数据类型
         * - 类型转换主要指的是，将其他的数据类型，转换为String, Number Boolean
         **/
        /**
         * 将其他的数据类型转换String
         * 方式一
         *      - 调用被转换数据类型的toString()方法
         *      - 该方法不会影响到原变量，它会将转换的值返回
         *      - 但是注释：null和undefined这两个值没有toString()方法
         * 如果调用它们的方法，会报错
         * 方式二
         * - 调用String()方法，并将悲壮的数据作为参数传递给函数
         * - 使用Strig()函数做强制类型转换
         * 对于Number和Boolean实际上就是调用的toString()方法
         * 但是对于null和undefined,就不会调用toString()方法
         * 它会将null直接转换为"null",将undefined直接转换为"undefined" 
        */
        // 使用toString()转换
        // Number类型转换字符串
        var a = 123;
        a = a.toString();

        // Boolean类型转换字符串
        a = true
        a = a.toString();

        // null类型 
        // a = null;
        // a = a.toString();
        // Uncaught TypeError: Cannot read property 'toString' of null

        // undefined转换字符串
        // a=undefined;
        // a=a.toString()
        // 报错 03-强制类型装.html:47 Uncaught TypeError: Cannot read property 'toString' of undefined

        // String(a) 转换
        a = String(a);

        a = null;
        a = String(a)

        a = undefined;
        a = String(a)

        console.log(a);
        console.log(typeof a);

    </script>
</body>

</html>

2.10、Number

Number类型用来表示证书和浮点数，最常用的功能就是用来表示10进制的整数和浮点数
Number表示的数字大小是有限的，范围是：
NaN，非数值，是一个特殊的数值，js中当对数值进行计算时候没有结果返回，即返回NaN

案例说明


			/*
			 * 在JS中所有的数值都是Number类型，
			 * 	包括整数和浮点数（小数）
			 * 
			 * JS中可以表示的数字的最大值
			 * 	Number.MAX_VALUE
			 * 		1.7976931348623157e+308
			 * 
			 * 	Number.MIN_VALUE 大于0的最小值
			 * 		5e-324
			 * 
			 *  如果使用Number表示的数字超过了最大值，则会返回一个
			 * 		Infinity 表示正无穷
			 * 		-Infinity 表示负无穷
			 * 		使用typeof检查Infinity也会返回number
			 *  NaN 是一个特殊的数字，表示Not A Number
			 * 		使用typeof检查一个NaN也会返回number
			 */
			//数字123
			var a = 123;
			//字符串123
			var b = "123";
			/*
			 	可以使用一个运算符 typeof
			 		来检查一个变量的类型
			 	语法：typeof 变量	
			 	检查字符串时，会返回string
			 	检查数值时，会返回number
			 * */
			//console.log(typeof b);
			
			a = -Number.MAX_VALUE * Number.MAX_VALUE;
			
			a = "abc" * "bcd";
			
			a = NaN;
			
			//console.log(typeof a);
			
			a = Number.MIN_VALUE;
			
			//console.log(a);
			
			/*
			 * 在JS中整数的运算基本可以保证精确
			 */
			var c = 1865789 + 7654321;
			
			/*
			 * 如果使用JS进行浮点运算，可能得到一个不精确的结果
			 * 	所以千万不要使用JS进行对精确度要求比较高的运算	
			 */
			var c = 0.1 + 0.2;
			
			console.log(c);

在这里插入图片描述

2.11、数值的转换

三个函数将非数值转换数值：Number(),parseInt(),parseFloat()
Number()可以用来转换任意类型的数据，而后者只能用于转换字符串
parseInt()只会将字符串转换为整数，而parseFloat()可以将其转换浮点数

demo实现

<!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>
</head>

<body>
    <script>
        /**
         * 将其他的数据类型转换为Number
         *   转换方式一：
         *     使用Number()函数
         *       字符串-》数字
         *          1、纯数字的字符串，则直接将其转换数字
         *          2、如果字符串中有非数字的内容，则转换为NaN
         *          3、如果字符串是一个空串或者是一个个空格的字符串，转换为0
         *       布尔值->数字
         *          true-》1
         *          false-》0
         *       null->数字 0
         *       undefined -》 数字 NaN
         *   转换方式二：
         *   这种方式专门用来对付字符串
         *      -parseInt() 将一个字符串转换为整数
         *      -parseFloat() 将字符串转换为浮点数
         */
        var a = "123"
        a = Number(a) // 123

        a = false;
        a = Number(a) // 0

        a = null;
        a = Number(a) // 0

        a = undefined;
        a = Number(a) // NaN

        a = "132423sdpx";
        a = parseInt(a) // 132423

        a = "32749lj2.923px";
        a = parseFloat(a) // 32749

        a = 234.234;
        a = parseInt(a); // 234
        document.writeln(typeof a)
        document.writeln(a)
    </script>
</body>

</html>

在这里插入图片描述

2.12、Boolean(布尔类型)

布尔类型也成为逻辑值类型或者真假值类型
布尔类型只能够取真和假两种数值，除此之外其他值不支持
其他的数据类型也可以通过Boolean()函数转换布尔类型
转换规则

demo实现

<!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>
</head>

<body>
    <script>
        /**
         * Boolean 布尔值
         * 布尔值只有两个，主要用来逻辑判断
         * true
         *  表示真
         * false
         *  表示假
         * 使用typeof检查一个布尔值时候，会返回boolean
         */
        var bool = false;
        document.writeln(bool)
        document.writeln(typeof bool)
    </script>
</body>

</html>

2.13、Undefined

Undefined类型只有一个值，即额数的undefined
在使用var声明变量但未对齐加以初始化时候，这个变量就是undefined

var message;
message 就是undefined

需要注意的是typeof对没有初始化和没有声明的变量都是undefined

demo实现

<!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>
</head>

<body>
    <script>
        /**
         * null空值 类型的值 只有一个，就是null
         * null这个值专门来表示一个空的对象，
         * 使用typeof检查一个null值时候，会返回object
         * 
         * Undefined(未定义) 类型的值 只有一个，就是undefined
         * 当声明一个变量，但是并不给变量赋值时候，它的值就是undefined
         * 使用typeof检查一个undefined时候也会返回 undefined
         */
        var a = null;

        var b = undefined;

        document.writeln(a);
        document.writeln(typeof a); 
        document.writeln(b);
        document.writeln(typeof b);
    </script>
</body>

</html>

在这里插入图片描述

2.14、Null

null类型是第二个只有一个值的数据类型，这个特殊的值是null
从语法看null表示的是一个空的对象，所以使用typeof检查 null会返回一个object
undefined值实际由null值衍生出来，所以如果比较undefined和null是否相等，返回true

2.15、运算符

js中为我们定义了一套对数据进行运算的运算符
这其中包括：算数运算符，位运算符，关系运算符

算数运算符
算数运算符顾名思义就是进行算数操作的运算符。
js多种运算符
在这里插入图片描述

demo实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 运算符也叫操作符
			 * 	通过运算符可以对一个或多个值进行运算,并获取运算结果
			 * 	比如：typeof就是运算符，可以来获得一个值的类型
			 * 		它会将该值的类型以字符串的形式返回
			 * 		number string boolean undefined object
			 * 
			 * 	算数运算符
			 * 		当对非Number类型的值进行运算时，会将这些值转换为Number然后在运算
			 * 			任何值和NaN做运算都得NaN
			 * 
			 * 		+
			 * 			+可以对两个值进行加法运算，并将结果返回
			 * 			 如果对两个字符串进行加法运算，则会做拼串
			 * 				会将两个字符串拼接为一个字符串，并返回
			 * 			任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作
			 * 		-
			 * 			- 可以对两个值进行减法运算，并将结果返回
			 * 
			 * 		*
			 * 			* 可以对两个值进行乘法运算
			 * 		/
			 * 			/ 可以对两个值进行除法运算
			 * 		%
			 * 			% 取模运算（取余数）
			 */
			var a = 123;
			
			var result = typeof a;
			
			//console.log(typeof result);
			
			result = a + 1;
			
			result = 456 + 789;
			
			result = true + 1;
			
			result = true + false;
			
			result = 2 + null;
			
			result = 2 + NaN;
			
			result = "你好" + "大帅哥";
			
			var str = "锄禾日当午，" +
					  "汗滴禾下土，" +
					  "谁知盘中餐，" +
					  "粒粒皆辛苦";
					  
					  
			result = 123 + "1";
			
			result = true + "hello";
			
			//任何值和字符串相加都会转换为字符串，并做拼串操作
			/*
			 * 我们可以利用这一特点，来将一个任意的数据类型转换为String
			 * 	我们只需要为任意的数据类型 + 一个 "" 即可将其转换为String
			 * 	这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()函数
			 */
			var c = 123;
			
			c = c + "";
			
			//c = null;
			
			//c = c + "";
			
			
			//console.log(result);
			//console.log(typeof c);
			//console.log("c = "+c);
			
			result = 1 + 2 + "3"; //33
			
			result = "1" + 2 + 3; //123
			
			result = 100 - 5;
			
			result = 100 - true;
			
			result = 100 - "1";
			
			result = 2 * 2;
			
			result = 2 * "8";
			
			result = 2 * undefined;
			
			result = 2 * null;
			
			result = 4 / 2;
			
			result = 3 / 2;
			
			/*
			 * 任何值做- * /运算时都会自动转换为Number
			 * 	我们可以利用这一特点做隐式的类型转换
			 * 		可以通过为一个值 -0 *1 /1来将其转换为Number
			 * 		原理和Number()函数一样，使用起来更加简单
			 */
			
			var d = "123";
			
			//console.log("result = "+result);
			
			d = d - 0;
			
			/*console.log(typeof d);
			console.log(d);*/
			
			result = 9 % 3;
			result = 9 % 4;
			result = 9 % 5;
			
			console.log("result = "+result);
			
		</script>
	</head>
	<body>
	</body>
</html>

一元运算符

<!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>
</head>

<body>
    <script>
        /* 
          一元运算符 只需要一个操作数
          + 正号
            - 正号不会对数字产生影响  
          - 负号
            - 负号可以对数字获取相反数

          - 对于非数字类型值
            它会先将其转换Number,然后再运算
            可以对一个其他的数据类型使用+，将其转换number
            它的原理和Number()一样
         */

        var a = 123;

        document.writeln("a=");
        document.writeln(a); // 123

        a = -a;
        document.writeln("(a = -a) = ");
        document.writeln(a); // -123

        a = true;
        document.writeln("a = ");
        document.writeln(a); // true

        a = "18";
        document.writeln("a = ");
        document.writeln(a); // 18

        a = +a;
        document.writeln("(a = +a) = ");
        document.writeln(a);

        a = 1 + "2" + 3;
        document.writeln("a = ");
        document.writeln(a);

    </script>
</body>

</html>

自增和自减

自增和自减分为前置运算和后置运算
所谓的前置元素就是将元素符号放在变量前边，而后置运算将元素放在运算符后边

例子说明

前置自增：++a
后置自减：a–
运算符在前置时候，表达式值等于变量原值
运算符后置时候，表达式等于变量变更以后的值

demo实现

<!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>
</head>

<body>
    <script>
        /* 
          自增 ++ 
            - 通过自增可以使得变量在自身的基础上加1
            - 对于一个变量自增以后，原变量值立即自增1
            - 自增分为两种 后++(a++) 前++(++a)
              - 无论是a++或者++a，都会使得原变量加一
              - 不同的是 a++ 和 ++a 值不同
              a++ 获取变化前值
              ++a 等于新值
          自减 --
            - 通过自减可以使得变量在自身的基础上减一
            - 自减分为两种，后--(a--) 前--(--a)
              - 无论是 a-- 还是 --a 都会使得原变量值减一
              不同的是 a-- 和 --a不同值
              a-- 原值 自减前的值
              --a 变化值 自减后的值
         */
        var num = 10;
        num--;
        num++;
        // --num;
        document.writeln("num-- num++");
        document.writeln(num); // 10


        var result = num++ + ++num + num-- + num;
        document.writeln("num++ ++num num-- num")
        document.writeln(result);

    </script>
</body>

</html>

逻辑运算符

一般情况使用逻辑运算符会返回一个布尔值
逻辑运算符主要有三个：与或非
在进行逻辑操作时候如果操作数不是布尔类型则会将其转换
布尔类型在进行计算
非！与 && 或 ||

非

非运算符使用！表示
非运算符可以应用于任意值，无论值是什么类型，运算符都会返回一个布尔值
非运算符会对原值取反，比如原值是true,取反之后变为false

与

与运算符使用&& 表示
与运算符可以应用于任何数据类型，且不一定返回布尔值
对于非布尔值运算，会先将非布尔值转换布尔值
对于布尔值运算时候，如果两个值都是true返回true,否则返回false
非布尔值如果两个值都是true,返回第二个值，如果两个值有false则返回靠前的false的值

或

或运算符使用||表示
或运算符可以应用于任何数据类型，且不一定返回布尔值
对于非布尔值运算，会先将费不止转换布尔值
对于布尔值进行运算时候，如果两个值都是false则返回false，否则返回true
非布尔值时：如果两个值都是false,则返回第二个值，否则返回靠前true的值

demo 实现

<!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>
</head>

<body>
    <script>
        /* 
          js中为我们提供了三种逻辑运算符
          ！ 非
            - ! 可以用来对一个值进行非运算
            - 所谓非运算 就是对一个布尔值进行取反操作
              - true-》false,false-》true
            - 如果对一个值进行两次取反，它将不会变化
            - 如果对非布尔值操作元素，则会将其转换为布尔值，然后取反
            - 所以我们可以利用这一点，来将一个其他的数据类型转换为布尔值，
            - 可以为任意一个数据类型取两次反，来将其转换为布尔值
            - 原理和Boolean()一样
          && 与
            - && 可以对符号两侧的值进行与运算并返回结果
            - 运算规则
              - 两个值中只要有一个值为false就返回false,只有两个值都是true,才会返回true
              - js中 与  属于短路与
                如果第一个值为false,则不会看第二个值
          || 或
            - || 可以对符号两侧的值进行或运算并返回结果
            - 运算规则
              - 两个值中只要一个true,就返回true,如果两个值中都为false,才返回false
              - js中 或 属于 短路或
                如果第一个值为true,则不会检查第二个值
        */

        var result = true && true;

        document.writeln("true && true = ");
        document.writeln(result)

        result = false && true;
        document.writeln("false || true = ");
        document.writeln(result)

        result = true || false;
        document.writeln("true || false = ");
        document.writeln(result)

        result = !result;
        document.writeln("result = ");
        document.writeln(result);

        var b = 10;
        b = !!b;
        document.writeln("b = !!b = ");
        document.writeln(b);
    </script>
</body>

</html>

对于或运算一真全为真
对于与运算一假都为假

<!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>
</head>

<body>
    <script>
        /* 
          && || 对于非布尔值情况
          - 对于非布尔值进行与或运算时候
          会先将其转换为布尔值，然后将运算，并且返回原值

          与运算
            如果第一个值true,必然返回第二个值
            如果第一个值为false,直接返回第一个值

          或运算
            如果第一个值为true,直接返回第一个值
            如果第一个值为false,直接返回第二个值
        */
        // true && true 只要一个为假  都为假
        // 与运算 如果两个值都是true 直接返回后边
        var result = 5 && 6;
        document.writeln("result = ");
        document.writeln(result); // 6

        // 与运算 如果两个值有false,返回靠前的false
        result = 0 && 2;
        document.writeln("0 && 2 = ");
        document.writeln(result) // 0

        result = 2 && 0;
        document.writeln("2 && 0 = ");
        document.writeln(result) // 0

        // 或运算 只要一个为真 都为真
        result = 2 || 0;
        document.writeln("2 || 0 = ");
        document.writeln(result); // 2


        result = 0 || 2;
        document.writeln("0 || 2 = ");
        document.writeln(result); // 2

        result = 0 || 0;
        document.writeln("0 || 0 = ");
        document.writeln(result) // 0

    </script>
</body>

</html>

赋值运算符

简单赋值操作符由等于号(=)表示
其作用就是将右侧的值赋给左边的变量
如果在等于号左边添加加减乘除的运算符就可以完成复合赋值操作
+=，*=，/=,%/
比如 a+=10;a=a+10一样

demo实现

<!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>
</head>

<body>
    <script>
        /* 
          将变量右侧的值赋给左侧
          +=
            a+=10=>a = a + 10
          -=
            a -= 10 => a = a - 10
          *=
            a *= 10 => a = a * 10
          /=
            a /= 10 => a = a / 10
          %=
            a %= 10 => a = a % 10
        */
        var a = 10;
        a += 3;


        document.writeln("a += 3 = ");
        document.writeln(a); // 13

        a -= 3;
        document.writeln("a -= 3 = ");
        document.writeln(a) // 10

        a *= 3;
        document.writeln("a *= 3 = ");
        document.writeln(a) // 30

        a /= 3;
        document.writeln("a /= 3 = ");
        document.writeln(a) // 10

        a %= 3;
        document.writeln("a %= 3 = ");
        document.writeln(a) // 1

    </script>
</body>

</html>

关系运算符

小于（<）,大于(>),小于等于(<=)和大于等于(>=)这几个关系运算符用于对两个值进行比较，比较的规则与我们在数学课所学的内容一样
这几个运算符都返回一个布尔值，用来表示两个值之间的关系是否成立
5 > 10 false
5 < 1 false
5 >3 true
4 <= 10 true
相等
js中使用==来判断两个值是否相等，如果相等就返回true
使用!= 来表示两个值是否不相等，如果不等就返回true
注意：null和undefined使用 == 判断时是相等的

demo实现

<!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>
</head>

<body>
    <script>
        /* 
          通过关系运算符可以比较两个值之间的大小关系
          如果关系成立它会返回true,如果不成立返回false

          > 大于
          < 小于
          >= 大于等于
          <= 小于等于

          非数值情况下
            将其转换为数字然后再比较，如果符号两侧的值都是字符时候，不会将其转换数字进行比较，而会比较unicode编码
        */
        var result = 0;
        result = 5 > 10;
        document.writeln("(5 > 10) = ");
        document.writeln(result)


        result = 6 < 10;
        document.writeln("(6<10) = ");
        document.writeln(result);

        result = 30 >= 4;
        document.writeln("(30 >= 4) = ");
        document.writeln(result);

        result = 30 <= 4;
        document.writeln("(30 <= 4) = ");
        document.writeln(result);

    </script>
</body>

</html>

全等

处理使用""以外，js中还提供了 "="
=== 表示全等，它和== 基本一致，不管在判断两个值时会进行自动的类型转换，而===不会
也就是说 “44” == 44 返回true,而 “33” ===33会返回false
同样我们还有!== 表示不全等，同样比较时候不会自动转型
也就是说 “33” != 33 会返回false,而"33" !== 33 会返回true

demo实现

<!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>
</head>

<body>
    <script>
        /* 
          相等运算符用来比较两个值是否相等
          如果相等返回true,否则返回false

          使用==来做相等运算
          当进行比较时候，如果类型不同，则会  自动类型转换，将其转换为相同的类型 然后再比较

          != 用来比较两个值是否不相等 不相等也会进行自动类型转换，如果转换之后相等
          也会返回false

          === 全等
            判断两个值是否相等，它和相等类似，不同的是 不会做自动类型转换，如果两个值类型不一致 直接返回false

          ！== 不全等
            判断两个值是否不相等，和不等类似，不同的是它不会自动类型转换 如果两个值类型不同  直接返回true
        */

        var a = 10;
        a = a == 10;
        document.writeln("(a == 10) = ");
        document.writeln(a); // true

        a = a != 3;
        document.writeln("(a != 3) = ");
        document.writeln(a); // true

        a = a === '10';
        document.writeln(" (a === '10') = ");
        document.writeln(a); // false

        a = a !== 10;
        document.writeln(" (a !== 10) = ");
        document.writeln(a); // true
    </script>
</body>

</html>

逗号

使用逗号可以在一条语句中多次执行操作
比如var num1 = 1,num2 =2 , num3 = 3 ;
使用逗号运算符分割的语句分从左到右顺序依次执行

条件运算符

条件运算符也称为三元运算符，通常运算符写为?:
这个运算符需要三个操作数，第一个操作数在?之前，第二个操作数在?和:之间，第三个操作数在:之后
比如： x>0 ? x : -x ; // 求x的绝对值

demo实现

<!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>
</head>

<body>
    <script>
        /* 
          条件运算符 又称为 三目运算符
          语法： 条件表达式 ？ 语句1：语句2；
          执行流程
            如果条件表达式为真时，运算语句1，结果返回
            如果条件表达式为假时，运算语句2，结果返回
        */

        // 计算abc最大值
        var a = 10, b = 3, c = 2;

        var max = a > b ? a : b;
        max = max > c ? max : c;
        document.writeln("max=");
        document.writeln(max);
    </script>
</body>

</html>

上面的例子，首先会执行x>0,如果返回true,将x原值返回否则将x相反数返回
运算符的优先级

语句

之前所说的表达式和运算等内容可以理解我们一门语言中的单词，短语
而语句就是我们语言中一句一句完整的话了
语句就是一个程序的基本单位，js的程序就是由一条一条语句构成的，每一条语句使用；结尾
js中语句默认从上到下顺序执行的，但是我们也可以通过流程语句控制语句执行顺

代码块

代码块是在大括号{}所写的内容，以此将多条语句的集合视为一条居于来使用
例如
{
var a = 123 ;
a++;
alert(a);
}
我们一般使用代码块需要一起执行的语句进行分组，需要注意的是，代码块结尾不需要加分号

<!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>
</head>

<body>
    <script>
        /* 
          我们的程序是由一条一条的语句构成的
          语句是按照自上向下的顺序一条一条的执行的
          在js中 可以使用{} 为语句进行分组
          同一个{}的语句我们称为一组语句，它们要么都执行 要么都不执行

          一个{}  的语句我们也称为代码块 代码块后面不需要编写；

          js中的代码块，只具有分组的作用，没有其他的用途  代码块内容的内容 外部完全可见
        */

        {

            var a = 10;
            document.writeln("a=");
            document.writeln(a);
        }
    </script>
</body>

</html>

条件语句

条件语句是通过判断指定表达式值来判定执行还是跳过某些语句
最基本的条件语句
- if … else
- switch case

<!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>
</head>

<body>
    <script>
        /* 
          流程控制语句
            js是从上到下一行一行执行的
            通过流程控制语句可以控制程序执行流程使得程序可以按照一定的条件来选择执行

            语句的分类
              1.条件判断语句
              2.条件分支语句
              3.循环语句

          条件判断语句
            - 使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则语句不执行
            if语句
            语法1
              if(条件表达式){
                  语句。。。
              }
            if语句在执行时，会先对条件表达式进行求值判断，
            如果条件表达式的值为true，则执行if后的语句，
            如果条件表达式的值为false，则不会执行if后的语句。
            if语句只能控制紧随其后的那个语句,
            如果希望if语句可以控制多条语句，
            可以将这些语句统一放到代码块中
            if语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句
        */
        var a = 25;
        if (a > 10 && a <= 40) {
            document.writeln("a大于10，并且a小于等于20");
        }
    </script>
</body>

</html>

if…else…语句
if…else 是最基本的控制语句，它让JavaScript有条件的执行
第一种
if(expression) statement
第二种
if(expression)
statement
esle
statement
除了使用if和else还可以使用else if来创建elseif多分支

案例1

if(age >= 18){
  alert('别打我');
}else{
  alert('打我呀');
}

案例2

if(age >18){
  alert('打我呀');
}

案例3

if(age < 18){
  alert('来甘喔喔');
}else if( age <= 30){
  alert('www');
}else{
  alert('啦啦啦');
}

<!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>
</head>

<body>
    <script>
        /*
             * if语句
             * 	语法二:
             * 		if(条件表达式){
             * 			语句...
             * 		}else{
             * 			语句...
             * 		}
             * 
             * 	if...else...语句
             * 		当该语句执行时，会先对if后的条件表达式进行求值判断，
             * 			如果该值为true，则执行if后的语句
             * 			如果该值为false，则执行else后的语句
             * 
             * 	语法三：
             * 		if(条件表达式){
             * 			语句...
             * 		}else if(条件表达式){
             * 			语句...
             * 		}else if(条件表达式){
             * 			语句...
             * 		}else{
             * 			语句...
             * 		}
             * 
             * 		if...else if...else
             * 			当该语句执行时，会从上到下依次对条件表达式进行求值判断
             * 			如果值为true，则执行当前语句。
             * 			如果值为false，则继续向下判断。
             * 			如果所有的条件都不满足，则执行最后一个else后的语句
             * 			该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句
             */

        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>
</body>

</html>

switch case 语句

switch…case是另一种流程控制语句
switch语句更适用于多条分支使用同一条语句的情况
语法

switch(语句){
  case 表达式1 :
    语句;
  case 表达式2:
    语句;
  ...
  default :
    语句;
}

需要注意就是case语句知识表示的程序运行的起点，并不是终点，所以一旦符合case的条件程序会一直运行到结束，所以我们一般会在case中添加break作为语句的结束

<!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的值，输出对应的中文
			
			var num = 3;
			
			/*if(num == 1){
				console.log("壹");
			}else if(num == 2){
				console.log("贰");
			}else if(num == 3){
				console.log("叁");
			}*/
			
			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>

循环语句

和条件语句一样，循环语句也是基本的控制语句
循环中的语句只要满足一定的条件将会执行

while语句

while是一个最基本的循环的语句
while语句也称为while循环
语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			
			/*
			 * 向页面中输出连续的数字
			 */
			/*var n = 1;
			document.write(n++ +"<br />");*/
			
			/*
			 * 循环语句：
			 * 	通过循环语句可以反复的执行一段代码多次
			 * 
			 * 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++);
				
				//判断n是否是10
				if(n == 10){
					//退出循环
					break;
				}
				
			}*/
			
			//创建一个循环，往往需要三个步骤
			
			//1.创初始化一个变量
			var i = 11;
			
			//2.在循环中设置一个条件表达式
			/*while(i <= 10){
				//3.定义一个更新表达式，每次更新初始化变量
				document.write(i++ +"<br />")
				
			}*/
			
			/*do{
				document.write(i++ +"<br />");
			}while(i <= 10);*/
			
			/*while(true){
				alert(1);
			}*/
			
		</script>
	</head>
	<body>
	</body>
</html>

while(条件表达式){
  语句;
}

和if一样 while总的表达式将会被转换布尔类型，只要该值为真，点开一直重复执行
代码块每执行一次，条件表达式将会重新计算

do…while语句

do…while和while非常相思，只不过它会在循环的尾部而不是顶部检查表达式的值
do…while循环至少执行一次
语法

do{
  语句；
}while(条件表达式)

相比于 while,do…while的使用情况并不是很多

for语句

for语句也是循环控制语句，我们也称为for循环
大部分循环都会有一个计数器用以控制循环执行的次数计数器的三个关键曹锁是初始化，检测和更新，for语句这三个步骤明确为了语法的一部分
语法

for(初始化表达式;条件表达式;更新表达式){
  语句...
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 打印1-100之间所有奇数之和
			 */
			
			//创建一个变量，用来保存奇数之和
			//var sum = 0;
			
			//打印1-100之间的数
			for(var i=1 , sum=0 ; i<=100 ; i++){
				
				//判断i是否是奇数
				//不能被2整除的数就是奇数
				if(i%2 != 0){
					//如果i除以2有余数则证明i是奇数
					//console.log(i);
					sum = sum+i;
				}
			}
			
			console.log("奇数之和为 : "+sum);
			
		</script>
	</head>
	<body>
	</body>
</html>

break,continue语句

break和continue语句在循环中精确控制代码的执行
使用break语句会使得程序立刻退出最近的循环，强制执行循环后的语句break和continue语句只会在循环和switch语句中执行
使用continue语句使得程序跳过档次循环，继续执行下一次循环，并不会结束整个循环
continue 只能在循环中使用不能出现在其他结构中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 水仙花数是指一个3位数，它的每个位上的数字的3 次幂之和等于它本身。
				（例如：1^3 + 5^3 + 3^3 = 153）,请打印所有的水仙花数。
			 */
			
			//打印所有的三位数
			for(var i=100 ; i<1000 ; i++){
				
				//获取i的百位 十位 个位的数字
				//获取百位数字
				var bai = parseInt(i/100);
				
				//获取十位的数字
				var shi = parseInt((i-bai*100)/10);
				
				//获取个位数字
				var ge = i % 10;
				
				//判断i是否是水仙花数
				if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){
					console.log(i);
				}
				
				
			}
			
			
		</script>
	</head>
	<body>
	</body>
</html>

label

使用label语句可以在代码汇总添加标签，以便将来使用
语法

label：statement

例子：

start : for(var i = 0 ; i < 10 ; i ++ ) {
  alert(i);
  }

这个例子中定义的start标签可要i在将来由 break或者continue语句引用，加标签的语句一般都要和for语句循环语句配合使用

3、JavaScript对象

4、DOM对象

5、事件

6、BOM对象

geekmice

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
1、尚硅谷-JavaScript基础-李立超-基础语法

文章目录1、JavaScript简介1.1、什么是语言1.2、起源1.3、简史1.4、时间表1.5、实现1.6、学习内容1.7、特点1.71、解释型语言1.72、类似于c和java语法结构1.73、动态语言1.74、基于原型的面向对象2、JavaScript基本语法2.1、编写位置2.2、严格区分大小写2.3、注释2.4、标识符2.5、关键字和保留字2.6、变量2.7、数据类型2.8、typeof运算符2.9、String2.10、Number2.11、数值的转换2.12、Boolean(布尔类型)2.13
复制链接

扫一扫