JavaScript快速入门

---

一、什么是JavaScript

JavaScript 是一门跨平台、面向对象的脚本语言，控制网页行为，它能使网页可交互

JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。

---

二、JavaScript 引入方式

内部脚本:

将JS代码定义在HTML页面中

<script>
	alert("hello JS");
</script>

1. 在HTML文档中可以在任意地方，放置任意数量的script内部脚本。
2. 一般把脚本置于 body 元素的底部，可改善显示速度，因为脚本执行会拖慢显示外部脚本:将JS代码定义在外部JS文件中，然后引入到HTML页面中

外部脚本:

将JS代码定义在外部JS文件中,然后引入到HTML页面中

外部文件：demo.js

alert("hello JS");

引入外部js文件

<script src="../js/demo.js"></script>

1. 外部脚本不能包含script标签
2. script标签不能自闭合

---

三、JavaScript基础语法

书写语法

1. 区分大小写:与Java一样，变量名、函数名以及其他一切东西都是区分大小写的

2. 每行结尾的分号问有可无

3. 注释：
   

4. 大括号表示代码块

---

输出语句

window.alert("hello js~");
document.write("hello js 2~");
console.log("hello js 3");

1. 使用window.alert()写入警告框
   

2. 使用document.write()写入HTML输出
   

3. 使用console.log()写入浏览器控制台
   

---

变量

JavaScript是一门弱类型语言，变量可以存放不同类型的值

变量名需要遵循如下规则:

1. 组成字符可以是任何字母、数字、下划线(_）或美元符号($)
2. 数字不能开头
3. 建议使用驼峰命名

JavaScript用var关键字声明变量

var test ="20";
test = "轨迹";

---

数据类型

JavaScript中分为:原始类型和引用类型

使用typeof运算符可以获取数据类型

alert(typeof age );

---

运算符

基本等于java的运算符

简单介绍一下不同的地方

类型转换

---

流程控制语句

流程控制语句同java一样

---

函数

函数(方法）是被设计为执行特定任务的代码块

定义方式一:

JavaScript函数通过function关键词进行定义，语法为:

function functionName(参数1,参数二...){
	要执行的代码
}

注意:

1. 形式参数不需要类型。因为JavaScript是弱类型语言
2. 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

调用:函数名称(实际参数列表);

let result = add(1,2);

定义方式二

var functionName = function(参数列表){
	要执行的代码
}

var add = function(a,b){
	return a + b;
}

调用:Js中，函数调用可以传递任意个数参数

let result = add(1,2,3);

---

四、JavaScript常用对象

Array

注意数组简化定义格式这里java用的{}，js用的[]

数组是个对象，有对应的属性的方法

String

自定义对象

---

五、BOM

Browser Object Model 浏览器对象模型

JavaScript将浏览器的各个组成部分封装为对象

组成:

• Window:浏览器窗口对象
• Navigator:浏览器对象
• screen:屏幕对象
• History:历史记录对象
• Location:地址栏对象

比较常用的为

1. WIndow对象

2. History

3. Location

---

六、DOM

Document Object Model文档对象模型
将标记语言的各个组成部分封装为对象

• Document:整个文档对象
• Element:元素对象
• Attribute:属性对象
• Text:文本对象
• Comment:注释对象

JavaScript通过DOM能够对HTML进行操作

• 改变HTML元素的内容
• 改变HTML元素的样式(css)
• 对HTML DOM事件作出反应
• 添加和删除HTML元素
  

1. 获取Element

2. 常见HTML Element对象的使用

自行查阅相关文档
https://www.w3school.com.cn/js/js_htmldom.asp

---

七、事件监听

事件:HTML事件是发生在HTML元素上的“事情”。

比如:

• 按钮被点击
• 鼠标移动到元素之上
• 按下键盘按键

事件监听:JavaScript可以在事件被侦测到时执行代码

常见事件

自行查阅相关文档
https://www.w3school.com.cn/jsref/dom_obj_event.asp