灯塔：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>元素的底部，可改善显示速度
<script>
alter("Hello JavaScript")
</script>外部脚本：
将JS代码定义在外部JS文件中，然后引入到HTML页面中
• 外部JS文件中，只包括JS代码，不包括<script>标签
• <script>标签不能自闭合
<script scr="js//demo.js"></script>alter("Hello JavaScript")JS的基础语法
书写语法：
区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：
• 单行注释：// 注释内容
• 多行注释:/*注释内容*/
大括号表示代码块
//判断
if(count==3){
alert(count);
}输出语句：
• 使用window.alert()写入警告框
• 使用document.write()写入HTML输出
• 使用console.log()写入浏览器控制器
<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是一门弱类型语言,变量可以存放不同类型的值
• 变量名需要遵循如下规则:
› 组成字符可以是任何字母、数字、下划线（_）或者美元符号（$）
› 数字不能开头
› 建议使用驼峰命名
var a=20;
a="张三";数据类型：
JavaScript中分为：原始类型和因与类型。
原始类型：
• number：数字（整数、小数、NaN（Not a Number））
• string :字符串、单双引皆可
• boolean:布尔。true、false
• null：对象为空
• undefined ：当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可以获取数据类型
var a=20;
alert(typeof a);
运算符：
==与===
==会进行类型转换，===不会进行类型转换
var a=10;
alert(a=="10");//true
alert(a==="10");//false
alert(a===10);//true
流程控制语句：
if...else if...else...
switch
for
while
do...while函数：
介绍：函数（方法）是被设计为执行特定任务的代码块
定义方法一：JavaScript函数是通过function关键字进行定义，语法为：
function functionName(参数1，参数2...){
//要执行的代码
}
//例如
function add(a,b){
return a+b;
}注意：
形式参数不需要类型。因为JavaScript示弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用：函数名称（实际参数列表）
var result=add(10,20);
alert(result);
定义方法二：
var functionName=function(参数1,参数2){
//要实行的代码
}JS对象：
Array
•JavaScript中Array对象用于定义数组
特点：长度可变 类型可变
• 定义
var 变量名=new Array(元素列表)；//方式一
var arr=[1,2,3,4];var 变量名=[元素列表];//方法二
var arr=[1,2,3,4];• 访问
arr[索引]=值;
arr[10]="hello";
注意：JavaScript中的数组相当于Java中的集合，数组的长度可变，而JavaScript是弱类型，所以可以储存任意类型的数据。
属性：
| 属性 | 描述 |
| length | 设置或返回数组中的元素的数量 |
方法：
| 方法 | 描述 |
| forEach（） | 遍历数组中的每一个有值的元素，并调用一次传入的数 |
| push（） | 将新元素添加到数组的末尾，并返回新的长度 |
| splice（） | 从数组中删除元素 |
//forEach：遍历数组中的所有有值元素
var arr=[1,2,3,4];
arr.forEach(function(e)){
console.log(e);
}
//ES6 箭头函数：（...）=>{...}--简化函数的定义
arr.forEach(e)=>{
console.log(e);
}箭头函数（ES6） ：是用来简化函数定于语法的。具体形式为：
(...)=>(...)如果需要给箭头函数起名字：
var xxx=(...)=>{...}String
String字符串对象创建方式有两种：
var 变量名 =new String("...");//方式一
var str=new String(""Hello String);
var 变量名="...";//方式二
var str="Hello String";
var str ='Hello String';属性：
| 属性 | 描述 |
| length | 字符串的长度 |
方法：
| 方法 | 描述 |
| charAt（） | 返回在指定位置的字符 |
| indexOf（） | 检索字符串 |
| trim（） | 去除字符串两边的空格 |
| substring（） | 提取字符串中两个指定的索引号之间的字符（含头不含尾） |
JavaScript自定义对象
定义格式：
var 对象名={
属性名1：属性值1,
属性名2：属性值2,
属性名3：属性值3,
函数名称：function（形参列表 ）{}
};
//例
var user={
name:"Tom",
age:20,
gender="male",
eat:function(){
alert("用膳。。。");
}
};调用格式：
对象名.属性名;
consen.log(user.name);对象名.函数名();
user.eat();JSON
概念：JavaScript Object Natation，JavaScript对象标记法。
JSON是通过JavaScript对象标记法书写的文本。
由于其语法简单，层次结构鲜明，先多用于作为数据载体，在网络中进行数据传输。
基础语法：
定义：
var 变量名='{"key1":value1,"key2":value2}';
var userStr='{"name":"Jerry","age":18},"addr":["北京","上海","西安"]';value的数据类型为：
• 数字（整数或浮点数）
• 字符串（在双引号中）
• 逻辑值（true或false）
• 数组（在方括号中）
• 对象（在花括号中）
• null
JSON字符串转为JS对象
var jsObject=JSON.pause(userStr);JS对象转为JSON字符串
var jsonStr=JSON.stringify(jsObject);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：
//获取
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对象
var h1=document.getElementById('h1');2.根据标签名获取，返回Element对象数组
avr divs =document.getElementsByTagName('div');3.根据name属性值获取，返回Element对象数组
var hobbys=document.getElementsByName('hobby');4.根据class属性值获取，返回Element对象数组
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>