一、一些前置知识
1、JS 和 HTML 和 CSS 之间的关系
- HTML: 网页的结构(骨)
- CSS: 网页的表现(皮)
- JavaScript: 网页的行为(魂)
HTML写出来的代码,就相当于是页面的框架,相当于是“骨”。
CSS 就是在 HTML 的基础上,进行装饰,相当于套了一层“皮”,使其页面变得好看。
但是 此时的页面,仍是一个静态的!
当我们加入了JS之后,我们就相当于给网页赋予了灵魂。
所谓的灵魂,就是指的交互性。
其目的,就是让网页不再是一个 纯粹静态的、干巴巴的、不动的一个东西了。
而是会和程序员进行一些交互。
就是我们在页面中进行操作,页面也给予我们一定的反馈。
所以,这个时候,彼此之间就会出现一个动态变换的过程
2、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> </head> <body> <!-- // 内嵌型js,主要用于课堂代码演示, js输出:alert弹出对话框(模态对话框,如果用户不点掉对话框,就无法操作页面其他内容|| --> <!-- console.log("") --> <!-- console是浏览器给JS提供的对象,就像java库提供System.out.println的打印功能 --> <script> console.log("这是一个console输出,输出在控制台,给程序员看,调试js代码的重要手段"); alert("一个弹窗"); </script> </body> </html>
🍑行内式
把js写到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> <!-- // onclick是点击后才会执行,用户点几次,就执行几次, // 行内js --> <div onclick="alert('点了')">点我试试</div> <button onclick="alert('这是你通过按钮点击的结果')">这是一个按钮</button> </body> </html>
🍑外部式
把js代码单独写到一个.js文件中,再通过script()标签来引入
🍑扩展
如果script标签中,既有src属性(外部连接js),内部又有js代码(内嵌式),执行时会发生什么呢?两个js代码都会执行吗?
那么就让我们执行下面的代码
执行结果
所有我们只能把他拆分为两个script标签,来分别执行。
🍑js的输入输出
输入:prompt——弹出一个输入框
因为我们可以接着input标签来进行输入(借助用户点击按钮来进行输入)
所以我们在实际开发中很少会用到他
输出:alert和console.log
alert(输出弹窗,我们刚才用的就是他)
console.log(我们开发中,最常用的一种输出方式(方便调试)
二、JS的基础语法
🍑数据类型
那么接下来我们重点看,这些数据类型和java有什么不同
不同点1
那么这样就引入了我们动态和静态的概念
不同点二
通过这,就引入了强弱类型的概念
那么通过对强弱和静态动态的区分,就有这样一张图
下面我们来举例说明
python 强类型+动态类型,不太支持隐式类型转换,但运行过程中类型可以发生改变,根据赋值的类型不同,变量就成了不同的类型。比如说,a本来是一个整数类型,但之后还可以把一个字符串赋值给a, a就变成了字符串类型
c是弱类型,静态类型——支持隐式类型转换,运行中类型不改变
java是强类型,静态类型——不支持隐式类型转换,类型不会发生改变
那么说到了强弱、静态和动态,那么到达哪种类型好呢?
- 业内共识是强类型比较好——检查的越严格也好,避免出粗,
- 静态类型——编译器可以做更严格的检查,代码更严谨,更容易发现问题
- 动态类型——表达能力更强,可以快速开发,但如果代码规模大了,开发团队规模也大了,就难以维护了
不同点三
一点补充
随着时间推移,关于 JS 变量的类型,出现了一个新的类型 let。
而且,现在更倾向于 使用 let 来 代替 var。
下面,我们就来看一下 let 的效果。
从效果上来看,var 和 let 的效果是一样的。
但是我们更倾向于使用 let ,为什么呢?
这是因为 var 是 旧版本(早期的设计),有很多的地方,其实是违背直觉的!
比如,下面的这个例子
得出结论: var定义的变量,并不会收到大括号的限制。【作用域不会被限制】
我们再来看下面 let 定义的变量 的表现。
var 和 let,还有很多的一些小细节。
这里就不一样列举了。
总得来 let 要比 var 更符合我们程序员的直觉。