JavaScript基础语法

df5465695

已于 2022-08-08 19:40:50 修改

阅读量280

点赞数

文章标签： javascript

于 2022-08-08 19:38:18 首次发布

本文链接：https://blog.csdn.net/df5465695/article/details/126233618

版权

为什么要学习JavaScript

表单验证——减轻服务器压力

制作页面特效

动态改变页面内容

什么是JavaScript

JavaScript是一种基于对象和事件驱动的脚本语言

JavaScript特点

交互、脚本语言、解释性语言

边执行边解释

JavaScript组成

ECMAScript是一种语法标准

语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象

编码遵循ECMAScript标准

BOM：Browser Object Model（浏览器对象模型）

提供了独立于内容与浏览器窗口进行交互的对象

DOM：Document Object Model（文档对象模型）

是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档

JavaScript的基本结构

<!--

JavaScript 语句;

-->

</script >

示例：

……
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
    document.write("初学JavaScript");
    document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>

JavaScript的执行原理

JavaScript在网页中的应用

使用<script>标签

外部JS文件（JS文件中文乱码处理）

直接在HTML标签中

练习：使用三种方式在页面中引入JavaScript，并弹出“欢迎你”文字

使用<script>标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			alert('欢迎你');
		</script>
	</head>
	<body>
	</body>
</html>

外部JS文件

JS文件：
    alert('欢迎你');

HTML文件：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/1.js"></script>
	</head>
	<body>
	</body>
</html>

直接在HTML标签中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button type="button" onclick="alert('欢迎你')">点我一下</button>
	</body>
</html>

变量

先声明变量再赋值

var width;

width = 10;

同时声明和赋值变量

var userName= “六月”;

var i, j, k = 15;

不声明直接赋值

userName= “六月”;

i=1;

数据类型

undefined

var age;

变量age没有初始值，将被赋予undefined

null

表示一个空值，与undefined值相等

number

var score=90; //整数

var score=96.5; //浮点数

boolean

布尔型：true和false

string

被引号（单引号或双引号）括起来的文本 var string1="This is a string";

注：JS提供typeof操作符来检测变量的数据类型

练习：使用typeof检测JavaScript数据类型

检测以下数据类型

var width,heigth=10,name="summer";

同时检测出true、null以及undefined的数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var width,heigth=10,name="summer";
			document.write("width:"+typeof width+"<br>");
			document.write("heigth:"+typeof heigth+"<br>");
			document.write("name:"+typeof name+"<br>");
			document.write("true:"+typeof true+"<br>");
			document.write("null:"+typeof null+"<br>");
			document.write("undefined:"+typeof undefined+"<br>");
		</script>
	</body>
</html>

运算符

类型	运算符
算术运算符	+ - * / % ++ --
赋值运算符	=
比较运算符	> < >= <= == !=
逻辑运算符	&& \|\| !

注： == 只比较变量里的数据内容 ===不仅变量里的数据内容，还要比较数据类型

注释

单行注释以 // 开始，以行末结束

多行注释以 /* 开始，以 */ 结束

练习：加减乘除算法题

声明如下图示的变量，并将结果打印在页面中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var x=50;
			var y=x+10;
			var z=x-8;
			var m=x*5;
			var n=x/6;
			var k=x%6;
			var i=10;
			i++;
			var j=10;
			j--;
			document.write("x的值为:"+x+"<br>");y
			document.write("y的值为:"+y+"<br>");
			document.write("z的值为:"+z+"<br>");
			document.write("m的值为:"+m+"<br>");
			document.write("n的值为:"+n+"<br>");
			document.write("k的值为:"+k+"<br>");
			document.write("i++的值为:"+i+"<br>");
			document.write("j--的值为:"+j+"<br>");
		</script>
	</body>
</html>