第1章:初识JavaScript编程语言
第1章:初识JavaScript编程语言
本章目标
- 了解为什么要学习JavaScipt编程语言
- 掌握JS的基本结构
- 掌握JS的执行原理
- 掌握JS的基本语法结构
- 掌握JS的几种输出方式
- 掌握JS的注释
课程回顾
- 什么是HTML?
- HTML的标签分为块级元素和行级元素,他们的区别是什么?
- HTML的表单元素有那些?
- HTML的列表有那些?
- CSS的作用有那些?
- CSS盒子模型由几部分组成?
讲解内容
1. JavaScript的基本概念
为什么要学习JavaScript?、
- 所有现代HTML网页中都要用到JavaScript
- JavaScript是web前端开发必须具备的编程语言技术
- JavaScript是web三大语言之一
- HTML:定义网页的内容
- CSS:实现网页的样式和实现布局
- JavaScript:控制网页的行为
- JavaScript是所有前端开发框架的基础
JavaScript概念
概念:JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript特点:
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
- JavaScript 严格区分大小写。
- JavaScript 很容易学习。
JavaScript能做什么?(由老师演示,引起学生的兴趣)
直接写入 HTML 标签效果
1
2document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");JavaScript:对事件的反应
1
<button type="button" onclick="alert('欢迎!')">点我!</button>
JavaScript:改变 HTML 内容
1
2x=document.getElementById("demo"); //查找元素,Demo是网页标签的id
x.innerHTML="Hello JavaScript"; //改变内容JavaScript:改变 HTML 图像
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/img/JavaScript/pic_bulboff.gif";
}
else
{
element.src="/img/JavaScript/pic_bulbon.gif";
}
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="/img/JavaScript/pic_bulboff.gif" width="100" height="180">当点击灯泡看效果,效果如下:
改变前:
改变后:
JavaScript:改变 HTML 样式
1
2x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式JavaScript:验证输入
1
2
3if isNaN(x) {
alert("不是数字");
}
JavaScript用什么工具开发呢?
开发JS可以用很多工具,常用的工具如下:
记事本,原始,无提示功能,不建议使用
WebStorm:是一款强大的JavaScript IDE。它支持多种框架和CSS语言,包括前端,后端,移动端以及桌面应用。WebStorm可以无缝整合第三方工具,例如构建构建、语法检查构建linter等等。它提供了代码补全,实时错误监测,导航,内置控制台,各种插件等一系统功能。
Visual Studio Code:简称:vscode,是微软开发的IDE,支持TypeScript。它提供了代码补全,语法高亮,支持Git命令等等。另外,它还有非常多的插件。
vscode是目前公司最常用的工具,则本门课程我们使用的工具“vscode”
2. JavaScript的组成
JavaScript由三大部分组成:
ECMAScript:
概念:是JavaScript的语法标准,简称:ES,现在版本为ES6.0
语法标准:
- 语法
- 变量和数据类型
- 运算符
- 逻辑控制语句
- 关键字、保留字
- 对象
1
2小知识:
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。DOM:
概念:通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素。简称:“文档对象”
BOM:
概念:浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。
3. JavaScript用法
语法:
1
2
3
4
5
6
7
8
9<script type="text/javascript">
<!--
JavaScript 语句;
-->
</script >
简写:
<script>
javascript语句
</script>注意事项:
HTML 中的脚本必须位于
<script> 与 </script>
标签之间。脚本可被放置在 HTML 页面的
<body> 和 <head>
部分中。如需在 HTML 页面中插入 JavaScript,请使用
<script>
标签。<script> 和 </script>
会告诉 JavaScript 在何处开始和结束。<script type="text/javascript">
,那些老旧的实例可能会在<script>
标签中使用type="text/javascript"
。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
在
<head> 或者 <body>
的JavaScript您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的
<body>
或<head>
部分中,或者同时存在于两个部分中。通常的做法是把函数放入
<head>
部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。JavaScript的执行原理:
第一个JavaScript程序:
1
2
3
4
5
6
7
8
9<html>
<head>
<title>输出Hello world</title>
<script type="text/javascript"> //type可以省略
document.write("使用JavaScript脚本循环输出helloworld");
</script>
</head>
<body>页面主体内容</body>
</html>JavaScript的使用方式
HTML页面内嵌JS代码
外部JS代码
1
<script src="hello.js" language="javascript"></script>
hello.js是js文件,没有HTML代码,属于外部JS
简短缩写方式
1
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
javascript核心语法:
4. JavaScript输出
JavaScript 没有任何打印或者输出的函数,但是可以通过不同的方式来输出数据。
使用 window.alert() 弹出警告框。
1
2
3<script>
alert("大家好,我是alert提示~");
</script>使用 document.write() 方法将内容写到 HTML 文档中,以上代码中有演示。
使用 innerHTML 写入到 HTML 元素,后续讲。
使用 console.log() 写入到浏览器的控制台。
1
2
3<script>
console.log("控制台输出方式,hello log...");
</script>
5. JavaScript中的注释
什么是注释?
添加注释来对 JavaScript 进行解释,或者提高代码的可读性。
浏览器不会去解析运行
JS中的注释
单行注释,以//开头,只能注释单行,//后面的会被注释
1
2
3
4
5<script>
//演示控制台输出效果
console.log("控制台输出方式,hello log...");
document.write("hello"); //文档输出方式
</script>多行注释,多行注释以
/*
开始,以*/
结尾。1
2
3
4
5
6
7
8
9<script>
/*
以下代码
可以在控制台输出
也可以在文档输出
*/
console.log("控制台输出方式,hello log...");
document.write("hello");
</script>
6. VSCode的使用教程
下载安装VSCode工具:官网地址下载:
https://code.visualstudio.com/
直接安装VSCode工具,安装成功后在桌面有快捷方式
在电脑上创建项目目录(文件夹),存放页面
双击桌面VSCode快捷方式,打开程序
打开项目目录
项目创建OK
添加页面或目录,创建成功
课后作业
- 安装VSCode,且成功创建项目
- 用文档方式输出你的姓名,年龄,爱好,家庭地址等信息
- 用提示框alert方式输出以下信息
- 练习注释代码,看看效果