每天写500字

javaweb03-js基础

2023-09-06  本文已影响0人  阴天吃鱼

文本中涉及的一些基础介绍，不是全的。只写一些最常见、最经常使用的，其他的想了解可以自行查找资料。

前言：
script引入
内部引用 script
外部引用 script:src

一、js语法

1.编写语法

（1）区分大小写，建议驼峰式命名
（2）结尾分号可有可无，建议结尾分号添加，更严谨
（3）注释：单行注释// 多行注释/* */
（4）大括号代表代码块{}

2.输出语句

（1）window.alert 写入警告框
（2）document.write 写入html输出
（3）console.log 写入浏览器控制台

3.变量 - var关键字

（1）js是弱语言，没有强类型的概念，可以赋值不同类型。比如var x = 10 后面赋值x = “aaaaa”也是可以的，一个int类型，一个string类型
（2）不能以数字开头，但支持包含数字、字母、下划线、$美元符
（3）作用域比较大，全局变量。
（4）可以重复定义。比如设置var x=10 、var x="aaaa"， 后定义的会覆盖之前的定义
（5）es6新增let和const关键字，let关键字为局部变量，且不允许重复声明。const关键字，用来声明只读变量，不能改变

注意：
var x = 2;
let x = 1;
alert(x);

像这种情况，会报错的。Uncaught SyntaxError: Identifier 'x' has already been declared

4.数据类型、运算符+类型转换、流程控制符

（1）数据类型

注意：

typeof null返回的是Object，null针对的是对象
变量var a申明后不赋值，typeof返回的是undefined

（2）运算符+类型转换

注意：

比较运算符-双等比较过程中会进行类型转换，如果比对类型不同，转换相同类型后在计算比较，全等不会进行类型转换

（3）流程控制符

二、js函数

说明：函数（方法）执行特定任务的代码块。
通过function 关键字进行定义。

function add(a,b){
   return a+b;
}
var result = add(1,2);

var result = function(a,b){
   return a+b;
}
注意：

1.方法 形参不需要定义类型、返回值不需要定义类型。因为js是弱类型语言
2.传参不做限制，可以传n个，方法体取参数申明的个数，声明2个就取前两个
3.通过函数名称直接调用

三、js对象

1.基础对象（重点只关注这3）

（1）Array

//方式一
var arr = new Array(元素列表)
var arr = new Array(1,2,3,4)

//方式二
var arr = [元素列表]
var arr = [1,2,3,4]

1.长度可变
var arr =[1,2,3]
arr[10] = 50
中间未赋值的值，输出为undefined

2.类型可变
var arr =[1,2,3]
arr[8] = 'a'
arr[9] = ture

foreach：遍历数组当中每一个”有值“的元素，并调用一次传入的函数，可以简化：箭头函数：(....)=>{....}

var arr = [1,2,34]
arr.forEach(function(a,b,c){
  console.log('a='+a);
  console.log('b='+b);
  console.log('c='+c);
})
输出顺序 元素、下标、数组。


简化，箭头函数：(....)=>{....}
var arr = [1,2,34]
 arr.forEach((a,b,c) => {
  console.log('a='+a);
  console.log('b='+b);
  console.log('c='+c);
});

push
将新元素添加到数组的末尾，并增加数组的长度

splice
从数组中删除元素。开始位置和结束位置。需要注意的是 开始位置为包容，结束位置为不包容

arr.splice(arr.length-1,arr.length)
console.log('a->',arr);

（2）String

一共有两种

var string = new String("123")   
var string = "123123"

（3）JSON

var 对象名称 = {
  属性名:属性值,
  属性名:属性值,
  函数名称:function(形参列表){
  alert('111111')
  }
}

调用：
对象名称.属性名或者属性方法

2.浏览器对象模型

说明：BOM浏览器对象模型，他对浏览器中的各个组件进行了封装

获取：直接使用window，其中window.可以省略（window.alert \ alert）

属性：
history：对history对象的只读引用
location：用于窗口或框架的location对象
navigator：对navigator对象的只读引用
history ：对history对象的只读引用

方法：
alert

confirm：
显示带有一段消息的以及确认按钮和取消按钮的对话框。```

confirm('您确认删除该消息吗？') 自带确认删除， 点击确认返回true 取消false

setinterval：
指定周期调用某一个函数，周期性的执行，间隔时间后继续执行

setInterval(() => {
  alert('1111')
}, 3000);

setTimeout：
只调用一次，指定时间到达后调用

 setTimeout(() => {
        //aaaaa
}, 3000);

获取：
window.location 或 location.属性

属性值：
href 设置或返回完全的UR
location.href='https://www.xxxxx.com' 设置后执行时会自动跳转到该地址

3.文档对象模型

说明：DOM文档对象模型，把每个html标签都封装成了一个对象

获取元素对象：通过document对象来获取

（1）通过id

document.getElementById('id')

（2）标签名称

document.getElementByTagName('div') 返回数组

（3）name属性值获取

document.getElementByName('name')

（4）class属性获取

document.getElementByClassName('cls')

操作元素对象的属性：
修改图片

<img id="image_lamp" src="/Users/0desktop/1111111.png" alt="" width="200px" height="150px">

var image_lamp = document.getElementById('image_lamp');
image_lamp.src = '/Users/0desktop/22222222222.png';

修改文字+样式

<div class="cls">测试文字1</div>
<div class="cls">测试文字2</div>

var clss = document.getElementsByClassName('cls');
    for (let i = 0; i < clss.length; i++) {
        const cls = clss[i];
        cls.innerHTML += "<font color='red'>追加文字</font>"
    }

四、js事件监听

1.常见监听

onclick 鼠标点击事件
onblur 元素失去焦点
onfocus 元素获取焦点
onload 某个页面或图像被完全加载
onsubmit 当表单提交时触发的事件
onkeydown 某个键盘的键被按下
onmouseover 鼠标被移到某个元素之上
onmouseout 鼠标从某元素移开

2.事件绑定

（1）通过标签中的事件属性绑定

 <div id="html" class="cls" onclick="on()">html标签绑定</div>
 function on() {
   alert('我被点击了')
 };

（2）通过dom元素属性绑定

 var img = window.document.getElementById('image1');
 img.onclick = () => {
    img.src = image2;
 };

（3）案例演示

image.png 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
</head>

<body>
    <img id="image_lamp" src="/Users/0desktop/sc_20230906170036.png" alt="" width="200px" height="150px">
    <br>

    <input onclick="light()" type="button" value="点亮">
    <input onclick="nolight()" type="button" value="熄灭">
    <br>

    <input onfocus="smallLetter()" onblur="bigLetter()" type="text" value="TEST" placeholder="请输入字母" id="edit_content">
    <br>

    <input class="checkbox" type="checkbox" name="hobby" id="1">电影
    <input class="checkbox" type="checkbox" name="hobby" id="2">旅游
    <input class="checkbox" type="checkbox" name="hobby" id="3">游戏
    <br>
    <input onclick="checkAll()" type="button" value="全选">
    <input onclick="uncheckAll()" type="button" value="复选">
</body>

</html>

<script>
    var image_lamp = document.getElementById('image_lamp');
    var edit_content = document.getElementById('edit_content');
    var checkboxs = document.getElementsByClassName('checkbox');

    function light() {
        image_lamp.src = '/Users/0desktop/sc_20230906165739.png';
    }

    function nolight() {
        image_lamp.src = '/Users/0desktop/sc_20230906170036.png';
    }

    function smallLetter() {
        edit_content.value = edit_content.value.toLowerCase();
    }

    function bigLetter() {
        edit_content.value = edit_content.value.toUpperCase();
    }

    function checkAll() {
        for (let i = 0; i < checkboxs.length; i++) {
            const element = checkboxs[i];
            element.checked = true;
        }
    }

    function uncheckAll() {
        for (let i = 0; i < checkboxs.length; i++) {
            const element = checkboxs[i];
            if (element.checked) {
                element.checked = false;
            } else {
                element.checked = true;
            }
        }
    }
</script>
上一篇下一篇

猜你喜欢

热点阅读