超详细JavaScript基础二函数与流程

最新推荐文章于 2024-05-20 15:17:08 发布

炒鸡蛋44

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量693

点赞数

分类专栏：网页开发文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_55643605/article/details/121213835

版权

网页开发专栏收录该内容

9 篇文章 1 订阅

订阅专栏

l一.认识流程

在javascript中，根据代码执行的方向和功能的不同，流程又可以分为下面三大类。

顺序结构 选择结构 循环结构

1.顺序结构

在javascript中，代码在执行过程中。默认是由上而下的顺序结构，先写先执行，后写覆盖原来代码。

2.选择结构

根据条件的真/假，决定执行对应的语句，这种方式称之为选择结构，按条件的数量不同，分为下列三种。

if语句 if else语句 if else if语句新 switch语句

2.1 if语句

定义：当条件成立时，则执行对应的语句块。

格式：

注意： {}可以省略，一旦省略，if语句只控制其后的第一行代码。

除不为零值外，其他的值都为假，左侧条件的值全为假值false。

2.2 if else语句

定义：当条件成立时，则执行对应的语句块，不成立时，执行else中的语句块内容，因此，它有两种选择。

格式：

三目运算也可以实现此功能：a>b?console,log(a):console.log(b);

2.3 if else if 语句

定义：检测多个条件中，哪个条件是否成立，如果成立，则执行对应的代码块语句，否则，依次向下检测，并到最后结束。

格式：

2.4 switch语句

定义：它与if else if 语句的功能是一样的，可以根据多种条件，执行多条语句，仅是书写格式上的差别。

格式：

流程：

2.循环结构

它的功能是解决重复执行的动作，针对重复的内容，程序相应的描述，而这种描述就是循环，循环分为下面两类：

while 语句 for 语句

2.1 while语句

2.2 for语句

循环控制：

二.函数

它可以封装一段待执行的代码，避免页面载入时执行该代码，用于事件的绑定执行和直接调用。

格式：

注意：函数命名名称必须满足变量命名要求

2.1调用函数

在调用函数时，可以传递的值称为参数，参数在函数定义时以变量的形式使用，多个参数通过逗号隔开。

格式：

2.2 调用函数--有返回值

在调用函数，如果有返回值，则在函数体中调用return语句，在执行时，函数停止执行，直接返回值。

格式：

2.3匿名函数

省略函数名的函数，当一个函数没有名称且它所执行的代码块被括号包围时，这样的函数为匿名函数。

格式：

执行代码如下：

匿名函数在执行时，也可以通过括号向函数体传递实参。

三.作用域

JavaScript中作用域分为全局作用域和函数作用域，以函数的{}作为划分作用域的依据，分为全局和局部。

3.1全局变量和局部变量

3.2访问原则：

四.获取DOM元素值

4.1 获取多个DOM元素值

根据标签名获取元素节点列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素内容</title>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
    <script>
        var items = document.getElementsByTagName('li');
        console.log(items);
       for(var i = 0; i < items.length; i++){
           console.log(items[i]);
       }
    </script>
</body>
</html>

根据class属性获取元素节点列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素内容</title>
</head>
<body>
    <ul>
        <li class='item'>item1</li>
        <li>item2</li>
        <li class='item'>item3</li>
    </ul>
    <script>
        var citems = document.getElementsByClassName('item')
       for(var i = 0; i < citems.length; i++){
           console.log(citems[i]);
       }
    </script>
</body>
</html>

五操作DOM属性

5.1 元素节点对象提供了以下属性来操作元素内容

案例：获取DOM元素的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 案例：获取DOM元素的值</title>
</head>
<body>
    <input type="text" id="key">
    <div id="normal"></div>
    <div id="bold" style="font-weight: bold"></div>
    <script>
        // 1.查找元素
        var key = document.getElementById('key');
        var normal = document.getElementById('normal');
        var bold = document.getElementById('bold');

        // 2.绑定事件
        // 文本框值发生改变时触发
        key.onchange = function(){
            console.log(key.value);
            normal.innerText = key.value;
            bold.innerText = key.value;
        }
    </script>
</body>
</html>

效果如下：

5.2 通过javascript代码也可以添加、访问和删除DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            font-size: 40px;
        }
        .red{
            color:red
        }
    </style>
</head>
<body>
    <div id='title' class='div1'>
        测试用文字
    </div>
    <script>
        var title = document.getElementById('title');
        console.log(title.getAttribute('class'));
        title.setAttribute('class', 'div1 red')
    </script>
</body>
</html>

效果如下：

案例：操作DOM元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按下按钮 复制图片</title>
</head>
<body>
    <img src="图片路径" alt="">
    <img src="" alt="">
    <button id="btn">转变</button>
    <script>
        // 1.获取页面元素
        var imgs = document.getElementsByTagName('img');
        var btn = document.getElementById('btn');
        // 2.当按钮被点击时
        //      当找到第一张图片的路径 将这个路径赋值给第二张图片的src属性
        btn.onclick = function(){
            var url = img[0].getAttribute('src');
            imgs[1].setAttribute('src',url);
        }
    </script>
</body>
</html>

// getAttribute() 对象.属性

// setAttribute() 对象.属性 = 值

// removeAttribute() 对象.属性 = ""

炒鸡蛋44

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
超详细JavaScript基础二函数与流程

一.认识流程在javascript中，根据代码执行的方向和功能的不同，流程又可以分为下面三大类。顺序结构选择结构循环结构1.顺序结构在javascript中，代码在执行过程中。默认是由上而下的顺序结构，先写先执行，后写覆盖原来代码。2.选择结构根据条件的真/假，决定执行对应的语句，这种方式称之为选择结构，按条件的数量不同，分为下列三种。if语句 if else语句 if else if语句新switch语句2.1...
复制链接

扫一扫