web---JS基础知识

AlluzeYu

已于 2023-08-23 14:55:19 修改

阅读量1.4k

点赞数 1

分类专栏： WEB 文章标签： javascript

于 2021-12-11 13:44:24 首次发布

本文链接：https://blog.csdn.net/allurelover/article/details/121808190

版权

WEB 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

1、js介绍
2、js的入门案例
3、js的基本数据类型
4、js的运算符
5、js的条件、分支、循环语句
6、js的类型转换
7、js函数函数定义
- 7.1 函数声明调用
- 7.2 函数表达式调用

1、js介绍

JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

2、js的入门案例

点击事件：单击、双击、移入
js的位置：行内、内部、外部
alert(); 测试函数，在开发中很少用，在测试中经常用到

js001.html案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试JS的用法</title>
		<script>
			/* 内部js,，网页执行顺序是从上至下的执行	 */
			alert('hello js...')
		</script>
		<!-- 外部js -->
		<script src="./hello.js"></script>
	</head>
	<body>
		<!-- 行内js -->
		<!-- 鼠标单击事件 -->
		<div onclick="alert('欢迎来到div')">我是div1</div>
		<!-- 鼠标双击事件 -->
		<div ondblclick="alert('我是需要双击的div')">我是div2</div>
		<!-- 鼠标移入事件 -->
		<div onmouseenter="alert('鼠标移入即可')">我是div3</div>
		<a onmousedown="alert('111111')">我是a</a>
	</body>
</html>

外部 js 的内容
引入外部js

运行结果

3、js的基本数据类型

JavaScript有以下几种类型：
字符串（String）、
数字(Number)、
布尔(Boolean)、
空（Null）、
未定义（Undefined）
数组(Array)、
对象(Object)

3.1 JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

实例
var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

3.2 JavaScript 字符串

字符串是存储字符（比如 “hello”）的变量
字符串可以是引号中的任意文本。可以使用单引号或双引号

实例
var carname="BMW 730";
var carname='BYD 汉';

实例
var answer="It's ok";
var answer="He is 'Tom'";
var answer='She is "Anny"';

3.3 JavaScript 数字

JavaScript 只有一种数字类型。
数字可以带小数点，也可以不带

实例
var x1=34.00;      // 使用小数点来写
var x2=34.1;
var x3=34;         // 不使用小数点来写

3.4 JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false

实例
var x=true;
var y=false;

3.5 Undefined 和 Null

Undefined 表示变量不含有值
可以通过将变量的值设置为 null 来清空变量

3.6 JavaScript 数组

两种方式，数组下标是基于零的

 var car1=new Array();
 car1[0]="BYD";
 car1[1]="JEEP";
 car1[2]="BMW";

var car2=new Array("BYD","JEEP","BMW");

3.7 JavaScript 对象

对象由花括号分隔。
在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

对象 (person) 有三个属性：firstname、lastname 、id


var person={firstname:"John", lastname:"Doe", id:5566};

 var person={
 firstname : "John",
 lastname  : "Doe",
 id        :  5566
 };

实例---获取js对象的属性值
name=person.lastname;
name=person["lastname"];

4、js的运算符

运算符 = 用于赋值，运算符 = 用于给 JavaScript 变量赋值。
运算符 + 用于加值，算术运算符 + 用于把值加起来

4.1、js的算术运算符

加法：+
减法：-
乘法：*
除法：/
取模：%
自增：++
自减：–

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js的运算符</title>
	</head>
	<body>
		<p>假设 y=5，计算 x=y+2，并显示结果。</p>
		<button onclick="myFunction1()">加法</button>
		<p>设置 y=5, 计算出 x=y-2, 并输出结果。</p>
		<button onclick="myFunction2()">减法</button>
		<p>设置 y=5, 计算出 x=y*2, 并输出结果。</p>
		<button onclick="myFunction3()">乘法</button>
		<p>设置 y=5, 计算 x=y/2, 并输出结果。</p>
		<button onclick="myFunction4()">除法</button>
		<p>设置 y=5, 计算 x=y%2, 并输出结果。</p>
		<button onclick="myFunction5()">取余</button>
		<p>设置 y=5, 计算出 x=y++, 并显示结果。</p>
		<button onclick="myFunction6()">自增</button>
		<p>设置 y=5, 计算出 x=y--, 并显示结果。</p>
		<button onclick="myFunction7()">自减</button>
		<p id="demo1"></p>
		<p id="demo2"></p>
		<p id="demo3"></p>
		<p id="demo4"></p>
		<p id="demo5"></p>
		<p id="demo6"></p>
		<p id="demo7"></p>
		<script>
			function myFunction1()
			{
				var y=5;
				var x=y+2;
				var demoP=document.getElementById("demo1")
				demoP.innerHTML="x=" + x;
			}
			function myFunction2()
			{
				var y=5;
				var x=y-2;
				var demoP=document.getElementById("demo2");
				demoP.innerHTML="x=" + x;
			}
			function myFunction3()
			{
				var y=5;
				var x=y*2;
				var demoP=document.getElementById("demo3")
				demoP.innerHTML="x=" + x;
			}
			function myFunction4()
			{
				var y=5;
				var x=y/2;
				var demoP=document.getElementById("demo4")
				demoP.innerHTML="x=" + x;
			}
			function myFunction5()
			{
				var y=5;
				var x=y%2;
				var demoP=document.getElementById("demo5")
				demoP.innerHTML="x=" + x;
			}
			function myFunction6()
			{
				var y=5;
				var x=y++;
				var demoP=document.getElementById("demo6")
				demoP.innerHTML="x=" + x + ", y=" + y;
			}
			function myFunction7()
			{
				var y=5;
				var x=y--;
				var demoP=document.getElementById("demo7")
				demoP.innerHTML="x=" + x + ", y=" + y;
			}
		</script>
	</body>
</html>

4.2、js的赋值运算符

赋值运算符用于给 JavaScript 变量赋值
=：等于
+=：加等
-=：减等
*=：乘等
/=：除等
%=：余等

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>js的赋值运算符</title> 
	</head>
	<body>
		<p>设置 x=10 和 y=5, 计算 x=y, 并显示结果。</p>
		<button onclick="myFunction1()">赋值</button>
		<p>设置 x=10 和 y=5, 计算 x+=y, 并显示结果。</p>
		<button onclick="myFunction2()">加等</button>
		<p>设置 x=10 和 y=5, 计算 x-=y, 并显示结果。</p>
		<button onclick="myFunction3()">减等</button>
		<p>设置 x=10 和 y=5, 计算 x*=y, 并显示结果。</p>
		<button onclick="myFunction4()">乘等</button>
		<p>设置 x=10 和 y=5, 计算 x/=y, 并显示结果。</p>
		<button onclick="myFunction5()">除等</button>
		<p>设置 x=10 和 y=5, 计算 x%=y, 并显示结果。</p>
		<button onclick="myFunction6()">余等</button>
		<p id="demo1"></p>
		<p id="demo2"></p>
		<p id="demo3"></p>
		<p id="demo4"></p>
		<p id="demo5"></p>
		<p id="demo6"></p>
		<script>
			function myFunction1()
			{
				var x=10;
				var y=5;
				x=y;
				var demoP=document.getElementById("demo1")
				demoP.innerHTML="x=" + x;
			}
			function myFunction2()
			{
				var x=10;
				var y=5;
				x+=y;
				var demoP=document.getElementById("demo2")
				demoP.innerHTML="x=" + x;
			}
			function myFunction3()
			{
				var x=10;
				var y=5;
				x-=y;
				var demoP=document.getElementById("demo3")
				demoP.innerHTML="x=" + x;
			}
			function myFunction4()
			{
				var x=10;
				var y=5;
				x*=y;
				var demoP=document.getElementById("demo4")
				demoP.innerHTML="x=" + x;
			}
			function myFunction5()
			{
				var x=10;
				var y=5;
				x/=y;
				var demoP=document.getElementById("demo5");
				demoP.innerHTML="x=" + x;
			}
			function myFunction6()
			{
				var x=10;
				var y=5;
				x%=y;
				var demoP=document.getElementById("demo6")
				demoP.innerHTML="x=" + x;
			}
		</script>
</body>
</html>

4.3、js的比较运、逻辑算符、条件运算符

比较和逻辑运算符用于变量之间的比较和逻辑推断。并返回比较结果返回True或者False

4.3.1 比较运算符

  ==：等于
  ===：	绝对等于（值和类型均相等）
  ！==：不等于
  ！===：不绝对等于（值和类型有一个不相等，或两个都不相等
  >：大于
  <：小于
  >=：大于等于
  <=：小于等于

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js的比较运算符</title>
	</head>
	<body>
		<p>x=5, 返回 x==8 的比较值结果。</p>
		<button onclick="myFunction1()">等于</button>
		<p>x=5, 返回 x==="5" 的比较值结果。</p>
		<button onclick="myFunction2()">绝对等于</button>
		<p>x=5, 返回 x!=8 的比较值结果。</p>
		<button onclick="myFunction3()">不等于</button>
		<p>x=5, 返回 x!=="5" 的比较值结果。</p>
		<button onclick="myFunction4()">尝试一下</button>
		<p id="demo1"></p>
		<p id="demo2"></p>
		<p id="demo3"></p>
		<p id="demo4"></p>
		
		<script>
		function myFunction1()
		{
			var x=5;
			document.getElementById("demo1").innerHTML=x==8;
		}
		function myFunction2()
		{
			var x=5;
			document.getElementById("demo2").innerHTML=x==="5";
		}
		function myFunction3()
		{
			var x=5;
			document.getElementById("demo3").innerHTML=x!=8;
		}
		function myFunction4()
		{
			var x=5;
			document.getElementById("demo4").innerHTML=x!=="5";
		}
		</script>
	</body>
</html>

4.3.2 逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑
&& ：且
||：或
！：非
JavaScript逻辑运算符的优先级是：！、&& 、||

4.3.3 条件运算符（三目运算符）

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符
语法：variablename=(condition)?value1:value2

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>条件运算：三目运算符</title> 
	</head>
	<body>
		<p>点击按钮检测年龄。</p>
		年龄:<input id="age" value="18" />
		<p>是否达到投票年龄?</p>
		<button onclick="myFunction()">点击按钮</button>
		<p id="demo"></p>
		<script>
			function myFunction()
			{
				var age,voteable;
				age=document.getElementById("age").value;
				voteable=(age<18)?"年龄太小":"年龄已达到";
				document.getElementById("demo").innerHTML=voteable;
			}
		</script>
	</body>
</html>

5、js的条件、分支、循环语句

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
JavaScript三目运算 - 当条件为true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

5.1 js的if—else语句

只有当指定条件为 true 时，该语句才会执行代码

5.2 js的switch语句

1、代码解释：

计算一次 switch 表达式
把表达式的值与每个case的值进行对比
如果存在匹配，则执行关联代码

2、工作原理：

首先设置表达式 n（通常是一个变量）。
随后表达式的值会与结构中的每个 case 的值做比较。
如果存在匹配，则与该 case 关联的代码块会被执行。
请使用 break 来阻止代码自动地向下一个 case 运行。

3、break关键字的作用

如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。此举将停止代码块中更多代码的执行以及 case 测试。
如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。
break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。
不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

4、default关键字的使用
使用 default 关键词来规定匹配不存在时做的事情

5.3 js的for循环语句

语法：

for (语句 1; 语句 2; 语句 3)        
  {        
  被执行的代码块        
  }

语句 1 （代码块）开始前执行 starts.

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

5.4 js的while循环语句

5.4.1 do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环
语法：

 do
   {
  需要执行的代码
   }
 while (条件);

5.4.2 while循环

while循环与for循环类似
语法：

 while (条件){
	代码块
};

5.5 js的Break和Continute语句

break 语句可用于跳出循环。
continue 语句跳出循环后，会继续执行该循环之后的代码

6、js的类型转换

Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值

6.1、js中的数据类型

在 JavaScript 中有 5 种不同的数据类型：
string
number
boolean
object
function

3 种对象类型：
Object
Date
Array

2 个不包含任何值的数据类型：
null
undefined

注意：
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

6.2、js的数据类型转换

JavaScript 变量可以转换为新变量或其他数据类型：
通过使用 JavaScript 函数
通过 JavaScript 自身自动转换

6.2.1 将数字转换为字符串

方法1、全局方法 String() 可以将数字转换为字符串。
方法2、Number 方法 toString() 也是有同样的效果

6.2.2 将布尔类型转换为字符串

6.2.3 将日期类型转换为字符串

6.2.4 将字符串转换为数字

在这里插入图片描述

7、js函数函数定义

JavaScript 使用关键字 function 定义函数。
函数可以通过声明定义，也可以是一个表达式。

7.1 函数声明调用

函数的声明–函数声明后不会立即执行，会在我们需要的时候调用到

function functionName(parameters) {        
  执行的代码        
}

7.2 函数表达式调用

JavaScript 函数可以通过一个表达式定义。函数表达式可以存储在变量中

var x = function (a, b) {return a * b};