javaweb学习笔记（8.10）

老板来条小鱼干

已于 2024-08-13 00:19:16 修改

阅读量861

点赞数 25

文章标签：学习笔记

于 2024-08-10 18:03:04 首次发布

本文链接：https://blog.csdn.net/2301_79690135/article/details/140913303

版权

一、JS

1.1JS简介

Web标准：由3WC制订

三个组成部分：

HTML---》网页的基础结构

CSS---》网页的表现效果

JavaScript---》网页的行为

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

1.2JS的引入

1、内部脚本：

Js代码必须位于<script></script>标签之间
在HTML文档中，在任意地方，放置任意数量的<script>
一般会把脚本放在<body>元素底部，改善显示速度

<script>
    alert("Hello World")
</script>

2、外部脚本

外部JS文件中，只包含JS代码，不包含<script>标签
<script>标签不能自闭合

1.3JS基础语法

书写语法

区分大小写
每行结尾分号可有可无
注释：
- 单行注释：//注释内容
- 多行注释：/*注释内容*/
大括号：表示代码块

if(count==3){
    alert("Hello");
}

输出语句

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

  <script>
        window.alert("Hello alert");/* 弹出警告栏 */
        document.write("Hello write");/* 浏览器展示 */
        console.log("Hello log ");/* 写入控制台 */
    </script>

运行结果：

变量

使用var关键字声明变量（*JS是弱类型语言，变量可以存放不同类型的值）

var声明变量特点：

作用域大，是全局变量
可以重复定义

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

let声明变量特点：

只在let关键字所在代码块内有效且不允许重复声明

 <script>
    {
        let x=1;
       /*  let x=2; */
        alert(x);
    }
    alert(x);
 </script>

当写第二个 let x时vscode将报错，运行后不显示相应弹窗警告栏

const声明变量特点：

声明的为只读变量
一旦声明，常量的值无法改变

   <script>
        {
            const aa=1;
           /* aa=2;*/
            alert(aa);
        }
    </script>

写第二个aa的赋值运算时不报错，但不会出现弹窗警告栏

变量名规则：

字符由任何字母、数字、下划线、美元符号组成
数字不能开头
使用驼峰命名法(类似于：FindRoot..)

数据类型

JS中数据类型有：原始类型 和 引用类型

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

运算符

===全等运算符

==和===的区别

类型转换：

1、字符串转为数字

  <script>
    alert(parseInt("12"));//12
    alert(parseInt("12A45"));//12
    alert(parseInt("A45"));//NaN
   </script>

2、其他类型转为boolean

Number：0和NaN为false，其余转为true
String：空字符串转为false，其余转为true
Null和undefi：转为false

流程控制语句

1.4函数

简介：函数是被设计为执行特定任务的代码块

介绍：JS通过function关键字定义函数，语法：

function functionName（参数1，参数2...）{
    //代码块
}

*注意：

形参不需要类型（JS是弱类型语言）

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

定义方式一：

function functionName(a,b...){
    return a+b;
}

定义方式二：

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

调用方法：

functionName(a,b...);

1.5JS对象

Array数组

定义方式一：

var 变量名=new Array（元素列表）；

var arr=new Array(1,2,3,4);

定义方式二：

var 变量名=[元素列表]；

var arr=[1,2,3,4];

访问方式：

arr[索引]=值；

arr[10]="hello";

特点：

长度可变
类型可变

属性：

length：设置或返回数组中的元素数量

方法：

forEach（）：遍历数组中的每个有值的元素，并调用一次传入的函数

arr.forEach(function(e){
    console.log(e);
})

箭头函数 =>

arr.forEach((e)=>{
    console.log(e);
})

push（）：将新元素添加到数组的末尾，并返回新的长度
splice（）：从数组中删除元素

arr.splice(a,b);//从位置a开始删除b个元素

String字符串

创建方式一：var 变量名=new String （"...");

创建方式二：var 变量名="...";

属性：

length：字符串的长度

方法：

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

JSON

定义格式：

var 对象名={

属性名1：属性值1；

属性名2：属性值2；

属性名3：属性值3；

属性名称：function（形参列表）{}

}；

var user={
    name="Tom",
    age=10,//逗号分隔
    eat:function(){
        alert("吃饭”）；
    }
    //简化eat函数
     eat(){
        alert("吃饭”）；
    }
}；

调用格式：

对象名.属性名；

console.log(user.name);

对象名.函数名（）；

user.eat();

简介：

*所有的key都要用双引号括起来

定义：var 变量名=‘{"key1":value1,"key2":valuel2}';

 <script>
        var js='{"name":"Tom","age":18}';        
        var obj=JSON.parse(js);
        alert(obj.name);
        alert(JSON.stringify(js));
    </script>

BOM

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

Window

获取：window.alert（“Hello Window”）；alert（“Hello Window”）；

window可省略。

属性：

history：对History对象的只读引用。
location：用于窗口或框架的Location对象。
navigator：对Navigator对象的只读引用。

方法：

alert()：显示带有一段消息和一个确认按钮的警告框。
confirm（）：显示带有一段消息以及确认按钮和取消按钮的对话框。
setlnterval（）：按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout（）：在指定毫秒数后调用函数或表达式。

  <script>
        //获取
        window.alert("Hello");
        alert("Hello");
        //方法
        //confirm--确认：true    取消：false
        confirm("您确认删除吗？");
        //定时器
        var i=1;
       setInterval(function(){
        i++;
        console.log("定时器执行了"+i+"次");
       } ,2000);
       setTimeout(function(){
        alert("JS");
       },3000)
    </script>

Location

介绍：地址栏对象。

获取：window.location.属性；location.属性；

属性：

href：设置或返回完整的URL。

    <script>
        alert(location.href);

        location.href="https://www.csdn.net/";
    </script>

DOM

概念：文档对象模型

DOM结构（DOM树）

JavaScript通过Dom对HTML的操作：

改变HTML元素内容
改变HTML元素样式
对HTML事件作出反应
添加删除HTML元素

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

Document对象中获取Element元素对象函数：

根据id属性获取，返回单个Element对象

<script>
        var img=document.getElementById('h1');
        alert(img);
    </script>

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

<script>
        var divs=document.getElementsByTagName('div');
        for (let i = 0; i < divs.length; i++) {
            alert(divs[i]);
        }
    </script>

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

<script>
        var ins=document.getElementsByName('hobby');
        for (let i = 0; i < ins.length; i++) {
            alert(ins[i]);
            
        }
    </script>

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

<script>
         var ins=document.getElementsByClassName('cls');
        for (let i = 0; i < ins.length; i++) {
            alert(ins[i]);
            
        }
    </script>

获取并修改DOM元素对象

  <script>
        var ins=document.getElementsByClassName('cls');
        var div1=ins[0];
        div1.innerHTML="哈哈哈";
    </script>

1.6事件监听

事件：发生在HTML元素上的事情（按钮被点击、鼠标移动到元素、按下键盘按键）

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

事件绑定

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

 function on(){
            alert("111被点击了")
        }

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

 document.getElementById('btn2').onclick=function(){
            alert("222被点击了");
        }

常见事件

老板来条小鱼干

关注

25
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
javaweb学习笔记（8.10）

var 变量名=new Array（元素列表）；
复制链接

扫一扫