灯塔：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>