前端学习-JavaScript基本介绍（十九）
目录
前言
JavaScript基本介绍
JavaScript是什么
作用
JavaScript的组成
JavaScript+HTML5+CSS3编程初体验
JavaScript书写位置
目标
内部JavaScript
规范
拓展
注意事项
外部JavaScript
语法
注意事项
内联JavaScript
语法
注意
JavaScript怎么写
单行注释
块注释
JavaScript输入输出语法
目标
什么是语法
输出语法
语法1
作用
向body中输出内容
注意
语法2
作用
语法3
作用
输入语法
语法
作用
JavaScript代码执行顺序
字面量
总结
前言
ps：考完四级了，继续更新，不停不停了
JavaScript基本介绍
JavaScript是什么
是一种运行在客户端(浏览器)的编程语言，实现人机交互效果
作用
网页特效(监听用户的一些行为让网页作出对应的反馈)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台的数据，渲染到前端)
服务端编程(node.js)
JavaScript的组成
ECMAScript:规定了js基础语法核心知识，比如变量，分支语句，循环语句，对象等
Web APIs:
DOM操作文档，比如对页面元素进行移动，大小，添加删除等操作
BOM操作浏览器，比如页面弹窗，检测窗口宽度，存储数据到浏览器等等
权威网站：MDN Web Docs
JavaScript+HTML5+CSS3编程初体验
<!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: blue;
}
</style>
</head>
<body>
<button class="pink">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
let bts = document.querySelectorAll('button')
for (let i = 0; i < bts.length; i++) {
bts[i].addEventListener('click', function () {
document.querySelector('.pink').className = ' '
this.className = 'pink'
})
}
</script>
</body>
</html>JavaScript书写位置
目标
知道如何向页面添加JavaScript
内部JavaScript
直接写在html文件里，用script标签包住
规范
script标签写在</body>上面
拓展
alert('你好,js')页面弹出警告框
注意事项
我们将 <script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML如果先加载的JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
外部JavaScript
代码写在以.js结尾的文件里
语法
通过script标签，引入到html页面中
注意事项
1.script标签中间无需写代码，否则会被忽略!
2.外部avaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。
内联JavaScript
代码写在标签内部
语法
注意
此处作为了解即可，但是后面的vue框架会使用这种模式
JavaScript怎么写
单行注释
符号：//
作用：//右边的这一行代码会被忽略
快捷键：ctrl+/
块注释
符号：/* */
作用：在/和/之间的所有内容都会被忽略
快捷键：shift+alt+a
结束符作用:使用英文的;代表语句结束实际情况: 实际开发中，可写可不写，浏览器(avaScript 引擎) 可以自动推断语句的结束位置现状:在实际开发中，越来越多的人主张，书写JavaScript代码时省略结束符约定:为了风格统一，结束符要么每句都写，要么每句都不写(按照团队要求.)
JavaScript输入输出语法
目标
能写出常见的JavaScript输入输出语法
什么是语法
人和计算机打交道的规则约定
我们要按照这个规则去写比如:你吃了吗?我们程序员需要操控计算机，需要计算机能看懂
输出语法
语法1
document.write('输出内容')
作用
向body中输出内容
注意
如果输出的内容为标签，也会被解析为网页元素
语法2
alert('要出的内容')
作用
页面弹出警告对话框
语法3
console.log('控制台打印')
作用
控制台输出语法，程序员调试使用
输入语法
语法
prompt('请输入您的姓名：')
作用
显示一个对话框，对话框中包括一条文字信息，用来提示用户输入文本
JavaScript代码执行顺序
按HTML文档流顺序执行JavaScript代码alert()和 prompt()它们会跳过页面渲染先被执行(目前作为了解，后期讲解详细执行过程)
字面量
目标:能说出什么是字面量在计算机科学中，字面量(literal)是在计算机中描述事物
比如:我们工资是:1000此时1000 就是数字字面量'你好'字符串字面量还有接下来我们学的[数组字面量{} 对象字面量 等等
总结
踏上取经路，比抵达灵山更为重要