JavaScript

最新推荐文章于 2024-05-03 23:30:14 发布

极致千叶

最新推荐文章于 2024-05-03 23:30:14 发布

阅读量848

点赞数 1

分类专栏：前端知识文章标签： java 前端

本文链接：https://blog.csdn.net/mzpqq/article/details/124553161

版权

前端知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.什么是JavaScript?

JavaScript（简称 JS，下文简称为 JS）是世界上最流行的编程语言之一，它是一个脚本语言, 通过解释器运行，它主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行。
JS 的能做的事情:
✿网页开发(更复杂的特效和用户交互)
✿网页游戏开发
✿服务器开发(node.js)
✿桌面程序开发(VSCode 就是这么来的)
✿手机 app 开发

1.1 JS、HTML、CSS 关系

在这里插入图片描述
❀HTML: 网页的结构(骨)
❀CSS: 网页的表现(皮)
❀JS: 网页的行为(魂)

1.2 JS 是如何运行的？

JS 通过浏览器可以直接运行，JS 通常是包含在 HTML 页面中的，双击 HTML 页面就可以直接运行。

2.JS 前置知识

2.1 第一个JS程序

    <div id="mydiv">HELLO,JS</div>
    <script>
        document.getElementById("mydiv").innerText="你好，JS";
    </script>

2.2 JS 书写格式

JS 有 3 种书写格式：

行内格式
内嵌格式
外部格式

2.2.1 行内格式

直接嵌入到 html 元素内部

 <input value="点我" type="button" onclick="alert('别点我')">

注意, JS 中字符串常量可以使用单引号表示, 也可以使用双引号表示.
HTML中推荐使用双引号, JS 中推荐使用单引号.

2.2.2 内嵌格式

写到 script 标签中

<script>
    document.getElementById("mydiv").innerText="你好，JS";
</script>

JS方法：

//调用方法（传参）：
<input value="点我" type="button" onclick="myck('520')">
//方法：
    <script>
        function myck(m){
            alert("得到信息："+m);
        }
    </script>

2.2.3 外部格式（用处最多）

a)引入JS

<!-- 引入外部js -->
    <script src="js路径"></script>

b)使用JS

 <input value="点我" type="button" onclick="myck2('520')">

例如：
JS方法：
在这里插入图片描述
使用：

注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行).
适合代码多的情况.

2.3 注释

// 我是单行注释
/*
我是多行注释
我是多行注释
我是多行注释
*/

2.4 消息打印

输出信息到控制台：

console.log("得到调试信息："+m3);

2.5 JS单点调试方法（谷歌浏览器）

1.打开开发者工具
2.点击Sources资源面板
在这里插入图片描述
3.找到资源文件，在需要调试代码的这一行单击设置断点

4.触发并执行JS

3.JS 基础语法

3.1 定义变量

JS是弱类型语言，所以所有类型的定义变量只需要使用：var 变量名 = 值；
创建变量：

    var name = "李星云" ;
    var name2 = '姬如雪' ;

var 是 JS 中的关键字, 表示这是一个变量.
= 在 JS 中表示 “赋值”, 相当于把数据放到内存的盒子中. = 两侧建议有一个空格
每个语句最后带有一个 ; 结尾. JS 中可以省略 ; 但是建议还是加上.
注意, 此处的 ; 为英文分号. JS 中所有的标点都是英文标点.
初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来.
初始化的值如果是数字, 那么直接赋值即可.

3.1.1 JS 数据类型

JS 中内置的几种类型
❀number: 数字. 不区分整数和小数.
❀boolean: true 真, false 假.
❀string: 字符串类型.
❀undefined: 只有唯一的值 undefined. 表示未定义的值.
❀null: 只有唯一的值 null. 表示空值.
所有的数据类型都可以使用 var 来定义，js 是弱类型的数据语言。

3.2 定义方法

// 定义方法
function myfun(){
alert("执行了 myfun 方法");
}
// 调用方法
myfun();
// 定义方法带参数
function myfun(name){
alert(name+"：执行了 myfun 方法");
}
// 调用
myfun('Java');

JS 中使用 function 关键字来表示定义一个方法，function 后面跟的是方法名。

3.3 条件判断

3.3.1 if

if 判断的语法和 Java 语言类似，具体使用如下：

// 形式1
if (条件) {
语句
}
// 形式2
if (条件) {
语句1
} else {
语句2
}
// 形式3
if (条件1) {
语句1
} else if (条件2) {
语句2
} else if .... {
语句...
} else {
语句N
}

JS 也支持三元表达式：

条件 ? 表达式1 : 表达式2

3.3.2 switch

更适合多分支的场景.

switch (表达式) {
case 值1:
语句1;
break;
case 值2:
语句2:
break;
default:
语句N;
}

3.3.3 循环语句

① while 循环

while (条件) {
循环体;
}

执行过程:
先执行条件语句
条件为 true, 执行循环体代码.
条件为 false, 直接结束循环

② for 循环

for (表达式1; 表达式2; 表达式3) {
  循环体
}

表达式1: 用于初始化循环变量.
表达式2: 循环条件
表达式3: 更新循环变量.

4.JS 操作 DOM

4.1 得到控件

根据 id 得到 HTML 控件：

document.getElementById("元素id")

4.2 操纵控件

4.2.1 获取元素值

document.getElementById("username").value

4.2.2 设置元素的值

document.getElementById("username").value = "java";

4.2.5 jQuery 框架学习

jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程，jQuery 很容易学习。

	原生JS	jQuery框架
获得控件	`document.getElementById("控件id")`	`jQuery("#控件id")/$(#控件id)`
得到控件的值	`控件.value`	`控件.val();`
给控件赋值	`控件.value="值";`	`控件.val("值")`

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的文章列表</title>
    <script src="D:\Users\Administrator\Desktop\software\jquery-1.9.1.min.js"></script>
</head>
<body>
    <input type="button" value="查询我的文章" onclick="setlist()">
    <hr>
    <table id="mytable">
        <tr>
            <td>文章编号</td>
            <td>文章标题</td>
            <td>阅读量</td>
        </tr>
        <!-- <tr>
            <td>1</td>
            <td>
                <a href="https://xiaolincoding.com/">CSS基础</a>
                </td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <a href="https://javaguide.cn/">HTML基础</a>
                </td>
            <td>200</td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <a href="https://mp.weixin.qq.com/s/_DzddsMeQW5JPI6qoC7ARQ">JS基础</a>
                </td>
            <td>300</td>
        </tr> -->
    </table>
    <script>
        function setlist(){
            //1.根据当前登录用户的id，去后端请求列表
            var ids=[1,2,3,4,5];
            var titles=["CSS基础","HTML基础","JS基础","JAVA基础","MYSQL基础"];
            var rcount=[100,200,300,400,500];
            //2.得到控件并进行赋值
            var table=jQuery("#mytable");
            var appHtml=" ";
            for (var index = 0; index < ids.length; index++) {
                //拼接一个tr
                var trHtml="<tr>";
                trHtml+="<td>"+ids[index]+"</td>";
                trHtml+="<td><a href='#'>"+titles[index]+"</a></td>";
                trHtml+="<td>"+rcount[index]+"</td>";
                //....
                appHtml+=(trHtml+"</tr>");
                table.append(appHtml);
            }
        }
    </script>
</body>
</html>

在这里插入图片描述
例2：
实现聚合搜索：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聚合搜索</title>
    <script src="D:\Users\Administrator\Desktop\software\jquery-1.9.1.min.js"></script>
</head>
<body>
    <div>
        <div style="height: 50px; margin-left: 40%;" >
            <input  value="  CSDN  " type="button" 
            onclick="switchSearch('https://mp.csdn.net/')">&nbsp;&nbsp;&nbsp;&nbsp;
            <input value="  力 扣  " type="button" 
            onclick="switchSearch('https://leetcode-cn.com/')">&nbsp;&nbsp;&nbsp;&nbsp;
            <input value="  牛 客  " type="button" 
            onclick="switchSearch('https://www.nowcoder.com/')">&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div>
            <iframe id="ifr" style="width:100%;height:600px;" src="https://cn.bing.com/"></iframe>
        </div>
    </div>
    <script>
        function switchSearch(site){
            jQuery("#ifr").attr("src",site);
        }
    </script>
</body>
</html>

点击进入：
在这里插入图片描述
点击CSDN：

点击力扣：

点击牛客：

极致千叶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

目录1.什么是JavaScript?1.1 JS、HTML、CSS 关系1.2 JS 是如何运行的？2.JS 前置知识2.1 第一个JS程序2.2 JS 书写格式2.2.1 行内格式2.2.2 内嵌格式2.2.3 外部格式（用处最多）2.3 注释2.4 消息打印2.5 JS单点调试方法（谷歌浏览器）3.JS 基础语法3.1 定义变量3.1.1 JS 数据类型3.2 定义方法3.3 条件判断3.3.1 if3.3.2 switch3.3.3 循环语句① while 循环② for 循环4.JS 操作 DOM4
复制链接

扫一扫