JS入门学习

最新推荐文章于 2024-06-14 15:02:13 发布

挽天java

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量1k

点赞数 16

分类专栏： Web 文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/2403_82385265/article/details/138964828

版权

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS

JavaScript是一门解释型的脚本语言，其是弱类型的，对变量的数据类型不做严格的要求，变量的类型可以在运行过程中变化
JavaScript能改变HTML内容，属性，样式

大纲

使用方式
变量
运算符
数组
JS函数
自定义对象
事件
补充

具体案例

使用方式

在script标签中写js代码

script标签即可以写在head里面，也可以写在body里面
推荐写在head部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
<!--    这里是在<head>部分写的script-->
    <script>
        var place ="head";
        console.log(place)
    </script>
</head>
<body>
<!--这里是在<body>部分写的script-->
<script>
    var secondPlace ="body"
    console.log(secondPlace);
</script>
</body>
</html>

执行的顺序是从代码开始自上而下的

使用script标签引入

主HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签引入</title>
<!--    使用script标签引入js文件-->
    <script type="text/javascript" src="myscript.js"></script>
</head>
<body>

</body>
</html>

引入的js文件，这里名字叫myscript

alert("我是引入的")

两种使用方式不能混用，混用只显示一个的效果(显示先执行的那个的效果)

变量

下面是常见的数据类型
在这里插入图片描述
无论是整数还是小数都是number
无论字符还是字符串都是string类型，这可以使用单引号，也可以使用双引号
下面是特殊值
null:空值
undefined:未赋值
NAN:不能识别的数据类型，不是一个数

运算符

算术运算符

与Java比较类似
在这里插入图片描述

赋值运算符

也是与Java类似
在这里插入图片描述

关系运算符

在这里插入图片描述
这里注意 == 与 === 的区别
== 是比较值
=== 不仅比较值，还比较数据类型
比如 number = 520，number1 = “520”，这两个进行比较时，在 == 会得到true，而在 === 则会得到false

逻辑运算符

在这里插入图片描述
这里有区别

注意：当表示布尔的值是我们的数据类型，则会输出该值，否则输出其代表的布尔值
比如(5 + 20)代表true，其值25，则输出25，而对于(5 < 100)，其代表true，但是其运算结果不为我们的数据类型，所以输出true

条件运算符

和Java的三元运算符类似

数组

数组的定义

首先，在JavaScript里面的数组的元素可以不是同一个类型

<script>
        // 方式一：直接创建
        var array1 = [100,"第二个",'第三个'];
        // 方式二：先声明，再赋值
        var array2 = [];
        array2[0] = 100;
        array2[1] = "第二个";
        array2[2] = '第三个';
        // 方式三：
        var array3 = new Array(100,"第二个",'第三个');
        // 方式四：
        var array4 = new Array();
        array4[0] = 100;
        array4[1] = "第二个";
        array4[2] = '第三个';
    </script>

这里同样采用的是下标访问的方式，在进行赋值时，如果刚刚赋值下标3，接着直接赋值下标6，那么下标4,5的元素会默认是undefined

数组遍历的方式

使用for循环进行遍历
在这里插入图片描述

JS函数

函数是由事件驱动，或者当他被调用时，执行的可重复代码块

函数的定义

方式一：使用function关键字来定义函数
在这里插入图片描述
方式二：将函数赋给变量

使用这种方式，就可以进行变量之间的赋值等处理

调用函数

方式一：直接调用
和Java一样的调用方法
方式二：通过事件进行调用

使用细节

在这里插入图片描述
对于JS中的函数重载会覆盖上一次定义，即不能通过更改形参列表来实现重载，对于有形参的函数在调用时，没有传入对于位置的实参，那么就会把其默认为undefined

小结：
如果形参的个数大于实参的个数，那么会按顺序匹配，而后面多出来的形参会默认为undefined
如果形参的个数小于实参的个数，那么也会按顺序匹配，多出来的实参不管，但是，会把所有的实参全部存入隐形参数arguments

自定义对象

不需要类，直接创建对象
方式一：
在这里插入图片描述
如果访问的一个没有定义过的属性，就会出现变量提升，显示undefined.但是访问一个没有定义的方法，就会报错
方式二：

注意这里要使用,隔开

事件

常见的事件
在这里插入图片描述
事件的分类

在这里插入图片描述

加载完成事件

onload 加载完成事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <script>
        function say(){
            alert("使用静态注册");
        }
    </script>
</head>
<!--静态注册-->
<body onload="say()">

</body>
</html>

使用动态注册，实现加载完成事件
在这里插入图片描述

点击事件

onclick 鼠标点击某个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <script>
        function say(){
            alert("你好使用静态注册");
        }
        // 因为程序按照顺序执行，这里还没有创建btn1这个按钮
        // 不能直接得到，所以要使用window的onload，等到加载完成后再进行动态注册
        // 使用document 的 getElementById方法，通过id得到对象
        window.onload = function (){
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function (){
                alert("动态注册成功");
            }
        }
    </script>
</head>
<!--静态注册-->
<body >
<button onclick="say()">静态注册按钮</button>
<button id="btn1" >动态注册按钮</button>
</body>
</html>

失去焦点事件

onblur 当鼠标离开时，触发的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <script type="text/javascript">
function upperCase(){
    var name1 = document.getElementById("name1");
      name1.value = name1.value.toUpperCase();
}
window.onload = function (){
    var name2 = document.getElementById("name2");
    name2.onblur = function () {
        name2.value = name2.value.toUpperCase();
    }
}
    </script>
</head>
<!--静态注册-->
<body >
输入英文单词:
<input type="text" id="name1" onblur="upperCase()"/><br>
输入英文单词:
<input type="text" id="name2">
</body>
</html>

内容发生改变事件

onchanged：如果内容发生改变，就执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <script type="text/javascript">
function mySal() {
    alert("工资发生变化了~");
}
// 动态注册
window.onload = function (){
    var sel1 = document.getElementById("sel1");
    sel1.onchange = function (){
        alert("女友更替")
    }
}
    </script>
</head>
<!--静态注册-->
<body >
你当前的工资水平:
<!--静态注册 onchange 事件-->
<select onchange="mySal()">
    <option>--工资范围--</option>
    <option>10k以下</option>
    <option>10k-30k</option>
    <option>30k以上</option>
</select><br>
你当前女友是谁:
<!--动态注册-->
<select id="sel1">
    <option>--女友--</option>
    <option>一号</option>
    <option>二号</option>
    <option>三号</option>
</select>
</body>
</html>

表单提交事件

onsubmit：注册按钮被点击，提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <script type="text/javascript">
    function register(){
        // 先得到输入的账号，密码
        var username = document.getElementById("username");
        var pwd = document.getElementById("pwd");
        if (username.value == ""||pwd.value == ""){
            alert("账号和密码不能为空")
            return false;// 代表不提交
        }
        return true;// 代表提交
    }
    // 动态注册
    // 这里onsubmit绑定的函数，会直接把结果返回给onsubmit
    window.onload = function (){
        var form2 = document.getElementById("form2");
        form2.onsubmit = function (){
            if (form2.username.value == "" || form2.pwd.value == ""){
                alert("账号和密码不能为空，不能提交")
                return false;
            }
            return true;
        }
    }
    </script>
</head>
<body >
<div>
    <!--静态注册-->
    <h1>注册用户</h1>
<!--    这里register()这个方法，返回了真或假，还要再return到onsubmit才行-->
    <form action="test1.html" onsubmit="return register()">
        u:<input type="text" id="username" name="username"><br>
        p:<input type="password" id="pwd" name="pwd"><br>
        <input type="submit" value="注册用户">
    </form>
</div>
<div>
    <h1>注册用户2</h1>
    <form action="test1.html" id="form2">
        u:<input type="text" name="username"><br>
        p:<input type="password" name="pwd"><br>
        <input type="submit" value="注册用户">
    </form>
</div>
</body>
</html>

补充

使用A.test(B)方法，来匹配B是否满足A的正则表达式格式

挽天java

关注

16
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS入门学习

首先，在JavaScript里面的数组的元素可以不是同一个类型< script > // 方式一：直接创建 var array1 = [ 100 , "第二个" , '第三个' ];// 方式二：先声明，再赋值 var array2 = [ ];array2 [ 1 ] = "第二个";array2 [ 2 ] = '第三个';// 方式三： var array3 = new Array(100 , "第二个" , '第三个');
复制链接

扫一扫