web前端（速成篇二）

最新推荐文章于 2024-07-20 18:16:53 发布

Masha_cms

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量732

点赞数 10

分类专栏： web前端文章标签：前端

本文链接：https://blog.csdn.net/Masha_cms/article/details/139447587

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

web前端开发：
javaScript：负责网页的行为（交互效果）

一、什么是js？

1、js是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，能使页面可交互。
2、js和java是完全不一样的语言，不论是概念还是设计，但是基础语法相似。

二、 js引入方式

在这里插入图片描述
1、弹框消息 —alert(“123”)
2、js脚本尽量在body下面，这样可以提高页面速率

代码1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js引入方式</title>
    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
  
</head>
<body>
    
</body>
<!-- 内部脚本 -->
<!-- <script>
    alert("我爱shirly");
</script>

  <script>
    alert("么么");
</script> -->

</html>

三、js的基础语法

书写语法、输出语句

1、区分大小写：和java一样、变量名、函数名以及其他一切东西都是区分大小写
2、每行结尾的分号可有可无
3、注释：单行注释：//注释内容多行注释：/* 注释内容 */
4、大括号表示代码块

{
	alert("hello")
}

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

代码2

<!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>
    
</body>
<script>
    //方式1、弹出警告框
    // window.alert("我爱Shirley");
    //方式2、在html页面中，支持输出html代码，浏览器能解析
    // document.write("亲亲")
    // document.write("<h1>亲亲</h1>")
    //方式3、控制台输出
    console.log("hello");
</script>
</html>

变量

1、var 关键字来声明变量，可以存放不同类型的值
2、变量名的规则：
①组成字符可以是任何字母、数字、下划线（_）、或美元符号（$）
②数字不能是开头
③建议使用驼峰命名
3、let 关键字也可以声明变量
4、const关键字来声明一个只读的常量，一旦声明，常量的值不能改变。
5、关于let和var的区别
①：var可以重复定义变量，let不可以重复定义变量
②：var的定义变量在所属的{}外有效，let定义的变量在所属{}外无效

数据类型

1、js分为原始类型和引用类型（对象）
2、原始类型：
①：number：数字（整数、小数、NaN（Not a Number））
②：string：字符串，单双引即可
③：Boolean：布尔，true 或者 false
④：null：对象为空
⑥：undefined：当声明的变量未初始化，该变量的默认值是undefined
3、typeof运算符可以获取数据类型
注意：typeof对于null值会返回object
4、引用对象
e.g:

let date=new Date();
console.log(date);
console.log(date.getFull())

函数

1、函数是设计为执行特定任务的代码块
2、function定义方式一：

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

注意：
①形式参数不需要类型。返回值也不需要类型，可以在函数内部return返回。
②调用函数：函数名称(实际参数列表)
3、function定义方式二：（匿名函数）

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

4、function定义方式三：(箭头函数，类似于java中的lambda表达式)

let functionName = (参数1,参数2,...)=>{
	//要执行的代码
}

注意：如果形参只有一个仅有一个，那么小括号可以省略。

四、 js对象

Array（相当于java中的集合，数组的长度可变，可以存放任意类型的数据）

1、定义数组：
①

let 变量名 = new Array(元素列表);

②

let 变量名 = [元素列表];

2、访问

arr[索引] = 值

3、获取长度 arr.length

let arr = [100,"hello",true];
console.log(arr.length);//3
arr[10]="world";
console.log(arr.length);//11

4、数组的遍历
①快捷键：for+回车

for (let i=0;i<数组.length;i++){

}

②快捷键：forof+回车

for(let 变量 of 数组){
//变量表示遍历的元素值
}

③快捷键：forEach+回车（如果当前索引处没有值，则不会遍历）

arr.forEach((e,i)=>{
	//e表示元素值，i表示索引
})

字符串（js只有字符串没有字符）

1、String字符串的对象创建方式有两种

let 变量名 = new String("...");//方式一
let 变量名 = "..."; //方式二，其中有" " ,' ',` `这三种

2、获取长度用length
3、模板字符串和普通字符串的区别
①" " 、’ '都是普通字符串，两个` 是模板字符串
②模板字符串中可以使用$(表达式)来引用变量的值，不需要拼接字符串

`html
<!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>
    
</body>
<script>
    // 使用普通字符串和模板字符串分别按照“xxxx年xx月xx日”格式来打印当前日期
    //1、获取当前年月日
    let date = new Date();
    let year = date.getFullYear();//年
    let month = date.getMonth()+1;//月
    let day =date.getDay();//日

    // 定义普通字符串和模板字符串并打印
    let s1=year+"年"+month+"月"+day+"日";
    let s2=`${year}年${month}月${day}日`;//在普通字符串中不能用${}引用
    console.log(s1);
    console.log(s2);
</script>
</html>

自定义对象

在这里插入图片描述

代码


<!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>
    
</body>
<script>
    //定义person对象，有name和age属性，有eat()和study()方法。
    let person ={
        name:"masha",
        age:20,
        eat(){
            console.log("点菜");
        },
        study(s){
                console.log("学习"+s);
        }

    }
    //使用
    console.log(person.name,person.age);
    person.eat();
    person.study("速成");

    // js对象特点：js中的对象支持动态扩展属性和方法
    person.address="广州"; //如果没有address属性，会自动给person对象添加address属性并赋值
    console.log(person.name,person.age,person.address);

    let user={};//定义了一个user对象，但是没有任何属性和方法，可以后续添加
    user.name="masha";
    console.log(user.name,person.age);
</script>
</html>

JSON介绍

1、概念：Java Script Object Notation，javaScript对象标记法，本质是通过js对象标记法书写文本
2、场景：现多用于作为数据载体，在网络中进行数据传输、
在这里插入图片描述

在这里插入图片描述

<!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>
    
</body>
<script>
    //1、定义js对象
    let user={
        name:"miaomiao",
        age:20,
        address:["广州","北京"]
    }
    console.log(typeof user,user);
    // 2、对象--->json字符串
    let json=JSON.stringify(user);
    console.log(typeof json,json,json.name);
    // 3、json字符串--->js对象
    let json2='{"name":"miaomiao","age":20,"address":["广州","北京"]}';
    let user2=JSON.parse(json2);
    console.log(typeof user2,user2,user2.address); //要对象才能取值
</script>
</html>

BOM对象—Browser Object Model 浏览器对象模型

1、概念：指的是js浏览器的各个组成部分封装为对象，使用对象可以操作浏览器
2、组成
①：Window：浏览器窗口对象
②：Navigator：浏览器对象
③：Screen：屏幕对象
④：History：历史记录对象
⑤：Location：地址栏对象

3、Windows对象
①：获取：直接使用window，其中window可以省略。

window.alert("Hello Window");
alert("hello window");

在这里插入图片描述

<!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>
    
</body>
<script>
    // comfirm(msg)-对话框 ---确认：true，取消false
    // let  flag=confirm("您确定要删除吗？");
    // if(flag){
    //     alert("开始删除数据")
    // }
    //setInterval(fun,毫秒值)--循环定时器 --按照指定的周期（以毫秒计）循环调用函数
    setInterval(function(){
        console.log("循环定时器执行了");
    },2000)
    //setTimeout(fun,毫秒值)--指定定时器 --在指定的毫秒数后调用函数
    setTimeout(function(){
        console.log("一次性定时器执行了");
    },2000)
</script>
</html>

4、Location
在这里插入图片描述

DOM对象—Document Object Model 文档对象模型

1、标记语言（HTML）
2、element：是所有标签共有的属性

在这里插入图片描述

3、DOM操作-获取元素对象：HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的
①：获取使用Document对象的方法来获取（旧方法）

②：获取：使用Document对象的方法来获取（新方法）
在这里插入图片描述

<!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="imgId" src="images/卡莎.jpg"><br><br>
    <div class="cls">喵喵</div><br>
    <div class="cls">shirly</div><br>
</body>
</html>
<script>
    //getElementById:根据id属性值，返回一个Element对象
    let img =document.getElementById("imgId");
    console.log(img);
    //document.querySelector("css选择器"):根据id选择器获取img对象
    let imgs =document.querySelector("#imgId");//这里是获取id选择器 所以是#
    console.log(imgs);
    //document.querySelectorAll("css选择器"):根据类选择器获取所有div对象
   let abc = document.querySelectorAll(".cls");//这里是获取类选择器 所以是.
   console.log(abc);
   //打印出来
   for(div of abc){
    console.log(div);
   }
</script>

DOM操作—使用元素对象

官网：https://www.w3school.com.cn/
1、使用元素对象在这里插入图片描述

<!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="imgId" src="images/1.jpg"><br><br>
    <div class="cls">喵喵</div><br>
    <div class="cls">shirly</div><br>
    <input type="checkbox" name="hobby" class="hobby"> 唱
    <input type="checkbox" name="hobby" class="hobby"> 跳
    <input type="checkbox" name="hobby" class="hobby"> rap

</body>
<script>
    //1、给卡莎更换形态
    //第一步、获取元素对象
    let img = document.querySelector("#imgId");
    //第二部：操作对象
    img.src="images/卡莎.jpg" ;
    // 2、将所有div标签的内容后面加上：veryGood（红色字体）
    //第一步、获取元素对象
    let divs=document.querySelectorAll(".cls");
    //第二步：操作对象
    for(let div of divs){
        div.innerHTML +="<font color='red'>very good</font>"; 
    }
    //3、将所有的复选框呈现选中状态
    //第一步、获取元素对象
    let checkboxs = document.querySelectorAll(".hobby");
    //第二步、操作对象
    for (let checkbox of checkboxs){
        checkbox.checked=true;
    }
</script>
</html>

JS事件监听

1、什么是事件？
HTML事件是发生在HTML元素上的事情，例如（按钮被点击、鼠标移动到元素上、按下键盘按键）
2、什么是事件监听？
JavaScript可以在事件被侦测到时的执行代码
例如（鼠标移到元素时，点亮）
3、如何事件绑定？
在这里插入图片描述

常见事件

在这里插入图片描述

onload演示：

<!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>
<!-- 假设js代码在body上面，可是没有加载完成，如何执行js? -->
<!-- 用onload -->
<script>
    function load(){
  //1、给卡莎更换形态
    //第一步、获取元素对象
    let img = document.querySelector("#imgId");
    //第二部：操作对象
    img.src="images/卡莎.jpg" ;
    // 2、将所有div标签的内容后面加上：veryGood（红色字体）
    //第一步、获取元素对象
    let divs=document.querySelectorAll(".cls");
    //第二步：操作对象
    for(let div of divs){
        div.innerHTML +="<font color='red'>very good</font>"; 
    }
    //3、将所有的复选框呈现选中状态
    //第一步、获取元素对象
    let checkboxs = document.querySelectorAll(".hobby");
    //第二步、操作对象
    for (let checkbox of checkboxs){
        checkbox.checked=true;
    }
    }
  
</script>
<body onload="load()">
    <img id="imgId" src="images/1.jpg"><br><br>
    <div class="cls">喵喵</div><br>
    <div class="cls">shirly</div><br>
    <input type="checkbox" name="hobby" class="hobby"> 唱
    <input type="checkbox" name="hobby" class="hobby"> 跳
    <input type="checkbox" name="hobby" class="hobby"> rap

</body>

</html>

JS事件监听的案例

<!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>
<!-- 案例：-->
<!-- 1、设置可以开灯、关灯的按钮；
2、输入框鼠标聚焦后，展示小写，鼠标离焦后，展示大写；
3、点击“全选”按钮使用所有复选框呈现被选中的状态，点击“反选”按钮所有复选框呈现取消勾选的状态。 -->
<body>
    <img id="light" src="images/off.png"><br>
    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">
    <br><br>
    <input type="text" id="name" value="ITCAL" onfocus="lower()" onblur="upper()">
    <br><br>
    <input type="checkbox" name="hobby" class="hobby">电影
    <input type="checkbox" name="hobby" class="hobby">旅游
    <input type="checkbox" name="hobby" class="hobby">游戏
    <br>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">
</body>
<script>
    function on(){
        let  img = document.querySelector("#light");
        img.src="images/on.png";
    }
    function off(){
        let  img = document.querySelector("#light");
        img.src="images/off.png";
    }
    function lower(){
        let input = document.querySelector("#name");
        // let value = input.value. toLowerCase();
        // input.value =value;
        input.value = input.value.toLowerCase();


    }
    function upper(){
        let input = document.querySelector("#name");
        
        input.value = input.value.toUpperCase();
    }
    function checkAll(){
       let checkboxs= document.querySelectorAll(".hobby");
       for (checkbox of checkboxs) {
            checkbox.checked=true;

       }
    }
    function reverse(){
        let checkboxs= document.querySelectorAll(".hobby");
       for (checkbox of checkboxs) {
            checkbox.checked=false;

       }
    }
</script>
</html>