js基础
了解javascript
1.js是什么？
1.是一种运行在客户端（浏览器） 的编程语言，实现人机交互效果。
2. 作用（做什么？）
① 网页特效 (监听用户的一些行为让网页作出对应的反馈)
② 表单验证 (针对表单数据的合法性进行判断)
③数据交互 (获取后台的数据, 渲染到前端)
④服务端编程 (node.js)
图像：
3. JavaScript的组成（有什么？）
1.ECMAScript：
① 规定了js基础语法核心知识。
比如：变量、分支语句、循环语句、对象等等。
2.Web APIs :
① DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作。
② BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等。
③权威网站： MDN
④图像：
4.JavaScript 引入（3种）
1. 内部 JavaScript（不推荐）
①直接写在html文件里，用script标签包住
②script标签写在上面
③注意： 我们将
如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。
因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。 例：
<!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>
<script>
alert('牛逼 js 666')
</script>
</body>
</html>
2.外部 JavaScript
①代码写在以.js结尾的文件里。
②通过script标签，引入到html页面中。
③注意：
1.script标签中间无需写代码，否则会被忽略！
2.外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。
④例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>03-外部js.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- 通过src引入外部js文件 -->
<script src="./js.弹出窗口.js"> </script>
</body>
</html>
3.内联 JavaScript（常用）
①代码写在标签内部 。
② 此处作为了解即可，但是后面vue框架会用这种模式。
③例：
04-内联js.html * { margin: 0; padding: 0; box-sizing: border-box; } 点击我 我就月薪过万 点击我 我就月薪过万5. JavaScript 注释
1.单行注释
①符号：//
②作用：//右边这一行的代码会被忽略
③快捷键：ctrl + /
④一次只能注释一行，可以重复注释
2.多行注释（常见）
①符号：/* */
②作用：在/* 和 */ 之间的所有内容都会被忽略
③快捷键：shift + alt + A
④可以任意换行，多少行都可以
⑤例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>05-js注释.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// ctrl + / " // "
// shift+alt+a " /**/ "
// alert("呵呵你好")
</script>
</body>
</html>
6.JavaScript 结束符
①代表语句结束 ( 英文分号 ; )
②可写可不写
③换行符（回车键）会被识别成结束符 ,所以一个完整的语句，不要手动换行 ，
为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.） ④例：
<script> <script>
alert(1); ————> alert(1)
alert(2); ————> alert(2)
alert(3); alert(3)
<script> <script>
7. JavaScript 输入输出
1.语法:
①人和计算机打交道的规则约定。
②用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户 ，
这便是一次输入和输出的过程。
1.输出语法
1.document.write('用户的姓名')
①向body内输出内容
②如果输出的内容写的是标签，也会被解析成网页元素
2.alert('弹出有一个窗口')
①页面弹出警告对话框
3.console.log('控制台打印') （常用)重要
①控制台输出语法，程序员调试使用
2.输入语法
1.prompt('请输入你的姓名')
①显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。 例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>07-输入和输出.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 直接在 body标签中书写内容
// document.write("通过js加进去的内容")
// 推荐 控制台 log
// console.log('控制台打印1');
// 输入
// prompt("请输入你的姓名")
// // 把用户输入的姓名 写在网页中
// document.write("用户的姓名")
// 获取 用户的输入的文字内容
// 可以自定义名称的一个变量(不要加引号) = 用户输入的内容
// 不能加引号 错误 'username' = prompt('请输入你的姓名');
// username = prompt('请输入你的姓名');
// username 就是一个盒子 里面装着 用户输入的姓名
// 输出
// document.write("用户的姓名")
// document.write('username'); // username 能不能加引号
// 获取用户的名称
username = prompt("请输入你的姓名");
// 打印出来 用户的名称
document.write(username);
alert(username);
console.log(username);
</script>
</body>
</html>
