JavaScript简介&引入方式（JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听）-阿里云开发者社区

简介：什么是JavaScript

JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互
W3C标准：网页主要由三部分组成

结构：HTML
表现：CSS
行为：JavaScript

JavaScript和Java是完全不同的语言，不论是概念还是设计，但是语法基础类似
JavaScript（简称JS）在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准
ECMAScript 6（ES6）是最新的JavaScript版本（发布于2015年）

一、JavaScript的引入方式

1.内部脚本：将JS代码定义在HTML页面中

在HTML中，JavaScript代码必须位于<script>与</script>标签之间

<script>
  alert("hello JavaScript!");
</script>

注意：
在HTML文档中可以在任意地方，放置任意数量的<script>
一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示
2.外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
外部文件：test.js：alert("hello JavaScript!");
引入外部js文件：<script src = "../js/test.js"></script>
注意：

外部脚本不能包含<script>标签
<script>标签不能自闭合

二、JavaScript基础语法

2.1 书写语法与输出语句

书写语法：

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：

单行注释：//注释内容
多行注释：/* 注释内容 */

大括号表示代码块

输出语句：

使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台

2.2 变量与数据类型

变量：

JavaScript中用var关键字（variable的缩写）来声明变量
JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则：

组成字符可以是任何字母、数字】下划线（_）或美元符（$）
数字不能开头
建议使用驼峰命名法

ECMScript6新增了let关键字来定义变量，它的用法类似于var，但是所声明的变量只在let关键字所在的代码块内有效，且不允许重复声明
ECMScript6新增了const关键字，用来声明一个只读的常量，一旦声明。常量的值就不能改变

数据类型：
JavaScript中分为：原始类型和引用类型
5种原始类型：

number：数字（整数、小数、NaN（Not a Number））
string：字符、字符串、单双引皆可
boolean：布尔（true、false）
null对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined

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

2.3 运算符

一元运算符：++，-
算术运算符：+，-，*，/，%
赋值运算符：=，+，
关系运算符：>，<，>=，<=，!=，== ， = ===…
逻辑运算符：&&，||，！
三元运算符：条件表达式？true_value:false_value

2.3.1 == 与 === 的区别

== ：等于

1.判断类型是否一样，如果不一样，则进行类型转换
2.比较其值

===：全等于

1.判断类型是否一样，如果不一样，直接返回fa1se
2.再去比较其值

2.3.2 类型转换

其它类型转为number：

1.string转为number：按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN,一般使用parseInt()进行转换。
2.boolean转为number：true转为1，false转为0。

其它类型转为boolean：
1.number：0和NaN转为false,其他的数字转为true
2.string：空字符串转为false,其他的字符串转为true
3.null：false
4.undefined：false

2.4 流程控制语句与函数

流程控制语句
if：

var count 3;
if(count == 3){
  alert(count);
}

switch:

var num 3;
switch (num){
  case 1:{
    alert("星期一")；
    break;
  }
  case 2:{
    alert("星期二")；
    break;
  }
  case 3:{
    alert("星期三")；
    break;
  }
  case 4:{
    alert("星期四")；
    break;
  }
  case 5:{
    alert("星期五")；
    break;
  }
  case 6:{
    alert("星期六")；
    break;
  }
  case 7:{
    alert("星期日")；
    break;
  }
  default:{
    alert("输入错误！");
    break;
  }
}

for：

var sum = 0;
for(1et i = 1;i <= 100;1++){
  sum += i;
}
alert(sum);

while：

var sum = 0;
var i = 1;
while (i <= 100){
  sum += i;
  i++;
}
alert(sum);

do.…while：

var sum = 0;
var i = 1;
do {
  sum += 1:
  i++;
}
while (i <= 100);
alert(sum);

函数（方法）
方式一：
是被设计为执行特定任务的代码块
定义：JavaScript函数通过function关键词进行定义，语法为：

function functionName(参数1，参数2...) {
  //要执行的代码
}

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

function add(a,b) {
  return a b;
}

调用：函数名称（实际参数列表）；

let result add(1,2);

方式二：

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

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

调用：JS中，函数调用可以传递任意个数参数

let result add(1,2,3);

三、JavaScript对象

3.1Array

JavaScript Array对象用于定义数组

定义:

var 变量名 = new Array(元素列表);//方式一
var arr new Array(1,2,3);

var 变量名 = [元素列表]；//方式二
var arr = [1,2,3];

访问：

arr[索引] = 值；
arr[0]= 1;

注意：JS数组类似Java集合，长度，类型都可变（变长变类型）

属性：

length：数组中元素的个数

var arr4 = [1,2,3];
for (let i = 0;i <= arr4.length;i++){
  alert(arr4[i]);
}

方法：

push：添加

var arr5 = [1,2,3];
arr5.push(10);
alert(arr5);

splice：删除

var arr6 = [1,2,3];
arr6.splice(0，1);//表示从0下标开始删，删除1个元素
alert(arr6);

3.2 String

定义：

var 变量名 = new String(s);//方式一
var str = new String("hello");
var 变量名 = s;//方式二
var str = "hello";

3.3 自定义对象

格式：

var 对象名称 = {
  属性名称1：属性值1
  属性名称2：属性值2，
  ...
  函数名称：function(形参列表){}
  ...
  };

var person = {
  name:"zhangsan",
  age:23,
  eat:function {
    alert("干饭~")；
  }
};

四、BOM

Browser Object Model浏览器对象模型
JavaScript将浏览器的各个组成部分封装为对象
组成：

4.1 Window:浏览器窗口对象

获取：直接使用window,其中window.可以省略

window.alert("abc");

属性：获取其他BOM对象

confirm：点击确定按纽，返回true,点击取消按钮，返回false

var flag=confirm("确认别除？")；
alert(flag);
if(flag){
  //删除逻辑
}

setTimeout(function,毫秒值)：在一定的时间间隔后执行一个function,只执行一次

setTimeout(function()
  alert("hehe");
},3000);

setInterval(function,毫秒值)：在一定的时间间隔后执行一个function,循环执行

setInterval(function()
  alert("hehe");
},3000);

4.4 History:历史记录对象

History：历史记录
获取：使用window.history获取，其中window可省略

window.history.方法();
history.方法();

方法：

4.5 Location:地址栏对象

History：历史记录
获取：使用window.location获取，其中window可省略

window.location.方法();
location.方法();

属性：

五、DOM

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

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

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

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

DOM是W3C(万维网联盟)的标准
DOM定义了访问HTML和XML文档的标准：
W3CDOM标准被分为3个不同的部分：

1.核心DOM:针对任何结构化文档的标准模型

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

2.XML DOM:针对XML文档的标准模型
3.HTML DOM:针对HTML文档的标准模型

Image:<img>
Button <input type=button'>

5.1 获取Element对象

Element:元素对象
获取：使用Document对象的方法来获取

1.getElementByld:根据id属性值获取，返回一个Element对象

var img = document.getElementById("Light");
alert(img);

2.getElementsByTagName:根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName("div");
alert(divs.length);

3.getElementsByName:根据name属性值获取，返回Element对象数组

var hobbys = document.getELementsByName("hobby");
for (let i = 0;i < hobbys.length;i++){
  alert(hobbys[i]);
}

4.getElementsByClassName:根据class属性值获取，返回Element对象数组

var clss = document.getElementsByelassName("cls");
for (let i = 0;i < clss.length;i++){
  alert(clss[i]);
}

5.2 常见HTML Element对象的使用

<img>标签的src属性：

var img = document.getElementById("Light");
img.src = "../imgs/on.gif"

style:设置元素css样式

var divs = document.getElementsByTagName("div");
for (let i = 0;i < divs.length;i++){
  divs[i].style.color = 'red';
}

innerHTML:设置元素内容

var divs = document.getElementsByTagName("div");
for (let i = 0;i < divs.length;i++){
  divs[i].innerHTML = "hello!";
}

checked:选中对象

var hobbys = document.getELementsByName("hobby");
for (let i = 0;i < hobbys.length;i++){
  hobbys[i].checked = true;
}

六、事件监听

事件：HTML事件是发生在HTML元素上的“事情”。比如：

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

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

6.1 事件绑定

事件绑定有两种方式：

方式一：通过HTML标签中的事件属性进行绑定

<input type="button"onclick='on()'>
function on(){
  alert("我被点了")：
}

方式二：通过DOM元素属性绑定（推荐）

<input type="button"id="btn">
document.getElementByld("btn").onclick function(){
  alert("我被点了");
}

6.2 常见事件

参考HTML教程：https://www.w3school.com.cn/jsref/dom_obj_event.asp

JavaScript简介&引入方式（JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听）

简介：什么是JavaScript

一、JavaScript的引入方式

二、JavaScript基础语法

2.1 书写语法与输出语句

2.2 变量与数据类型

2.3 运算符

2.3.1 == 与 === 的区别

2.3.2 类型转换

2.4 流程控制语句与函数

三、JavaScript对象

3.1Array

3.2 String

3.3 自定义对象

四、BOM

4.1 Window:浏览器窗口对象

4.4 History:历史记录对象

4.5 Location:地址栏对象

五、DOM

5.1 获取Element对象

5.2 常见HTML Element对象的使用

六、事件监听

6.1 事件绑定

6.2 常见事件

热门文章

最新文章

相关课程

相关电子书

相关实验场景