JavaScript学习

最新推荐文章于 2024-08-27 15:59:21 发布

胧522

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量26

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/qq_56488458/article/details/131660028

版权

本文介绍了JavaScript的基础知识，包括其解释型特性、数据类型、函数定义、BOM（浏览器对象模型）的window对象以及DOM（文档对象模型）。文章还讨论了元素遍历的问题、事件绑定的不同方式，并提供了一个简单的计算器的HTML、CSS和JS实现，强调了数据交互和DOM操作的重要性。

摘要由CSDN通过智能技术生成

1、js是解释型语言，故在一行代码报错时，前面的内容能够输出，而后面就不能

2、六种数据类型：

数值、字符串（尽量使用单引号防止搞混）、布尔、undefined、null、对象

undefined：声明了，但是没有赋值，表示“未定义”或不存在

null：空值

对象：用键值对的方式

分为狭义的对象、数组、函数

3、js代码有两种编写方式：

（1）写在html的<script>代码中

（2）将script的src设置为js文件，然后在js文件中编写

4、函数

（1）没有返回值

（2）形参不需要类型

5、BOM（浏览器对象模型）

（1）window对象：

例如window.location.href表示url地址，window.screen.width表示屏幕的宽度，window.alert表示弹窗信息等等

6、DOM（文档对象模型）

（1）DOM树

四大节点：文档节点、元素节点、属性节点、文本节点

（2）document对象

例如：

典型错误：

铁哥给的这段代码是为了将三个类为hot的改为cool，但是最后只改了第一个和第三个，问题在于：

当第一次循环执行完后，elements的长度变为2了（因为原本第一个变成了cool），所以第二次循环的时候element[i]为原本的第三个

更改使用while循环：

7、事件绑定

（1）html绑定：

在js中写函数方法，然后在例如input设置onblur为对应函数方法

（2）传统DOM绑定：

在js中设置某节点的onblur

（3）DOM监听器：

设置addEventListener监听器

8、计算器例子

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/caculator.css">
</head>
<body>
    <div class="caculator">
        <div class="display" id="display">0</div>
        <div class="keys">
            <button class="operator1" data-action="clear">AC</button>
            <button class="operator1" data-action="negative">+/-</button>
            <button class="operator1" data-action="percent">%</button>
            <button class="operator2" data-action="divide">&divide;</button>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button class="operator2" data-action="multiply">&times;</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button class="operator2" data-action="substract">-</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button class="operator2" data-action="add">+</button>
            <button class="extra">0</button>
            <button data-action="decimal">.</button>
            <button class="operator2" data-action="calculate">=</button>
        </div>
    </div>
    <script src="../js/caculator.js"></script>
</body>
</html>

关于data-action的使用，data-后面可以加上各自的带含义的标识符

css：

body{
    text-align: center;
}

.caculator{
    margin-top: 25%;
    margin-left: 25%;
    margin-right: 11%;
    border-radius: 10px;
    overflow: hidden;
}

.display{
    background-color: rgb(56, 147, 147);
    width: 460px;
    height: 60px;
    font-size: 40px;
    color: aliceblue;
    text-align: right;
    padding-right: 20px;
    padding-top: 20px;
}

.keys{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0 0;
    width: 480px;
}

.keys > button{
    height: 50px;
    width: 120px;
    border-color: rgb(215, 231, 199);
}

.keys .extra{
    grid-column: 1/3;
    width: auto;
}

.keys .operator1{
    background-color: rgb(113, 230, 163);
}

.keys .operator2{
    background-color: gold;
}

网格grid布局的使用，以及对于div中的padding的理解

js：

function caculate(v1, operator, v2){
    var result = '';
    if(operator === 'add'){
        result = parseFloat(v1) + parseFloat(v2);
    }else if(operator === 'substract'){
        result = parseFloat(v1) - parseFloat(v2);
    }else if(operator === 'multiply'){
        result = parseFloat(v1) * parseFloat(v2);
    }else if(operator === 'divide'){
        result = parseFloat(v1) / parseFloat(v2);
    }else{
        result = v2;
    }
    return result;
}

var caculator = document.querySelector(".caculator"),
    display   = document.querySelector(".display"),
    keys      = document.querySelector(".keys")
    hasDecimal= false;

keys.addEventListener('click', function(e){
    if(e.target.matches('button')){
        var key            =e.target,
            keyContent     = key.textContent,
            displayNumber  = display.textContent,
            action         = key.dataset.action,
            preValueType   = caculator.dataset.preValueType;

        if(!action){
            if(displayNumber === '0' || preValueType === 'operator'){
                display.textContent = keyContent;
                caculator.dataset.preValueType = 'number';
            }else{
                display.textContent = displayNumber + keyContent;
                caculator.dataset.preValueType = 'number';
            }
        }

        if(action === 'decimal' && !hasDecimal){
            display.textContent = displayNumber + '.';
            hasDecimal = true;
        }
        
        if(action === 'clear'){
            display.textContent = '0';
            caculator.dataset.preValueType = 'number';
            caculator.dataset.firstValue = '0';
        }

        if(action === 'add' || action === 'substract'
        || action === 'multiply' || action === 'divide'){
            caculator.dataset.preValueType = 'operator';
            caculator.dataset.firstValue = displayNumber;
            caculator.dataset.operator = action;
            hasDecimal = false;
        }

        if(action === 'calculate'){
            var firstValue = caculator.dataset.firstValue;
                secondValue = displayNumber;
                operator = caculator.dataset.operator;

            hasDecimal = false;
            display.textContent = caculate(firstValue, operator, secondValue);
            caculator.dataset.operator = 'same';
        }
    }
});

首要的就是document对象使用，然后dataset对应于html中的data-，数据交互的重点

胧522

关注

0
点赞
踩
0

收藏

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

当第一次循环执行完后，elements的长度变为2了（因为原本第一个变成了cool），所以第二次循环的时候element[i]为原本的第三个。首要的就是document对象使用，然后dataset对应于html中的data-，数据交互的重点。数值、字符串（尽量使用单引号防止搞混）、布尔、undefined、null、对象。1、js是解释型语言，故在一行代码报错时，前面的内容能够输出，而后面就不能。（2）将script的src设置为js文件，然后在js文件中编写。分为狭义的对象、数组、函数。
复制链接

扫一扫