JavaScript教程 - 从入门到使用

HTML是房子，CSS是装修，JavaScript是生活

Js放置

内嵌代码
外部文件

使用方式

设置数据
事件分类

变量

声明位置
常规
空值
数组
对象

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

Js放置

Js内部文件一般存放的位置在 head标签内 与 body标签后，主要便于维护

<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
	<title>开始的开始</title>
	<script>
		js可置于head标签内
	</script>
</head>
<body>
	<script>
		js可置于body标签内
	</script>
</body>
	<script>
		js可置于body标签后
	</script>
</html>

内嵌代码

稍后补全

外部文件

一般在正式的环境中我们都会采用外部文件的形式去存储js文件，主要原因有以下三点

安全性 - 防止代码直接暴露，让恶意开发者利用已方未发现漏洞造成损失
维护性 - 针对开发者而言，项目越来越大，那么可维护性就很重要，方便我们第一时间定位问题
缓存 - 多页面引用同一js文件时，仅需加载一次即可；否则多页面同时在各自页面加载同一逻辑，从性能和维护方面并不可取

使用方式

事件处理可以说是js的主要功能，一般我们会在控件内设置id，之后通过document.getElementById(“id”) 这种反射机制去获取到控件操作权，在此场景一般我们可以根据业务需求去实现自己的功能

设置数据

默认设置方式 - script标签内可添加html标签、内容、各种方法

这里有一些特殊，需要记住要插入内容属性，必须在完全载入页面前调用write（）和writeln（）方法。如果任何一个方法是在页面载入后调用的，它将抹去页面的内容，显示指定的内容 ~

<script >
	document.write("<h1>变更内容</h1>");
	document.write("变更内容");
</script>

通过id的函数方法设置 - 只针对控件本身

document.getElementById("id").innerHTML="变更内容";

示例

<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
	<title>开始的开始</title>
</head>
<body>	
	<p id="first">默认无修改状态</p>
	<button type="button" onclick="firstWayFunction()">默认设置方式</button>
	<button type="button" onclick="secondWayFunction()">通过id设置</button>
</body>
<script>
	function firstWayFunction(){
		document.write(Date());
	}
</script>
<script>
	function secondWayFunction(){
		// 找到元素
		x=document.getElementById("first");  
		// 改变内容
		x.innerHTML="Hello JavaScript!";  
  //开发中常写： document.getElementById("first").innerHTML="Hello JavaScript!"
	}
</script>
</html>

事件分类

自我封装 - 类似下方 myFunction()
分无参方法、有参方法
系统默认封装 - 类似下方 alert(‘系统封装功能!’)

<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
	<title>开始的开始</title>
</head>
<body>	
	<p id="first">默认无修改状态</p>
	<button type="button" onclick="myFunction1()">自己封装无参方法</button>
	<button type="button" onclick="myFunction2()">自己封装有参方法</button>
	<button type="button" onclick="alert('系统封装功能!')">触动系统已封装方法</button>
</body>
<script>
	function myFunction1(){
		document.getElementById("first").innerHTML="Hello JavaScript!";  
	}
	
	function myFunction2(name,age){
		document.getElementById("first").innerHTML="I,m" + name + ", I，am" + age;  
	}
</script>
</html>

变量

声明位置

开发中正常的变量声明，我们一般都会放在头部！
注：变量可以在使用后声明，也就是变量可以先使用再声明

正常的

<script>
var x = 5; // 初始化 x
var y = 7; // 初始化 y
document.getElementById("demo").innerHTML = x + " " + y;
</script>

亦可

<script>
var x = 5; // 初始化 x
y = 7; // 初始化 y
document.getElementById("demo").innerHTML = x + " " + y;
var y；
</script>

常规

<script>
var name="Jack";
document.write(name+ "<br>");
</script>

空值

preson：未设置属性 undefined
people：设置属性 null
undefined == null

<script>
var person;
var people=null
document.write(person + "<br>");
document.write(car + "<br>");
</script>

数组

方式一

<script>
var data = new Array();
data[0] = "F";
data[1] = "L";
data[2] = "Y";
for (i=0;i<data.length;i++){
	document.write(data[i] + "<br>");
}
</script>

方式二

<script>
var data = ["F","L","Y"];
for (i=0;i<data.length;i++){
	document.write(data[i] + "<br>");
}
</script>

对象

<script>
var person=
{
	firstname : "Jack",
	lastname  : "Tom",
	id        :  6666
};
//俩种设值方式均可
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>

来源：CSDN

作者：Modu_MrLiu

链接：https://blog.csdn.net/qq_20451879/article/details/103462489

标签

javascript

js代码

html代码