简介
JavaScript (简称 JS)
是一个脚本语言, 通过解释器运行
主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行
JavaScript 的能做的事情:
网页开发(更复杂的特效和用户交互)
网页游戏开发
服务器开发(node.js)
桌面程序开发(Electron, VSCode 就是这么来的)
手机 app 开发
JavaScript 和 HTML 和 CSS 之间的关系
HTML: 网页的结构(骨)
CSS: 网页的表现(皮)
JavaScript: 网页的行为(魂)
如何进行JS编写
1.关联在HTML中执行
1.内部方式管理<script>js语句</script>
2.外部方式引入<script src="js资源的url"></script>
输入输出语句
alert(message) 弹窗消息/js 中的函数调用过程
window.alert(message) / window是可以省略的
window是个对象(指向(refer to)一个对象),window是一个全局存在的对象
window.alert(…)执行 window 对象下的 alert 方法(函数)
prompt(message) 弹出揄入框,并得到用户输入的值
console.log(message) 在控制台打印一条日志
console.error (message) 在控制台打印一条错误日志
document.write 字段是标准的 JavaScript 命令,用来向页面写入输出。
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
JS中的变量的数据类型
number: 数字. 不区分整数和小数.
boolean: true 真, false 假.
string: 字符串类型.
undefined: 只有唯一的值 undefined. 表示未定义的值.
null: 只有唯一的值 null. 表示空值.
数据有类型,变量无类型
js中的变量必须先定义,然后才能使用
变量 (variable)是对内存上某段空间的逻辑抽象
var x=5;
赋值操作:把等号右侧的值,装入等号左侧的内存空间
carname="Volvo";
undefined/null都是针对一种不存在的抽象,但分成了两个undefined(未定义)、null(空)
a == b 不要求类型一致
a === b 严格相等判断,必须要求a和b的类型一样,并且a的值等于b的值
数组
a.push()尾插
a.unshift()头插
a.pop()尾删
a.sort() 排序
类似js中的变量是无类型的,js的数组的元素也是无类型的
把js 中的数组想象成 java 中的ArrayList<Object>
就可以
var a = [1,2,3,"hello","world",true,false,[1,2,3][1,2,3]]
动态类型语言、脚本语言、解释性语言、胶水语言
弱类型浯言
js. python. perl. php …
强类型语言
静态类型语言、编译性语言
c、c++、java.
关于赋值
通常把这种类别的函数叫做回调函数
(callback)
Java
空间:以变量、数组元素] = 值[字面量、变量、表达式、方法调用、new操作]
要求:左边的类型 和 石边的类型是同一个类型,除非以下几种特例:
- 左右两边都是基本数值类型(byte、 short int. long、 float. double、char)之间可以互相转,有些转换是自然的,有些转换是需要强制类型转换的
2.左边的引用类型,右边是引用所指向的对象时 List I = new ArrayList0:要求,左边两边的引用处于类的继承关系层次上
有些转换是自然的(向上转型) ,有些转换是需要强制类型转换的(向下转型)
3.左边是包装类、右边是基本类型;反之怡然
Integer i =1; 1/ 隐含了自动装箱
int a = new Integer(1);1/ 隐含了自动拆箱
函数 function
1 是js 中第一公民(完全就是一种数据类型,可以赋值给其他变量,甚至保存在数组中)。
2. 函数可以定义在其他函数中。
3. 定义时,没有类型约束,所以返回值类型没有,形参类型没有。
4. 参数的灵活性。
document下的常见方法:
querySelector(选择器字符串) =>文档中第一个符合选择器规则的元素
query:查询 selector:选择器
JavaScript 的对象和 Java 的对象的区别
- JavaScript 没有 “类” 的概念
- JavaScript 对象不区分 “属性” 和 “方法”
- JavaScript 对象没有 private / public 等访问控制机制
- JavaScript 对象没有 “继承”
- JavaScript 没有 “多态”
WebAPI 背景知识
JS 分成三个大的部分
ECMAScript: 基础语法部分
DOM API: 操作页面结构
BOM API: 操作浏览器
WebAPI 包含了 DOM + BOM.
DOM 全称为 Document Object Model.
事件驱动
明确发生某件特殊含义的行为时,执行某个动作事件。
事件三要素
- 事件源: 哪个元素触发的
- 事件类型: 是点击, 选中, 还是修改?
- 事件处理程序: 进一步如何处理. 往往是一个回调函数.
<button id="btn">点我一下</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
alert("hello world");
}
</script>