前端三剑客之Js---day4

小杨同学yx

已于 2025-08-14 16:06:46 修改

阅读量394

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 javascript

于 2025-07-29 20:40:10 首次发布

本文链接：https://blog.csdn.net/2503_91351624/article/details/149754157

前端专栏收录该内容

10 篇文章

订阅专栏

1.导入方式

1.内联head样式

内联head样式就是在<head>标签中通过<script>来编写js的内联样式。简单的js样式就是console.log("XXX")这是在控制台打印输出内容；alert("XXX")就是一个弹窗，弹出显示的消息。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js导入方式</title>
    <script>
        console.log("hello,head标签的内联式")
        alert("您好，内联head样式")
    </script>
</head>

2.内联body样式

内联body样式和内联head样式很像，就是在<body>中编写<script>样式。

<body>
    <h1>js的导入方式</h1>
   <script>
    console.log("hello,body标签的内联式")
    alert("您好，内联body样式")
   </script>
</body>

3.外联样式

外联样式就是通过导入该文件外的js文件来实现js样式。导入方式为在<head>标签内通过<script>实现，不过有个src属性用来指向该文件外的js文件。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js导入方式</title>
    <script>
        console.log("hello,head标签的内联式")
        alert("您好，内联head样式")
    </script>
    <script src="./js/myscript.js">
    </script>
</head>

【注意：html页面实现的时候也是有顺序的，比如拿下面的代码举例，html逐行解析，先是head标签，所以先执行内联head样式，然后碰到了外联样式的src，去实现外联样式的代码，head解析完了，去解析body，才到内联body样式，所以实现是有顺序的。】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js导入方式</title>
    <script>
        console.log("hello,head标签的内联式")
        alert("您好，内联head样式")
    </script>
    <script src="./js/myscript.js">
    </script>
</head>
<body>
    <h1>js的导入方式</h1>
   <script>
    console.log("hello,body标签的内联式")
    alert("您好，内联body样式")
   </script>
</body>
</html>

2.js的基础语法

我们在学习js的基础语法的时候拿内联的body样式进行实现。

首先，变量的定义。通过var或者let来定义变量，也可以进行初始化。

比如：var x; let y; var z=0; let a='你好'。

其中var定义的变量具有函数作用域；let定义的变量具有块级作用域。

变量的定义结束后是常量的定义：

通过const关键字来定义。比如：const PI=3.14;

条件语句：if，else if，else。

循环语句：for，do while，while。

循环关键字：break，跳出循环，结束循环的执行；continue，跳出当前循环的剩余代码，继续下一次循环。

输出语句：

alert() 弹出警告框；

console.log() 控制台输出。

变量声明提升：

在执行所有代码之前，js有预解析阶段，会预读所有的变量的定义。

图1 先定义变量后使用变量

3.函数

1.函数的定义：

函数定义格式：function 函数名([参数1,参数2,参数3...]){}

//无参数的函数
function hello_with_return(){
            return "hello,world!-返回值"
        }
//有参数的函数
function hello_with_params(name){
            console.log("hello,"+name);
        }

2.函数的调用：

函数定义完成之后，通过调用函数头来调用函数。可以直接调用或者赋值给变量。

let a =hello_with_return();
hello_with_params("如花");

3.全局变量和局部变量：

在js中，全局变量就是在<script>中在函数体外的变量，局部变量就是在函数体内的变量。

let global_var='全局变量';
        function local_var_function(){
        let local_var='局部变量';
        console.log("函数内打印全局变量",+global_var);
        console.log("函数内打印局部变量",+local_var);
        }
        local_var_function();

4.事件处理

事件：事件就是文档或者浏览器窗口中发生的特定瞬间。

1.点击事件

点击事件的处理就是通过οnclick="某个函数"，调用某个函数来实现的。一般通过按钮button来实现。

<body>
     <button onclick="onclick_event()">这是一个点击事件按钮</button>
     <script>
        //点击事件
        function onclick_event()    
        {
            alert("点击事件触发了");
        }
     </script>
</body>

2.聚焦事件

聚焦事件的处理是通过οnfοcus="某个函数"，调用某个函数来实现的。一般是在输入框input下。

<body>
     <input type="text" onfocus="focus_event()">
     <script>
        //聚焦事件
        function focus_event(){
            console.log("获取焦点");
        }
     </script>
</body>

3.失焦事件

失焦事件的处理是通过οnblur="某个函数"，调用某个函数来实现的。一般是在输入框input下。

<body>
     <input type="text" onblur="blur_event()">
     <script>
        //失焦事件
        function blur_event(){
            console.log("失去焦点");
            
        }
     </script>
</body>

除了上述的三个事件外，还有onMouseOver鼠标经过，onMouseOut鼠标移出，onChange文本内容改变事件，onSelect文本框选中等。