本专栏内容为：前端专栏 记录学习前端，分为若干个子专栏，html js css vue等
💓博主csdn个人主页：小小unicorn
⏩专栏分类：js专栏
🚚代码仓库：小小unicorn的代码仓库🚚
🌹🌹🌹关注我带你学习编程知识
一
- JavaScript
- JavaScript(是什么)
- 作用（做什么）
- JavaScript的组成(有什么)
- ECMAScript
- Web APIs:
- 初步体验JavaScript
- js书写位置
- 内部JavaScript
- 外部JavaScript
- 内联JavaScript
- 注释的书写
- 单行注释：
- 多行注释
- 结束符
- 输入输出语句
- 输出
- 语法1：
- 语法2：
- 语法3：
- 输入语法
- 字面量
- 总结：
- JavaScript是什么
- JavaScript书写位置
- JavaScript的注释
- JavaScript的结束符
- JavaScript的输入输出语句
JavaScript
JavaScript(是什么)
JavaScript是一种运行在客户端(浏览器)的编程语言，实现人机交互
作用（做什么）
- 网页特效（监听用户的一些行为让网页作出对应的反馈）
- 表单验证（针对表单数据的合法性进行判断）
- 数据交互（获取后台的数据，渲染到前端）
- 服务端编程（node.js）
JavaScript的组成(有什么)
ECMAScript
规定了js基础语法核心
- 例如：变量，分支语句，循环语句，对象等等、
Web APIs:
- DOM:操作文档，比如对页面元素进行移动，大小，添加删除等操作
- BOM：操作浏览器，比如页面弹窗，检测窗口宽度，存放数据到浏览器等等
初步体验JavaScript
接下来我们可以初步体验一下JavaScript:
有下面这么个案例：
让屏幕上出现四个按钮，当鼠标点击到这个按钮的时候，这个按钮就变成粉色，其他按钮不变。我们代码实现一下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.pink{background-color: pink;}</style>
</head>
<body><button class="pink">按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><script>//捕捉四个按钮let bts=document.querySelectorAll('button')//用for循环来控制点击事件for(let i=0;i<bts.length;i++){bts[i].addEventListener('click',function(){document.querySelector('.pink').className=''this.className='pink'})}</script>
</body>
</html>
运行一下程序：
至于这个程序到底怎么解释，等学到后面就懂了。但还是要强调一下，在这段代码中可以分为三个部分:
分别是css,html,以及js
js书写位置
内部JavaScript
直接写在html文件里面，用Script标签包住
规范：Script标签写在</body> 上面
拓展：alert(“你好~js”)页面弹出警示框
代码展示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//我是内部的js文件alert("你好~js")alert('我是内部的js文件')</script>
</body>
</html>
运行后：
外部JavaScript
代码写在.js结尾的文件里
语法：通过script标签，引入到html页面中
代码展示：
首先在我们的代码目录下新创个目录，然后在该目录下创建一个my.js文件：
打开我们的js文件，将里面写上一下代码：
alert('我是外部的js文件')
然后在我们的html文件中引入我们的js文件：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="./js/my.js">//中间不允许写内容，写了也会被忽略// 单行注释 clt+//* shift + alt + a */</script>
</body>
</html>
运行结果：
内联JavaScript
代码写在标签内部
注意：此处了解即可，但是后面vue框架会用这种形式
<body><button onclick="alert('CSDN~')">点击我月薪过万</button>
</body>
注释的书写
单行注释：
- 符号：
// - 作用：
//右边这一行的代码会被忽略 - 快捷键：
clt+/
多行注释
- 符号：
/* */ - 作用： 在
/*和*/之间的所有内容都会被忽略 - 快捷键：
shift+alt+a
结束符
- 作用：使用英文的
；，代表语句结束 - 实际情况：实际开发中，可写可不写，浏览器会自动推断语句的结束位置
- 现状：在实际开发中，越来越多的人主张，书写JavaScript代码实省略结束符
- 约定：为了风格统一，结束符要么每句都写，要么都不写（按照团队要求）
输入输出语句
输出和输入也可理解为人和计算机的交互，用户通过键盘，鼠标等向计算机输入信息，计算机处理后再展示给用户，这便是依次输入和输出的过程
输出
语法1：
document.write("要输出的内容")
作用：向body内输出内容
注意：如果输出的内容写的是标签，也会被解析成网页元素
代码展示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//输出语句：// 第一种方式// 输出document.write("hello csdn~")// 也可以输出标签document.write('<h1>一级标题</h1>')</script>
</body>
</html>
运行结果：
语法2：
alert("要输出的内容")
作用：页面弹出警告对话框
语法3：
console.log("控制台打印")
作用：控制台输出语法，程序员用来调试用的
代码展示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//输出语句：// 第一种方式// 输出document.write("hello csdn~")// 也可以输出标签document.write('<h1>一级标题</h1>')// 2.控制台输出console.log("调试一下代码")</script>
</body>
</html>
输入语法
prompt("请输入您的年龄")
作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
代码展示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//输入语句prompt("请输入您的年龄：")</script>
</body>
</html>
字面量
在计算机中，字面量是计算机中描述 事/物
比如：
- 我们工资是：
100000此时100000就是数字字面量 'CSDN'字符串字面量[]对象字面量
总结：
JavaScript是什么
JavaScript是一门编程语言，可以实现很多的网页交互效果
JavaScript书写位置
- 内部
- 外部
- 内联
JavaScript的注释
- 单行注释
- 多行注释
JavaScript的结束符
分号：可以加也可以不加，根据制作团队约定
JavaScript的输入输出语句
- 输入：prompt()
- 输出: alert() document.write() console.log()