JS基础第一天
一、JS介绍
问：js是什么？
- 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
1.js作用
- 网页特效、表单验证、数据交互、服务端编程（node.js）
2.js组成
- ECMAScript:js代码语法的标准 一种规范，js语言基础
- Web Apls（分为两部分：DOM 与 BOM）
- DOM：操作文档 页面标签
- BOM：操作浏览器 浏览器刷新
- 其中DOM属于BOM
二、JS的引入方式
1.内联式（不推荐使用）
2.内部式
-
直接写在HTML里面，用script包裹内容
-
规范：写在结束标签上
-
<!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> <!-- 内部js 用<script>标签包裹内容 --> <!-- 书写规范 写在结束标签</body>上面 --> <!-- alert为弹窗代码 --> <script>alert('明天拿高薪，测试js')</script> </body> </html> -
2.外部式（工作中最常用）
-
代码写在以**.js**结尾的文件里面
-
通过script标签引入到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>标签无需再包裹内容 线是引用外部的js 不能同时引用内部js 不然会冲突 无效果 --> <script src="./3.外部js代码.js"></script> </body> </html> -
-
注意：标签中间无需加入js内容，直接引用外部js即可
二、JS注释
1.单行注释
//（快捷键 Ctrl+/）
2.多行注释
/* .... */ （快捷键 Ctrl+shift+A）
三、结束符
1.英文状态下的； 一行代码结束的时候加上
2.加不加都可以
3.工作中有工具统一自动帮我们做格式化
四、JS输入和输出语法（重点）
1.什么是语法
- 人与计算机打交道的语法
2.输入语法
-
prompt('请输入您的姓名')
-
xxxx=prompt('请输入您的姓名')
- xxxx表示可以定义名称的一个变量（可以是阐释用户输入的内容）=用户输入的内容
- 弹出一个对话框 获取用户的输入
- 注意：xxxx不能加引号
- 例如：userName=prompt('请输入您的姓名')
-
<!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> <!-- // 直接在 body标签中书写内容 // document.write("通过js加进去的内容") // 推荐 控制台 log // console.log('控制台打印1'); // 输入 // prompt("请输入你的姓名") // // 把用户输入的姓名 写在网页中 // document.write("用户的姓名") // 获取 用户的输入的文字内容 // 可以自定义名称的一个变量(不要加引号) = 用户输入的内容 // 不能加引号 错误 'username' = prompt('请输入你的姓名'); // username = prompt('请输入你的姓名'); // username 就是一个盒子 里面装着 用户输入的姓名 // 输出 // document.write("用户的姓名") // document.write('username'); // username 不能加引号 --> <!-- <script> username=prompt('请输入您的姓名'); document.write(username); alert(username); console.log(username); </script> --> <!-- 输入标签 prompt --> <!-- 多个输入 --> <script> username=prompt('请输入您的姓名'); address=prompt('请输入您的地址'); music=prompt('请输入您的音乐'); sports=prompt('请输入您的运动'); console.log(username + address + music + sports); </script> <!-- <script> // 1 你叫什么名字 username = prompt('你叫什么名字'); // 2 你家住哪里 address = prompt('你家住哪里'); // 3 你喜欢吃什么 foods = prompt('你喜欢吃什么'); // 4 你喜欢自己一个听音乐吗 music = prompt('你喜欢自己一个听音乐吗'); // 5 你喜欢运动 sports = prompt('你喜欢运动'); // 输出一下 到网页中 // console.log(username); // console.log(address); // console.log(foods); // console.log(music); // console.log(sports); // 能不能在一行上直接输出 不要换行 // 使用 一个 + 表示连接 console.log(username + address + foods + music + sports); </script> --> </body> </html>
3.输出语法
-
输出语法有三种
- document.write('今天进步一点点')
- alert（'弹出有一个窗口'）
- console.log('在控制台中输出的内容') (最为常用)
-
document.write('今天进步一点点')
- 输出向body输入内容文字；
- 如果输出的是标签，网页输出的是网页元素
<!-- 输出 --> <!-- document 向body输入内容 --> <script>document.write('超帅的')</script> <script>document.write('<h1>hahah</h1>')</script> <script>document.write('今天学会了吗')</script> -
alert（'弹出有一个窗口'）
-
<!-- alert输出 弹窗 --> <script>alert('月薪过万')</script> <script>alert('月薪过万')</script> -
-
-
-
console.log('在控制台中输出的内容') 常用
-
<!-- 常用的输出语法 --> <!-- console 控制台打印 --> <script>console.log('控制台打印')</script> <script>console.log('控制台打印')</script> <script>console.log('今天学会了吗')</script> -
-
-
