文章目录
一、JavaScript概述
1 JavaScript介绍
简称JS,是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果,用户交互及前后端的数据传输等。
JS是弱变量类型的语言,变量只需要var来声明。
2 JavaScript组成
JavaScript基础分为三个部分:
-
ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
-
DOM:文档对象模型,操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
-
BOM:浏览器对象模型,操作浏览器部分功能的API。比如让浏览器自动滚动。
3 JavaScript特点
-
简单易用:可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序。
-
解释执行(解释语言):事先不编译、逐行执行、无需进行严格的变量声明。
-
基于对象:内置大量现成对象,编写少量程序可以完成目标
注:
- 对换行、缩进、空格不敏感。
- 所有的符号都是英语的,包括:括号、引号、分号。
二、JavaScript初使用
1 元素绑定事件
事件 :指用户的行为(单击,双击等)或元素的状态(输入框的焦点状态等)
事件处理:元素监听某种事件并在事件发生后自动执行事件处理函数。
常用事件:onclick (单击事件)
语法 :将事件名称以标签属性的方式绑定到元素上,自定义事件处理。
<!--实现点击按钮在控制台输出-->
<button onclick="console.log('Hello World');">点击</button>
2 文档内嵌
使用标签书写 JS 代码
语法 :
<script type="text/javascript">
alert("网页警告框");
</script>
注意 :<script></script>
标签可以书写在文档的任意位置,书写多次,一旦加载到script标签就会立即执行内部的JS代码,因此不同的位置会影响代码最终的执行效果。
3 外部链接
创建外部的JS文件 XX.js,在HTML文档中使用引入
<script src="index.js"></script>
注意 :<script></script>
既可以实现内嵌 JS 代码,也可以实现引入外部的 JS 文件,但是只能二选一。
4 JS 输出语句
alert("");
普通的网页弹框
prompt("");
接收用户输入的弹框,返回用户输入的内容
console.log();
控制台输出,多用于代码调试
document.write("<h1>Hello</h1>");
实现在动态在网页中写入内容。
注:
-
在使用事件方式写入时,会重写网页内容
-
可以识别HTML标签,脚本代码可以在文档任何地方书写,如果是普通写入(不涉及事件),区分代码的书写位置,在当前位置中插入,如果是在head中嵌入,内容会作为body的首行内容显示
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<script>
console.log('hello world');
document.write("Hello");
</script>
<!--使用src属性引入外部的js文件-->
<script src="index.js">
console.log('哈哈');
</script>
</head>
<body>
<!--元素绑定事件
网页弹框:
alert('')网页警告框
-->
<h1 onclick="document.write('呵呵呵呵');">点击</h1>
<!--通过script标签书写JS语句-->
<script>
//当行注释
/*多行注释*/
console.log('控制台输出');
//带有输入框的弹框
prompt('请输入姓名')
//给用户看的
</script>
</body>
</html>