灯塔：JavaScript

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium,万维网联盟）负责制定。

三个组成部分：

HTML：负责网页的基本结构（页面元素和内容）。

CSS：负责网页的表现效果（页面的元素外观、位置等页面样式，如：颜色、大小等）

JavaScript：负责网页的行为（交互效果）。

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页的行为的，它能使网页可交互

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

JavaScript在1995年由Brendan Erich发明，并于1997年成ECMA标准。

ECMAScript 6（ES6）是最新的JavaScript版本（发布于2015年）。

JavaScript的引入方式：

内部脚本：

将JS代码定义在HTML页面中

• JavaScript代码必须位于<script></script>标签之间

• 在HTML文档中，可以在任意地方，放置任意数量的<script>

• 一般会把脚本置于<body>元素的底部，可改善显示速度

javascript"><script>alter("Hello JavaScript")
</script>

外部脚本：

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

• 外部JS文件中，只包括JS代码，不包括<script>标签

• <script>标签不能自闭合

javascript"><script scr="js//demo.js"></script>

javascript">alter("Hello JavaScript")

JS的基础语法

书写语法：

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

每行结尾的分号可有可无

注释：

• 单行注释：// 注释内容

• 多行注释:/*注释内容*/

大括号表示代码块

javascript">//判断
if(count==3){alert(count);
}

输出语句：

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

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

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

javascript"><script>window.alert("Hello JavaScript");//浏览器弹出警告框document.write("Hello JavaScript");//写入HTML，在浏览器展示console.log("Hello JavaScript" );//写入浏览器控制台
</script>

变量

• JavaScript中用var关键字(variable的缩写)来声明变量

特点：①var的作用域比较大，全局变量

②可以重复定义

ECMAScrpit 6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。

ECMAScript 6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

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

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

› 组成字符可以是任何字母、数字、下划线（_）或者美元符号（$）

› 数字不能开头

› 建议使用驼峰命名

javascript">var a=20;
a="张三";

数据类型：

JavaScript中分为：原始类型和因与类型。

原始类型：

• number：数字（整数、小数、NaN（Not a Number））

• string :字符串、单双引皆可

• boolean:布尔。true、false

• null：对象为空

• undefined ：当声明的变量未初始化时，该变量的默认值是undefined

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

javascript">var a=20;alert(typeof a);

运算符：

==与===

==会进行类型转换，===不会进行类型转换

javascript">var a=10;
alert(a=="10");//true
alert(a==="10");//false
alert(a===10);//true

流程控制语句：

javascript">if...else  if...else...
switch
for
while
do...while

函数：

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

定义方法一：JavaScript函数是通过function关键字进行定义，语法为：

javascript">function functionName(参数1，参数2...){//要执行的代码
}//例如
function add(a,b){return a+b;
}

注意：

形式参数不需要类型。因为JavaScript示弱类型语言

返回值也不需要定义类型，可以在函数内部直接使用return返回即可

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

javascript">var result=add(10,20);
alert(result);

定义方法二：

javascript">var functionName=function(参数1,参数2){//要实行的代码
}

JS对象：

Array

•JavaScript中Array对象用于定义数组

特点：长度可变类型可变

• 定义

javascript">var 变量名=new Array(元素列表)；//方式一
var arr=[1,2,3,4];

javascript">var 变量名=[元素列表];//方法二
var arr=[1,2,3,4];

• 访问

javascript">arr[索引]=值;
arr[10]="hello";

注意：JavaScript中的数组相当于Java中的集合，数组的长度可变，而JavaScript是弱类型，所以可以储存任意类型的数据。

属性：

属性	描述
length	设置或返回数组中的元素的数量

方法：

方法	描述
forEach（）	遍历数组中的每一个有值的元素，并调用一次传入的数
push（）	将新元素添加到数组的末尾，并返回新的长度
splice（）	从数组中删除元素

javascript">//forEach：遍历数组中的所有有值元素
var arr=[1,2,3,4];
arr.forEach(function(e)){console.log(e);
}//ES6 箭头函数：（...）=>{...}--简化函数的定义
arr.forEach(e)=>{console.log(e);
}

箭头函数（ES6）：是用来简化函数定于语法的。具体形式为：

javascript">(...)=>(...)

如果需要给箭头函数起名字：

javascript">var xxx=(...)=>{...}

String

String字符串对象创建方式有两种：

javascript">var 变量名 =new String("...");//方式一
var str=new String(""Hello String);var 变量名="...";//方式二
var str="Hello String";
var str ='Hello String';

属性：

属性	描述
length	字符串的长度

方法：

方法	描述
charAt（）	返回在指定位置的字符
indexOf（）	检索字符串
trim（）	去除字符串两边的空格
substring（）	提取字符串中两个指定的索引号之间的字符（含头不含尾）

JavaScript自定义对象

定义格式：

javascript">var 对象名={属性名1：属性值1,属性名2：属性值2,属性名3：属性值3,
函数名称：function（形参列表 ）{}
};//例
var user={name:"Tom",age:20,gender="male",eat:function(){alert("用膳。。。");}
};

调用格式：

javascript">对象名.属性名;
consen.log(user.name);

javascript">对象名.函数名();
user.eat();

JSON

概念：JavaScript Object Natation，JavaScript对象标记法。

JSON是通过JavaScript对象标记法书写的文本。

由于其语法简单，层次结构鲜明，先多用于作为数据载体，在网络中进行数据传输。

基础语法：

定义：

javascript">var 变量名='{"key1":value1,"key2":value2}';
var userStr='{"name":"Jerry","age":18},"addr":["北京","上海","西安"]';

value的数据类型为：

• 数字（整数或浮点数）

• 字符串（在双引号中）

• 逻辑值（true或false）

• 数组（在方括号中）

• 对象（在花括号中）

• null

JSON字符串转为JS对象

javascript">var jsObject=JSON.pause(userStr);

JS对象转为JSON字符串

javascript">var jsonStr=JSON.stringify(jsObject);

javascript">var jsonstr='{"name":"Tom","age":20,"addr":["北京","上海","西安"]}';
//json字符串-->js对象
var obj=JSON.pause(jsonstr);
alert(obj.name);
//js对象-->json字符串
alert(JSON.stringify(obj));

BOM

概念：Browser Object Model浏览器对象模型，允许JavaScript与浏览器的各个组成部分封装为对象。

组成：

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

Window：

javascript">//获取
window.alert("hello javascript");
alert("hello javascript");//方法
confirm -对话框--确认：true，取消：false
var flag=confirm("您确定删除该条记录吗？");
alert(flag);//定时器 - setInterval -- 周期性的执行某一个函数
var i=0;
setInterval(function(){i++;console.log("定时器执行了"+i+"次");
},2000);//定时器 - setTimeout -- 延迟指定时间执行一次
setTimeout(function(){alert("JS");
},3000);

Location:

DOM

<html><head><title>DOM</title></head><body><h1>DOM对象标题</h1><a href="hppts://itcast.cn">传智教育</a></body>
</html>

DOM是WC的标准，定义了访问HTML的标准，分为3个不同的部分：

1.Core DOM -所以文档类型的标准模型

Document：整个文档的对象

Element：元素的对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

2.XML DOM-HTML 文档的标准模型

Image：<img>

Button:<input type='button'>

HTML中的Element对象可以通过Document对象获取，而Document 对象是通过window对象获取的。

Document的对象中提供了一下获取Element元素对象的函数：

1.根据id属性值获取，返回单个的Element对象

javascript">var h1=document.getElementById('h1');

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

javascript">avr divs =document.getElementsByTagName('div');

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

javascript">var hobbys=document.getElementsByName('hobby');

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

javascript">var class=document.getElementsByClassName('cls');

事件监听

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

按钮被点击

鼠标移动到元素上

按下键盘按键

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

JS事件监听

事件绑定：

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

<input type="button" onclick="on()" value="按钮1"><script>fuction on(){alert('我被点击了！');}
</script>

方法二：通过DOM元素属性绑定

<input type="button" id= "btn" value="按钮2"><script>document.getElementById('btn').onclick=function(){alert('我被点击了');}
</script>

常见事件

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 灯泡 --><img  id="light"src="D:\QQ文件\QQ20240918-175448.png" alt="" ><br><input  id="" type="button" value="点亮" onclick="on()"> <input id="" type="button" value="熄灭" onclick="off()"><br><!-- 文本框 --><input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()"><br><!-- 选项框 --><input type="checkbox"  name="hobby"> 电影 <input type="checkbox"  name="hobby"> 旅游 <input type="checkbox"   name="hobby"> 游戏<br><input type="button" value="全选" onclick="allcheck()"><input type="button" value="反选" onclick="nullcheck()" >
</body><script>// 点亮灯泡function on(){var img=document.getElementById("light");img.src="D:\\QQ文件\\QQ20240918-175529.png";}// 熄灭灯泡function off(){var img=document.getElementById("light");img.src="D:\\QQ文件\\QQ20240918-175448.png";}// 转大写function upper(){// 获取输入框元素var input=document.getElementById("name");input.value=input.value.toUpperCase();}// 转小写function lower(){//获取输入框元素var input=document.getElementById("name");input.value=input.value.toLowerCase();}function allcheck(){// 获取所有复选框的元素对象var hobbys=document.getElementsByName("hobby");// 设置选中状态for(let i=0;i<hobbys.length;i++){const element=hobbys[i];element.checked=true;}}function nullcheck(){// 获取所有复选框的元素对象var hobbys=document.getElementsByName("hobby");// 设置未选中状态for(let i=0;i<hobbys.length;i++){const element=hobbys[i];element.checked=false;}}</script>
</html>