JavaScript(js)基础

Posted 2021-06-28 技术很low的瓜贼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript(js)基础相关的知识，希望对你有一定的参考价值。

javascript脚本必须位于<script></script>之间
脚本可被放置在html页面中的<head></head>和<body></body>中

一、 JavaScript的使用

1.body中的JavaScript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			document.write("<h1>body中的JavaScript</h1>");
		</script>
	</body>
</html>

在这里插入图片描述

2.head中的JavaScript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			document.write("<h1>head中的JavaScript</h1>");
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

3.body中的JavaScript函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="clock">看这里哟</div>
		<script>
			function myclock() {
				document.getElementById("clock").innerHTML=new Date();
			}
		</script>
		<br>
		<input type="button" onclick="myclock()" value="查看日期"/>
	</body>
</html>

在这里插入图片描述

4.head中的JavaScript函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>head中的JavaScript函数</title>
		<script>
			function myclock() {
				document.getElementById("clock").innerHTML=new Date();
			}
		</script>
	</head>
	<body>
		<div id="clock">看这里哟</div>
		<br>
		<input type="button" onclick="myclock()" value="查看日期"/>
	</body>
</html>

在这里插入图片描述

5.外部的JavaScript函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部的JavaScript函数</title>
	</head>
	<body>
		<script src="js文件的路径">
		</script>
	</body>
</html>

二、JavaScript的输出

输出类型
使用window.alert()弹出提示框（alert前的window通常课省略不写）
使用document.write()将内容写到HTML文档中
使用innerHTML写入到HTML元素
使用console.log()写入到浏览器的控制台

1.使用window.alert()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			alert("这是使用window.alert()的输出");
		</script>
	</body>
</html>

在这里插入图片描述

2.使用document.write()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			document.write("这是使用document.write()的输出");
		</script>
	</body>
</html>

在这里插入图片描述

3.使用innerHTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="demo">
			这是输出位置
		</div>
		<script>
			document.getElementById("demo").innerHTML="这是innerHTML的输出"
		</script>
	</body>
</html>

在这里插入图片描述

4.使用console.log()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			console.log("这是控制台的输出");
		</script>
	</body>
</html>

在这里插入图片描述

三、JavaScript注释

JavaScript不会执行注释，我们可以添加注释来对JavaScript进行解释，提高代码的可读性

注释类型
单行注释：//
多行注释：/* */

四、JavaScript变量

JavaScript变量可用于存放值和表达式
要求：

变量必须以字母开头
变量也能以$ 和 _ 符号开头
变量名称对大小写敏感

变量的声明
我们使用 var 关键词来声明变量
如：var name；
变量声明后为空值，如要赋值要使用等号
如：name = “小猪佩奇”;
也可以在声明变量时直接赋值
如：var name = “小猪乔治”;

五、JavaScript数据类型

值类型（基本类型）	引用数据类型
字符串（String）	对象(Object)
数字（Number）	数组(Array)
布尔（Boolean）	函数(Function)
空（null）
未定义（Undefined）
Symbol

对象类代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>对象类的演示</title>
	</head>
	<body>
		<p id="demo">演示文本</p>
		<script>
			var student = {
				/*
				访问对象属性的两种方式：
				1.student.name;
				2.student["name"];
				*/
				name:"郭靖",
				id:"191304",
				classid:"778899",
				information : function() {
					return this.name + this.id + this.classid;
				}
			};
			document.write(student.name + "<br>");
			document.write(student.id + "<br>");
			document.write(student.classid + "<br>");
			/*
			第二种输出方法，调用函数进行输出
			*/
			document.getElementById("demo").innerHTML = student.information();
		</script>
	</body>
</html>

在这里插入图片描述

六、JavaScript函数

JavaScript函数语法
function functionname()
{
// 执行代码
}

1.调用带参函数

function myFunction(var1,var2)
{
代码
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>		
		<button onclick="myFunction('小猪佩奇','123456')">请点击</button>
		<script>
			function myFunction(name, id) {
				alert("我叫" + name + ",我的学号是" + id);
			}
		</script>

	</body>
</html>

在这里插入图片描述

2.带有返回值的函数

function myFunction()
{
var x=5;
return x;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>		
		<div id="demo">
			
		</div>
		<script>
			function myFunction() {
				var data = new Date();
				return data;
			}
			document.getElementById("demo").innerHTML = myFunction();
		</script>

	</body>
</html>

在这里插入图片描述

七、JavaScript作用域

作用域种类
局部作用域（局部变量）
全局作用域（全局变量）

局部作用域：变量在函数内声明，变量为局部作用域。局部变量只能在函数内部访问。
全局作用域：变量在函数外定义为全局变量，网页中所有函数和脚本都可以使用。

注：如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

变量生命周期：

JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁

八、JavaScript事件

JavaScript可以触发HTML事件。
如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>		
		<button onclick="this.innerHTML=Date()">现在的时间是?</button>
	</body>
</html>

调用前：
在这里插入图片描述
调用后：

其他作用：

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性

九、JavaScript字符串

JavaScript 字符串用于存储和处理文本。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号
你可以使用索引位置来访问字符串中的每个字符，字符串的索引从 0 开始
注意：
你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:

你也可以在字符串添加转义字符来使用引号：

转义字符代码	输出
`\\'`	单引号
`\\"`	双引号
`\\\\`	反斜杠
`\\n`	换行
`\\r`	回车
`\\t`	tab(制表符)
`\\b`	退格符
`\\f`	换页符

字符串长度：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<script type="text/javascript">
			var text = "xiaozhupeiqi***";
			document.write("字符串长度为：" + text.length);
		</script>
		
		
	</body>
</html>

在这里插入图片描述

常用字符串方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLowerCase()	把字符串转换为小写
toUpperCase()	把字符串转换为大写
toString()	返回字符串对象值
trim()	移除字符串首尾空白

十、JavaScript运算符

算术运算符：同java
赋值运算符：同java

用于字符串的 “+” ："+" 运算符用于把文本值或字符串变量加起来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<button onclick="myFunction()">点击这里</button>
		<p id="demo"></p>
	<script>
		function myFunction()
		{
			txt1="I am ";
			txt2="very good";
			txt3=txt1+txt2;
			document.getElementById("demo").innerHTML=txt3;
		}
	</script>
	</body>
</html>

在这里插入图片描述
注：

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>	
		<button onclick="myFunction()">点击这里</button>
		<p id="demo"></p>
	<script>
		function myFunction()
		{
			var x = 10 + 15;以上是关于JavaScript(js)基础的主要内容，如果未能解决你的问题，请参考以下文章 
 JavaScript笔试题（js高级代码片段）
 Atom编辑器折腾记_(15)JS代码片段补全(插件:javascript-snippets)
 VSCode自定义代码片段12——JavaScript的Promise对象
 VSCode自定义代码片段12——JavaScript的Promise对象
 VSCode自定义代码片段——JS中的面向对象编程
 VSCode自定义代码片段9——JS中的面向对象编程

JavaScript(js)基础

文章目录

一、 JavaScript的使用

1.body中的JavaScript

2.head中的JavaScript

3.body中的JavaScript函数

4.head中的JavaScript函数

5.外部的JavaScript函数

二、JavaScript的输出

1.使用window.alert()

2.使用document.write()

3.使用innerHTML

4.使用console.log()

三、JavaScript注释

四、JavaScript变量

五、JavaScript数据类型

六、JavaScript函数

1.调用带参函数

2.带有返回值的函数

七、JavaScript作用域

八、JavaScript事件

九、JavaScript字符串

十、JavaScript运算符