一、JavaScript介绍
我们已经学习了HTML、CSS的基础内容,我们知道HTML负责网页的结构,而CSS负责的是网页的表现。 而要想让网页具备一定的交互效果,具有一定的动作行为,还得通过JavaScript来实现。那今天,我们就来学习JavaScript,这门语言会让我们的页面能够和用户进行交互。
那什么是JavaScript呢 ?
JavaScript(简称:JS) 是一门跨平台、面向对象的脚本语言,是用来控制网页行为的,实现人机交互效果。JavaScript 和 Java 是完全不同的语言,不论是概念还是设计。但是基础语法类似。
组成:
ECMAScript: 规定了JS基础语法核心知识,包括变量、数据类型、流程控制、函数、对象等。
BOM:浏览器对象模型,用于操作浏览器本身,如:页面弹窗、地址栏操作、关闭窗口等。
DOM:文档对象模型,用于操作HTML文档,如:改变标签内的内容、改变标签内字体样式等。
备注:ECMA国际(前身为欧洲计算机制造商协会),制定了标准化的脚本程序设计语言 ECMAScript,这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。
二、开发工具
我们需要学习一款前端专业的开发工具VS Code。
Visual Studio Code(简称 VS Code )是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持,同时也其他编程语言(例如:C++、Java、Python、PHP、Go等)。VS Code 提供了非常强大的插件库,大大提高了开发效率。
官网: https://code.visualstudio.com
三、 引入方式
同样,js代码也是书写在html中的,那么html中如何引入js代码呢?主要通过下面的2种引入方式:
第一种方式:内部脚本,将JS代码定义在HTML页面中。
1.JavaScript代码必须位于<script></script>标签之间
2.在HTML文档中,可以在任意地方,放置任意数量的<script>
3.一般会把脚本置于<body>元素的底部,可改善显示速度
例子:
<body><!-- 页面内容 --><script>alert("Hello World");</script> </body>
第二种方式:外部脚本, 将JS代码定义在外部 JS文件中,然后引入到 HTML页面中
1.外部JS文件中,只包含JS代码,不包含<script>标签
2.引入外部js的<script>标签,必须是双标签
例子:
<script src="js/demo.js"></script>
四、JS模块化
所谓JS模块化,指的是JS提供的一种,将JavaScript程序拆分位若干个可按需导入的单独模块的机制。
比如,我们前面实现的表单校验的案例,我们是可以把JS代码单独的抽取到一个js文件中,然后在html中引入对应的js文件即可,这样做,便于管理、提升代码的复用性。具体操作如下:
4.1 在html中,引入JS文件
在html中,引入JS文件,可以直接使用 <script src=".."></script> 来引入。
step1. 定义一个js文件,命名位 check.js
//在鼠标离开焦点时, 校验输入框内容的长度 . //校验用户名 function checkUsername(){ //true, 合法; false, 不合法;let flag = true;let usernameValue = document.querySelector('#username').value;let errMsg = "";if(!/^\w{4,16}$/.test(usernameValue)){errMsg = "用户名不合法";flag = false;}document.querySelector('#name_msg').innerHTML = errMsg;return flag; } document.querySelector('#username').addEventListener('blur', checkUsername)//校验密码 function checkPhone(){ //true, 合法; false, 不合法;let flag = true;let phoneValue = document.querySelector('#phone').value;let errMsg = "";if(!/^1[3-9]\d{9}$/.test(phoneValue)){errMsg = "手机号不合法";flag = false;}document.querySelector('#phone_msg').innerHTML = errMsg;return flag; } document.querySelector('#phone').addEventListener('blur', checkPhone)//在表单提交时, 判断是否所有的输入框输入的值合法 . document.querySelector('form').addEventListener('submit', (e)=> {if(!checkUsername() || !checkPhone()){alert('表单校验失败, 不能提交表单')e.preventDefault();} })
step2. 在html文件中,如果需要用到上述的JS代码,直接在 script 标签中引入该js即可。
<!DOCTYPE html> <html><head><title>表单</title><style>label {display: inline-block;width: 80px;text-align: right;margin-right: 10px;}input {width: 250px;padding: 10px;border: 1px solid #ccc;border-radius: 5px;margin-bottom: 10px;}.btn {width: 150px;}.tip {color: #ff0000;font-size: 12px;}</style> </head><body><div><h1>用户注册</h1><form><label for="username">用户名:</label><input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符"><span class="tip" id="name_msg"></span> <br><label for="phone">手机号:</label><input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位"><span class="tip" id="phone_msg"></span><br><input type="submit" value="提交" class="btn"><input type="reset" value="重置" class="btn"></form></div><script src="./js/check.js"></script> </body></html>
OK,那这是在html中,引入JS文件,可以直接使用 <script src=".."></script> 来引入。 那如果是在一个js文件中,我需要用到另外一个js文件中的方法呢。 那此时该如何实现呢 ?
4.2 在一个js文件中使用另外一个js文件中的方法
那在JS中,就给我们提供了模块化导入、导出的操作,我们可以通过 export 关键字,来导出模块。 然后在别的需要用到的地方,通过 import 关键字导入模块。
如下所示:
step1. checkFn.js 中定义是校验方法
在变量前面加上 export 代表,我们要将该变量、函数、对象导出为一个模块。别的js中要想使用,就可以 import 导入了。
export function checkUsername(){ //true, 合法; false, 不合法;let flag = true;let usernameValue = document.querySelector('#username').value;let errMsg = "";if(!/^\w{4,16}$/.test(usernameValue)){errMsg = "用户名不合法";flag = false;}document.querySelector('#name_msg').innerHTML = errMsg;return flag; }export function checkPhone(){ //true, 合法; false, 不合法;let flag = true;let phoneValue = document.querySelector('#phone').value;let errMsg = "";if(!/^1[3-9]\d{9}$/.test(phoneValue)){errMsg = "手机号不合法";flag = false;}document.querySelector('#phone_msg').innerHTML = errMsg;return flag; }
step2. check.js 中定义的是校验的事件监听
那在check.js中需要用到 checkUsername、checkPhone函数,就可以通过 import 关键字将其导入进来。
import {checkUsername, checkPhone} from './checkFn.js'//1. 校验用户名 - 失去焦点时校验 - blur document.querySelector('#username').addEventListener('blur', checkUsername)//2. 校验手机号 document.querySelector('#phone').addEventListener('blur', checkPhone)//3. 表单提交的时候 - 校验整个表单 - submit document.querySelector('form').addEventListener('submit', function(event){//判断用户名及手机号是否合法, 如果不合法, 提示错误信息;if(!checkUsername() || !checkPhone()){alert('表单数据不合法');//组织表单默认的提交事件event.preventDefault();//组织事件的默认行为 } })
step3. xxx.html 中就是html的基础代码样式
注意:如果我们使用到了 export, import 这种模块化的js,那在通过 <script src="..."></script> 在引入JS文件时,必须指定 type="module" 属性,表名我们使用的是模块化的JS。 如下所示:
<!DOCTYPE html> <html><head><title>表单</title><style>label {display: inline-block;width: 80px;text-align: right;margin-right: 10px;}input {width: 250px;padding: 10px;border: 1px solid #ccc;border-radius: 5px;margin-bottom: 10px;}.btn {width: 150px;}.tip {color: #ff0000;font-size: 12px;}</style> </head><body><div><h1>用户注册</h1><form><label for="username">用户名:</label><input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符"><span class="tip" id="name_msg"></span> <br><label for="phone">手机号:</label><input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位"><span class="tip" id="phone_msg"></span><br><input type="submit" value="提交" class="btn"><input type="reset" value="重置" class="btn"></form></div><!-- 模块化JS引入方式,需要指定type="module" --><script type="module" src="./js/check.js"></script> </body></html>
注意:如果使用模块的js,使用了 export,import ,要保证我们的代码,一定是在服务器端运行,而不是在磁盘中直接打开。 所以运行的时候,在VSCode中已经要右键选择 “Open with Live Server”。