目录
一、JavaScript是什么?
- 是一种运行在客户端的脚本语言。脚本语言是指不需要编译,运行过程中需要由js解释器(js引擎)逐行进行解释并执行。(编译:是指利用编译程序将由语言编写的源程序转变为目标程序的过程)。
- 现在可以基于Node.js技术进行服务端编辑。客户端:指Client,是指自己的电脑;服务端:是指远程。
二、JS的的作用
- 表单动态验证(密码强度测试)
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App
- 控制硬件——物联网(Ruff)
- 游戏开发(cocos2d-js)
三、HTML/CSS/JS的关系
- HTML:决定网页结构和内容,描述类语言(相当于人的身体)
- CSS:决定网页呈现给用户的样子,描述类语言(相当于人的衣服,妆容)
- JS:实现业务逻辑和页面控制,编程类语言(相当于人的动作)
四、浏览器执行JS简介
- 浏览器分成两部分:渲染引擎和JS引擎。 渲染引擎:俗称内核。 JS引擎:也称作JS解释器,用来读取网页中的JS代码,然后对其处理并运行。
- 浏览器本身不会执行JS代码,而是通过内置JS引擎(JS解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JS是脚本语言,会逐行解释执行。
五、JS的组成
JS分为三部分组成:ECMAScirpt,DOM,BOM
- ECMAScirpt:指JS基础核心语法
- DOM:指页面文档对象模型,对页面上的各种元素进行操作(大小,位置,颜色等)
- BOM:指浏览器对象模型,对浏览器上的窗口进行操作(弹出框,控制浏览器跳转,获取分辨率等)
六、JS三种书写位置
JS有三种书写位置,分为内嵌,行内,外部。
- 行内式
新建一个test.html文件,实现点击“中国”按钮,弹出“北京”的弹窗。
- 错误示范:
浏览器显示:
显示错误结果,连注释都打印出来了。
错误原因://单行注释,是js中的注释,但是我创建的是html文件,html中的注释为【ctrl+/】
- 正确示范:
为实现设置一个“中国”按钮,点击之后,出现“北京”:
使用vscode编写代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.行内式的js,直接写到元素的内部 -->
<input type="button" value="中国" onclick="alert('北京')"
</body>
</html>
浏览器显示:
显示结果:
2.内嵌式
实现弹出“你好”的弹窗。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style></style>
<!-- 2.内嵌式的js -->
<script>
alert('你好')
</script>
</head>
<body>
<!-- 1.行内式的js,直接写到元素的内部 -->
<input type="button" value="中国" onclick="alert('北京')"
</body>
</html>
显示结果:
3.外部式——适用于代码量比较大的情况。
实现弹出“hello”的弹窗。
step1:新建一个my.js文件,编写弹窗“hello”的弹窗。
step2:通过test.html文件来进行外部调用my.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style></style>
<!-- 2.内嵌式的js -->
<script>
alert('你好')
</script>
<!-- 3.外部js script 双标签 -->
<script src="my.js"></script>
</head>
<body>
<!-- 1.行内式的js,直接写到元素的内部 -->
<input type="button" value="中国" onclick="alert('北京')"
</body>
</html>
显示结果:
七、两种注释方式
JS中有两种注释方式:单行注释和多行注释。
1.单行注释 //,快捷键:Ctrl+/
2.多行注释 /*xxxxx
xxxxx*/
八、JS的输入输出语句
方法 | 说明 | 归属 |
alert(msg) | 浏览器弹出警示框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
输入代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//这是一个输入框
prompt('请输入你的年龄')
//alert 弹出警示框,输出的,展示给用户的
alert('计算的结果是')
//console,控制台输出,给程序员调试用的
console.log('我是程序员可以看到的')
</script>
</head>
<body>
</body>
</html>
显示结果:
prompt()
alert()
console.log()