JavaEE进阶-JavaScript初识

目录

1，基础概念

2，基本使用

3，基础语法

4，consloe.log 到底有什么用？

5，目前阶段的基础操作

6，现有知识总结

7，jQuery的使用

8，两个案例演示

一，基础概念

前面学习 HTML 和 CSS 时，我们已经能够把一个网页“搭出来”和“美化出来”，但这样的网页还比较静态。

如果希望网页能够响应用户的操作，例如：

点击按钮 → 弹出提示
输入内容 → 获取输入框数据
点击菜单 → 展开内容
点击按钮 → 修改文字、颜色

就需要 JavaScript。

JavaScript，简称 JS，是一门脚本语言，最初主要用于浏览器中的网页交互。

JavaScript和Java是什么关系，你就可以理解为周杰和周杰伦，他们完全就是两个不同的东西，只不过在JavaScript刚开始进行创建的时候，就是主线任务是和Java类似，并且名字有Java也是为了蹭Java的流量吧

二，基本使用

先介绍一下consloe.log是用于打印日志的

那我们这里的使用还是跟css一样有三种写法，先分别来展示一下

（1）行内方式

    <button onclick="alert('hello')">点我</button>

JavaScript 直接写在 HTML 标签中。

适合非常简单的代码，但代码复杂以后会很乱。

（2）内部方式

     <script>
        console.log("hello");
    </script>

通过在body中使用<script>标签写入内容

（3）外部方式

console.log("hello2");

<script src="js2.js"></script>

通过创建一个新的js类来进行使用

三，基础语法

这里主要是先学习JavaScript这门语言的一些基础，就像开始学习Java的时候的变量，定义，数组之类的

（1）变量

常用数据类型number，string，boolean，undefined；（在这门语言不跟Java一样，这里定义一个变量不是int，String之类的，而是可以统一使用let）

let a = 10;
let b = 3.14;

let name = "张三";
let message = 'hello';

let flag = true;
let flag2 = false;

let a;
console.log(a);

（2）typeof查看类型

let a = 10;
let b = "hello";
let c = true;

console.log(typeof a);
console.log(typeof b);
console.log(typeof c);

（3）运算符

这里的运算符和Java类似，但是有一个不一样，就是==以及===

==：比较是否相同，但是在比较的时候会进行类型的转换，就好比“10”以及10，是相等的

===：在比较大小的基础上，也看类型是否相同，就向上面那个例子，在===这里就是不相同的

（4）数组

let arr = [10, "hello", true];
arr.push(200);
arr.splice(1, 1);
arr[0] = 100;

数组的设置也很简单以及包容，你的一个数组里面可以包含多种不同的类型的数据

增加元素：push

删除元素：splice（从哪开始，删除几个）

修改元素：直接用下标把你想改的数字写下来就好了

如果你直接写let arr【5】=10；，就是将数组的长度直接设为6，并且除了下标为5的那个内容是10，其他的都是empty

（5）函数

function add(x, y) {
    let sum = x + y;
    return sum;
}

方法统一使用function 后面就是方法名字以及参数，并且这里的方法的包容性也同样的很高，你在调用的时候不一定说是两个数字相加，也可以两个字符串等等

add(5, 3);

add("aa", 3);

add("aa", "bb");

add("aa");

add("aa", "bb", "cc");

add(5);

像aa和3就会出现字符串相加的情况，像我的函数是两个参数，但是你传了三个，这样就会丢弃最后一个，如果你少填了，空出来的参数就会默认是undefined

（6）对象

let student = {
    name: "张三",
    age: 20,

    sayHello() {
        console.log("hello");
    }
};

这里的方法最好直接写名字然后跟着对应的操作

四，consloe.log的作用

这个就相当于Java当中的sout（打印），但是这个打印并不会出现在网页上，而是打印在日志中，所以consloe.log最大的作用就是调试，那我现在就来介绍一下如何进行调试，我们进入网页之后，点击键盘上的f12，点击控制台就可以看到我们的日志了

<script>
    console.log("hello");
</script>
<script src="js2.js"></script>
console.log("hello2");

在这里就可以看到我刚刚写的两个hello，具体如何操作，先举一个例子

let arr = [10, 20, 30];

arr.push(40);

console.log(arr);

这样我们通过日志就可以看到我们push有没有成功

五，基础操作

现在学习阶段比较常见的可以先认识：

console.log()

控制台打印。

alert()

浏览器弹窗。

typeof

查看数据类型。

arr.length

获取数组长度。

arr.push()

在数组末尾增加元素。

arr.splice()

删除数组元素。

parseInt()

把内容转换为整数。

Math.random()

生成随机数。

Math.floor()

向下取整。

这些操作在后面的案例中会不断重复出现。

六，现有知识总结

我们现在学完这些开始网页交互了吗，还并没有，我们现在学这些东西主要是学JavaScript的一些基础的语法，还没到交互的关系，当只有比如用户点击一个按钮，浏览器接收到点击的信号，JavaScript监听到之后执行对应的代码

七，jQuery

jQuery 本质上还是建立在 JavaScript 之上的工具，它封装了很多常见的页面操作，使得选择 HTML 元素、操作 DOM 和处理事件更加简单

如何导入

我们先进入jQuery的官网，然后进行下载

下载完之后打开右键另存为到你写的代码的那个目录下

然后复制粘贴到你的代码文件目录，并且在代码中进行引入，接下来就可以使用了，代码中的导入最好写在head里面或者body的开头，因为浏览器是代码从上往下进行加载，所以写在开头避免加载出现问题

，

<script src="./jquery-4.0.0.min.js"></script>

基础用法

$(selector).action();

selector是选择哪一个，后面的action是具体要执行的方法

$("button").hide();

这个就是找到button然后对他进行隐藏，这里的选择器和前面css类似，id使用#，class使用. ,直接写就是找到所有的标签，上面这个就是找到所有的p标签

事件

相关理解

要进行网页交互就得先知道用户做了什么动作，比如用户点击了一个什么，输入了一个什么，都是需要捕捉的动作，所以后续我们使用jQuery主要就是带上用户的作用以及这个动作完之后返回什么

$("button").click(function() {

    console.log("点击成功");

});

这个就是当用户点击button按钮之后打印一个日志

事件里面的常用方法

text()
html()
val()

text（）是修改文本内容，html（）是修改HTML里面的内容，val（）是获取到用户输入

接下来我用两个小案例来辅助学习

案例1（猜数字）

这个图片是我们要达到的效果，首先就是我们输入数字，产生一个次数以及结果的改变，然后就是重新开始一局之后的数据的刷新

<!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>
    <div>
        <button id="reset">重新开始游戏</button><br>
        请输入你要猜的数字：<input type="text" id="guessnum"><button id="guess">猜</button><br>
        已经猜的次数：<span id="count">0</span><br>
        结果: <span id="result"></span>
    </div>
    <script src="./jquery-4.0.0.min.js"></script>
    <script>
        let num=Math.floor(Math.random()*100)+1;
        let count=0;
        console.log(num);
        $("#guess").click(function(){
            count++;
            //拿到用户输入的数字，用val
            let usernum=$("#guessnum").val();
            if(num>usernum){
                $("#result").text("猜小了");
                $("#count").text(count);
            }else if(num<usernum){
                $("#result").text("猜大了");
                $("#count").text(count);
            }else{
                $("#result").text("猜对了");
                $("#count").text(count);
            }
        })
        //接下来就是点击重新开始之后的重置
        $("#reset").click(function(){
            num=Math.floor(Math.random()*100)+1;
            console.log(num);
            count=0;
            $("#guessnum").val("");
            $("#count").text("");
            $("#result").text("");
        })
    </script>

</body>
</html>

案例2（留言板）

预期效果，在我们输完之后会在提交下面显示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表白墙</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 520px;
            margin: 30px auto;
            text-align: center;
        }

        h1 {
            font-size: 56px;
            margin-bottom: 20px;
        }

        p {
            color: #888;
            margin-bottom: 25px;
        }

        .row {
            width: 500px;
            margin: 15px auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .row span {
            width: 100px;
            text-align: left;
            font-size: 24px;
        }

        .edit {
            width: 320px;
            height: 50px;
            font-size: 20px;
            padding-left: 10px;
        }

        .submit {
            width: 420px;
            height: 60px;
            background-color: orange;
            color: white;
            border: none;
            font-size: 28px;
            cursor: pointer;
        }

        .message {
            width: 420px;
            margin: 10px auto;
            text-align: left;
            font-size: 20px;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>

<body>

<div class="container">

    <h1>表白墙</h1>

    <p>输入后点击提交，会将信息显示在下面</p>

    <div class="row">
        <span>谁：</span>
        <input class="edit" type="text">
    </div>

    <div class="row">
        <span>对谁：</span>
        <input class="edit" type="text">
    </div>

    <div class="row">
        <span>说什么：</span>
        <input class="edit" type="text">
    </div>

    <div class="row">
        <input class="submit" type="button" value="提交">
    </div>

</div>


<!-- 引入你本地的 jQuery 4.0.0 -->
<script src="./jquery-4.0.0.min.js"></script>

<script>

    $(function () {

        // 给提交按钮绑定点击事件
        $(".submit").click(function () {

            // 获取三个输入框中的内容
            var from = $(".edit:eq(0)").val();
            var to = $(".edit:eq(1)").val();
            var message = $(".edit:eq(2)").val();

            // 打印到控制台，方便调试
            console.log(from);
            console.log(to);
            console.log(message);

            // 如果有内容为空，就不提交
            if (from == "" || to == "" || message == "") {
                alert("请输入完整内容");
                return;
            }

            // 拼接一段 HTML
            var html =
                '<div class="message">'
                + from
                + ' 对 '
                + to
                + ' 说：'
                + message
                + '</div>';

            // 添加到 container 最后
            $(".container").append(html);

            // 清空所有文本框
            $(":text").val("");

        });

    });

</script>

</body>
</html>

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/java_nnnn/article/details/166789264