JavaScript教程 - 从入门到使用

最新推荐文章于 2024-04-22 11:15:43 发布

远方那座山

最新推荐文章于 2024-04-22 11:15:43 发布

阅读量311

点赞数

分类专栏：前端修炼文章标签：前端 JavaScript

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

版权

前端修炼专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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

前程往事

HTML教程 - 从入门到使用

CSS教程 - 从入门到使用（此处不完善）

jQuery教程 - 从入门到使用

环环相扣

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

放置区域

在实际开发中，我们的Js内部文件一般都存放的位置在 head标签内，主要便于维护管理

head标签内
body标签内
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方法存在于当前html~

示例

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>内嵌代码</title> 
  <script>
	function firstFunction(){
		// 找到元素
		x=document.getElementById("first");  
		// 改变内容
		x.innerHTML="Hello JavaScript!";  
	}
</script> 
 </head> 
 <body> 
  <button id="first" onclick="firstFunction()">调用内嵌JS方法</button>  
 </body>
</html>

外部文件

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

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

示例

外部js：first.js

	function firstFunction(id){
		document.getElementById(id).innerHTML="Hello JavaScript!"
	}

html调用

调用外部js方法一般需先在head标签区间内进行js文件引入
引入方式：<script type=“text/javascript” src=“对应文件目录/first.js”></script
PS：只有引用了js文件，方可调用对应js文件内的方法 ~

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>引用外部js文件</title> 
  <script type="text/javascript" src="对应文件目录/first.js"></script> 
 </head> 
 <body> 
  <button id="first" onclick="firstFunction(first)">调用外部JS方法</button>  
 </body>
</html>

基础使用

设置数据

默认设置方式 - script标签内支持写入html标签、内容以及各类事件方法

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

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

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

<script >
	document.getElementById("id").innerHTML="变更内容";
</script >

示例

<!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('liu','18')">自己封装有参方法</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>

外部js示例

此处js示例看起来不同于之前的方式，主要是完全给新手看的，引用下方的js文件后会在html加载之初，直接就在当前页面写入 ’外部文件‘ 四个字 ~

1.新建script目录，然后创建out.js文件

out.js

	document.getElementById('demo').innerHTML = "外部文件";

2.html内引用外部的js文件，如文内 script/out.js 就是对应js文件地址

<!DOCTYPE html>
<script type="text/javascript" src="script/out.js"></script> 
<html>
  
  <head>
    <meta charset="utf-8">
    <title>外部文件</title>
  </head>
  
  <body>
    <p id="demo"></p>
  </body>

</html>

事件分类

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

注：关于事件的 jQuery使用方法，在此文中出现的场景更多一些 ~

常见事件

在这里插入图片描述

使用方式

一般我们在对应标签内加入对应的事件标签，然后写入逻辑即可，如下方的点击事件、触摸事件（事件要灵活的在各标签使用，不要被思想局限，开阔点、开阔点 ~ ~）

  //这里首先点击button会重写p标签内容，然后当鼠标移动到p标签内容后数据又会被重写
  <button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button> 
  <p id="demo" onmouseover="getElementById('demo').innerHTML='开始的开始'"></p>

示例

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>Test</title> 
 </head> 
 <body> 
  <button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button> 
  <p id="demo" onmouseover="getElementById('demo').innerHTML='开始的开始'"></p>  
 </body>
</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>

表单

作用：校验form表单的数据问题，如是否有值、值的格式是否正确等
建议：提前了解Html中from表单的属性含义
注意：在表单提交中要注意

核心方法

	// 获取某表单内的某个属性
	var x=document.forms["表单名"]["input输入框名"].value;
	//关于校验的行为，在获取对应表单数据之后if、else处理即可

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function checkoutForm() {
    var x = document.forms["myForm"]["age"].value;
    if (x == null || x == "") {
        alert("需要输入年龄");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="一般为url" onsubmit="return checkoutForm()" method="post">
年龄: <input type="text" name="age">
<input type="submit" value="提交">
</form>

</body>
</html>

远方那座山

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript教程 - 从入门到使用

HTML是房子，CSS是装修，JavaScript是生活 Js存放位置内部文件外部文件事件处理JavaScript 是一种轻量级的编程语言，可插入 HTML 页面的编程代码，可由所有的现代浏览器执行 ~Js存放位置内部文件Js内部文件一般存放的位置在head标签内与body标签后，主要便于维护<!DOCTYPE html><html><head&g...
复制链接

扫一扫