JavaScript 基础

最新推荐文章于 2024-07-22 15:13:59 发布

秃头的赌徒

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量304

点赞数 5

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_70564024/article/details/131070778

版权

一 JavaScript 的书写形式

1.1 行内式

<input type="button" value="点我一下" onclick="alert('hello akai');" >

注意,JS 中的字符串常量可以用单引号表示,也可以使用双引号表示.HTML 中推荐使用双引号,JS 中推荐使用单引号(使用双引号容易出现截断问题)

1.2 内嵌式

写到 script 标签中(建议写在</body>之前)

    <script>
        alert('hello akai');
    </script>

script 标签最好写在 </body> 前,需要根据场景需求放置标签位置,因为HTML 中的代码是根据顺序执行的,可能会出现变量为初始化的场景. 例:
<head>
    <script>
        console.log(document.getElementById('but').val);
    </script>
</head>
<body>
    <input  id="but" type="button" value="点我一下" onclick="alert('hello akai');" >
</body>

1.3 外部式

写到单独的 .js 文件中(建议写在</head> 之前)

<body>
    <script src="tool.js">
    </script>
</body>

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

二输入输出

2.1 输入: prompt

弹出一个输入框

// 弹出一个输入框
<script>
    prompt('请输入你的名字:');
</script>

可以使用变量来接收 prompt 返回值.

2.2 输出: alert

// 弹出一个输出框
<script>
     alert('hello');
</script>

2.3 输出: console.log

// 在控制台打印
<script>
     console.log('这是一条测试');
</scipt>

三比较运算符

== 比较相等 , 会进行隐试的转换

=== 比较相等, 不会进行隐试类型的转换

四数组

4.1 创建数组

    <script>
        // 使用new 关键字创建
        var arr=new Array();
        // 使用字面常量方式创建
        var brr=[]
        var crr=[1,2,'haha',true];
        crr='hello';
        console.log(crr);
        console(crr[1])//此时控制台上是不会有打印结果的
    </script>

js 中数组的元素下标可以不连续

注意:不要给数组名直接赋值,此时数组中的所有元素都没有了

4.2 新增数组元素

相当于在末尾新增元素,新增的元素默认值为 undefined

    <script>
        var arr=[9,3,4,5];
        arr.length=5;
        console.log(arr);
        console.log(arr[4]);//控制台打印undefined
    </script>

通过下标新增

    <script>
        var arr=[9,3,4,5];
        arr[5]=5;
        console.log(arr[4]);
    </script>

使用 push 进行追加元素

    <script>
        var arr=[1,2,3,4,5,6];
        var newArr=[];
        for(var i=0;i<arr.length;i++){
            if(arr[i]%2==1)
            newArr.push(arr[i]);
        }
    </script>

4.3 删除数组中的元素

    <script>
        var arr=[1,2,3,4,5,6];
        //从下标为2 的元素开始,删除2个元素
        arr.splice(2,2);
        //slice 不会改变原数组的结构,获取下标2和3 的元素
        var lo=arr.slice(2,4);
        console.log(arr);
    </script>

五函数

5.1 语法格式

function 函数名(形参列表){

函数体

return 返回值

}

//函数调用

函数名 //不考虑返回值

返回值=函数名(实参列表) //考虑返回值

• 函数定义并不会执行函数体内容,必须要调用才会执行,调用几次就会执行几次

    <script>
        hello();
        hello();
        hello();
        function hello(){
            console.log('hello');
        }
    </script>

函数的定义和调用的先后顺序没有要求,且创建函数时形参可以不用声明类型

关于参数的个数

1)如果实参的个数比形参的个数多,则多出的参数不参与函数的运算

2)如果室参的个数比形参的个数少,则此时多出来的形参的是为 undefined

5.2 函数表达式

    <script>
        var add=function(){
            var sum=0;
            for(var i=0;i<arguments.length;i++){
                sum+=arguments[i];
            }
            return sum;
        }
        console.log(add(10,20));//30
        console.log(add(1,2,3,4));//10
        
        console.log(typeof add);//function
    </script>

此时形如 function(){} 这样的写法定义了一个匿名函数,然后将这个匿名函数用一个变量来表示,后面就可以通过这个 add 的变量来调用函数了

六对象的使用

使用{} 创建对象

    <script>
        var teacher={};//创建一个空对象
        var student={
            name: 'akai',
            height: 170,
            weight: 120,
            sayHello: function(){
                console.log('hello');
            }
        }
        student.sayHello();
    </script>

• 可以直接使用 { } 创建一个空对象

• 属性和方法使用键值对的形式来组织(类似于HashMap)

• 键值对之间使用 , 分割. 最后一个属性后面的,可有可无

• 方法的值是一个匿名函数

使用对象的属性和方法:

<script>       
        //使用 .成员 访问运算符来访问属性 
        console.log(student.name);
        // 使用 [ ] 访问属性,此时属性需要加上引号
        console.log(student['height']);
        // 调用方法,别忘记加(),
        student.sayHello();
</script>

七. 猜数字

<h3>猜数字游戏</h3>
请输入要1-10的数字:
<input type="text" id="inputNum"><p></p>
<input type="button" value="查看结果" onclick="checkRight()"><br/>
<div id="print">
    
</div>

<script>
    function checkRight(){
        var randNum=Math.floor(Math.random()*10+1);
        var inputNum=document.getElementById("inputNum").value;
        var mes;
        if(inputNum==randNum){
            mes="<h4>恭喜你猜对了</h4>";
        }else{
            mes="<h4>你猜错了,正确答案是:"+randNum+"</h4>";
        }
        document.getElementById("print").innerHTML=mes;
    }
    

</script>

八表白墙

<body>
    <div style="width: 100%;text-align: center;">
        <h3>表白墙</h3>
        谁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:<input id="from"><p></p>
        对谁&nbsp;&nbsp;:<input id="to"><p></p>
        说 &nbsp;&nbsp;&nbsp;&nbsp;:<input id="mes"><p></p>
        <input type="button" value="提交" onclick="check()">
        <div id="wall">
        </div>
    </div>
    <script>
        function check(){
            var fromM=$("#from");
            var toM=$("#to");
            var mesM=$("#mes");
            if(fromM.val().trim()==""){
                alert("请先输入你的名字");
                fromM.focus();
                return;
            }
            if(toM.val().trim()==""){
                alert("请先输入对方的名字");
                toM.focus();
                return;
            }
            if(mesM.val().trim()==""){
                alert("请先输入要发送的信息");
                mesM.focus();
                return;
            }
            $("#wall").append(fromM.val()+"对"+toM.val()+"说"+mesM.val()+"<p></p>");
            // 将表格数据清空
            fromM.val("");
            toM.val("");
            mesM.val("");
        }
    </script>

</body>