初识Javascript

最新推荐文章于 2025-05-23 20:42:37 发布

K猿E

最新推荐文章于 2025-05-23 20:42:37 发布

阅读量48

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_59114537/article/details/133929857

版权

天赋是基础，勤奋是高度。

概念

作用

处理用户事件的代码

事件驱动型代码

书写位置

1.在标签的事件属性中书写

onclick：点击事件

....

2.在head中书写scrip标签，在script标签中书写js代码

3.在js文件中书写，通过script引入到使用的html文件中

输出

网页输出

document.write（输出的内容）;

对话框输出

alert（输出的内容）

控制台输出

consol.log（输出的内容）

注释

//单行注释

/*

多行注释

*/

/**

文档注释

*/

变量

作用：临时记录一个值可以改变的数据

语法

var 变量名 = 值；

运算符

算术运算符

+

-

*

/

%

++

--

赋值运算符

=

复合运算符

+=

-=

*=

/=

%=

关系运算符

<

>

<=

>=

==

!=

=== 全等(值与数据类型都相同)

逻辑运算符

&&

当结果为真时，返回最后一个为真的结果

当结果为假时，返回第一个为假的结果

||

当结果为假时，返回最后一个为假的结果

当结果为真时，返回第一个为真的结果

！

注意：除null，false，0，""，undefined以外都为真

三目运算符

条件表达式？值1：值2；

分支语句

作用：判断

分类

if

switch

循环语句

作用：重复执行一段代码

分类

while

do while

for

函数

作用：封装一段代码使其便于使用

步骤

1.定义

2.调用

定义

c++函数定义

返回值类型函数名（形参列表）

{

函数体

}

js函数的定义

function 函数名（形参列表）

{

函数体

}

var 函数名 = function（形参列表）

{

函数体

}

注意：

1.js函数中如果无返回值，无需关心其他类型

2.js函数的形参列表不写数据类型只写变量名

如：

c++定义一个计算两数之和

int add(int a, int b)

{

int c = a + b;

cout << c << endl;

return c;

}

js定义一个计算两数之和

function add(a, b)

{

var c = a + b;

return c;

}

调用

c++函数调用

变量名 = 函数名（实参列表）;

函数名（实参列表）;

js函数调用

变量名 = 函数名（实参列表）;

函数名（实参列表）；

特殊情况

多重调用

递归

数组

作用：存储一组数据

使用步骤

1.声明

语法：

var 数组名；

2.定义

语法：

var 数组名 = [值1，值2，....]

3.使用

语法;

取值

数组名[下标]

改值

数组名[下标] = 值；

注意：

js中字符串可以直接书写，无需像c++一样称之为字符数组

js

var mystr = "abc";

c++

char mystr[] = "abc";

char *mystr = "abc";

js中字符串之间可以使用+号做完字符串连接符

var str01 = "abc";

var str02 = "123";

var str03 = str01 + str02;

此时str03的值为"abc123";

var str04 = "abc“ + ”123”；

随机数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	var texts = ["南京","兰州",
	"上海","西安",
	"山西","山东",
	"东北","北京"];
	function nextText()
	{
		//数组名.length 获取数组长度
		//0 ~ 1 * 8
		var index = Math.random() * texts.length;
		index = Math.floor(index);
		var info = texts[index];
		document.write(info);
	}
	nextText();
</script>

定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	var num = 0;
	//设置定时器
	var id = setInterval(function(){
		num++;
		if(num > 10)
		{
			//结束定时器
			clearInterval(id);
		}
		else
		{
			document.write(num);
			document.write("<hr />");
		}
	},1000);
</script>

BOM

中文名：浏览器对象模型

地址栏

前进与后退

屏幕

文档 document

浏览器信息

DOM

中文名：文档对象模型

寻找文档中的标签

通过id寻找，只会找到一个标签

var 变量名 = document.getElementById（"要寻找的标签id"）;

通过class寻找，会找到一组

var 数组名 = document.getElementById（"要寻找的标签class"）;

通过标签名寻找，会找到一组

var 数组名 = document.getElementById（"要寻找的标签名"）;

操作

获取标签中的内容

寻找到的标签：innerHTML //获取所有的内容

寻找到的标签：innnerText //获取标签中的文本

修改标签中的内容

寻找到的标签.innerHTML= 修改后的内容

寻找到的标签.innerText = 修改后的内容

获取属性值

寻找到的标签.属性名

注意：

因为class是js中的关键字，所以获取class的属性值需要写className

修改属性值

寻找到的标签.属性名 = 值

注意：

因为class是js中的关键字，所以获取class的属性值需要写className

修改属性值

点击事件

寻找到的标签.onclick = function（）{

//标签被点击后执行的代码

}；