Javascript学习笔记基础（一）

最新推荐文章于 2024-09-23 08:37:48 发布

moonnn_light

最新推荐文章于 2024-09-23 08:37:48 发布

阅读量300

点赞数 1

分类专栏： js基础一文章标签：学习笔记 javascript

本文链接：https://blog.csdn.net/moonnn_light/article/details/73472962

版权

js基础一专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js基本语法

有下面几个点：

变量
作用域
语法
逻辑语句结构
事件的绑定
函数（定义）
一个计算器的小练习

变量

变量是存储信息的容器。

js变量可用于存放值和表达式。变量命名可以用$和_或者字母开头，并且变量的名称对大小写敏感（newarr和newArr是两个不同的变量）

数据类型

变量的数据类型有number、string、boolean、object、array等

作用域

变量的作用域有两种，全局变量和局部变量：

全局变量：在函数或者事件之外的所有变量；
局部变量：事件或函数里面的变量，作用范围只是该范围之内。

如果其他作用域里面想用局部变量，则使用闭包，但由于用闭包会将值驻留在内存中，增大内存的使用量，如果使用不当还会造成内存泄漏，从而降低性能，所以在不熟练的情况下应该避免使用它。

语法

js数据类型统一关键字：var；
用法：var 变量名称；//变量的声明（给变量初始化）。

逻辑语句结构

一、循环结构

1、for(；；){balabala}；
2、for(..in..){balabala}；in前是变量，后为一个组；
循环遍历：针对于对象组，含义是在一组里找某个东西；
3、while(条件){};
do{}while(条件);
二者的区别是do while循环至少执行一次。
4、switch(判断的值){
case“”：break;
case“”：break;
…
}
一般的网上选择支付方式和点击购买使用的逻辑结构是绑定click事件，然后利用switch(){case :fun;break;}来进行折扣的计算.

二、逻辑选择结构

1、if(){}else{};

2、for循环，这个可以看下面的例子；
写一个九九乘法表示例：

for(var i=1;i<10;i++){
    for(var j=1;j<=i;j++){
        document.write(i+"*"+j+"="+i*j+(i*j>=10?" ":"&nbsp;"));
    }
    document.write("<br/>");
}

js事件的绑定

有两种方式绑定：在DOM元素中直接绑定和在JavaScript代码中绑定；
js常见的事件有：onclick、onmouseenter(不会触发父元素)、onmouseleave(不会触发父元素)、onmouseout(会冒泡触发父元素)、onmousemove、onmouseover(会冒泡触发父元素)、onfocus、onblur等。

函数

函数的定义

（1）function 函数名称(){…};
（2）function one(){…}；
（3）var two = function(){…};
（4）var arr = {
three : function(){…};
}
传参的目的：简化代码，重利用。

一个计算器的小练习：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <style type="text/css">
        table{
            border-collapse: collapse;
            width:400px;
        }
        td{
            border:1px solid #aaa;
            text-align: center;
        }
        .txt {
            width: 99%;
            height: 100px;
            font-size: 3em;
            text-align: right;
        }
        .td_list {
            width: 100px;
            height: 100px;
            line-height: 100px;
        }
        .td_title {
            width: 100px;
            height: 50px;
        }
        .td_list input {
            width: 100%;
            height: 100%;
            font-size: 2.5em;
        }

        .td_title input {
            width: 100%;
            height: 100%;
            font-size: 2.5em;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td colspan="4">
            <input type="text" class="txt" disabled/>
        </td>
    </tr>
    <tr>
        <td colspan="2" class="td_title"><input type="button" class="btn" value="C"/></td>
        <td colspan="2" class="td_title"><input type="button" class="btn" value="DEL"/></td>
    </tr>
    <tr>
        <td class="td_list"><input type="button" class="btn" value="7"/></td>
        <td class="td_list"><input type="button" class="btn" value="8"/></td>
        <td class="td_list"><input type="button" class="btn" value="9"/></td>
        <td class="td_list"><input type="button" class="btn" value="/"/></td>
    </tr>
    <tr>
        <td class="td_list"><input type="button" class="btn" value="4"/></td>
        <td class="td_list"><input type="button" class="btn" value="5"/></td>
        <td class="td_list"><input type="button" class="btn" value="6"/></td>
        <td class="td_list"><input type="button" class="btn" value="*"/></td>
    </tr>
    <tr>
        <td class="td_list"><input type="button" class="btn" value="1"/></td>
        <td class="td_list"><input type="button" class="btn" value="2"/></td>
        <td class="td_list"><input type="button" class="btn" value="3"/></td>
        <td class="td_list"><input type="button" class="btn" value="-"/></td>
    </tr>
    <tr>
        <td class="td_list"><input type="button" class="btn" value="0"/></td>
        <td class="td_list"><input type="button" class="btn" value="."/></td>
        <td class="td_list"><input type="button" class="btn" value="+"/></td>
        <td class="td_list"><input type="button" class="btn" value="="/></td>
    </tr>
</table>
<script>
    var result=[];
    var btn = document.getElementsByClassName("btn");
    var Screenval = document.getElementsByClassName("txt")[0];
    for(var i=0;i<btn.length;i++){
        btn[i].onclick=function(){
            /*首先把数字写上去*/
            if(!isNaN(this.value)||this.value=="."){
                if(Screenval.value.indexOf(".") == -1){
                    Screenval.value += this.value;
                }
                else if(this.value != "."){
                    Screenval.value += this.value;
                }
            }
            /*再判断所点击的符号*/
            else{
                if(this.value=="+"||this.value=="-"||this.value=="*"||this.value=="/"){
                    //添加如果是负数显示到显示屏上
                    //减start
                    if(this.value=="-" && Screenval.value=="" && result.length==0){
                        Screenval.value = this.value;
                    }
                    //减end
                    if(Screenval.value != "" && Screenval.value != "-"){
                        result[result.length]=Screenval.value;
                        result[result.length]=this.value;
                        Screenval.value="";
                    }else if(Screenval.value == ""){
                        result[result.length]=Screenval.value;
                        result[result.length]=this.value;
                        Screenval.value="";
                        result.splice(result.length-3,2);
                    }

                    /*
                    ***这块有问题if(this.value == result[result.length-1]){
                        result.pop(result[result.length-1]);
                    }else if(this.value != result[result.length-1]){
                        result.pop(result[result.length-1]);
                        result[result.length]=this.value;
                    }****
                    */
                  //  console.log(result);
                }
                if(this.value=="="){
                    result[result.length]=Screenval.value;
                    var str="";
                    for(var i=0;i<result.length;i++){
                        str+=result[i];
                    }
                    Screenval.value=eval(str);
                    result = [];
                }
                if(this.value=="C"){
                    Screenval.value="";
                    result=[];
                }
                if(this.value=="DEL"){
                    Screenval.value=Screenval.value.substr(0,Screenval.value.length-1);
                }
            }
        }
    }
</script>
</body>
</html>