JavaScript基础语法总结

最新推荐文章于 2023-05-09 19:08:55 发布

Hudie.

最新推荐文章于 2023-05-09 19:08:55 发布

阅读量813

点赞数

分类专栏： 3.前端技术专题文章标签： JavaScript基础语法总结

本文链接：https://blog.csdn.net/weixin_43691058/article/details/100751591

版权

3.前端技术专题专栏收录该内容

49 篇文章 2 订阅

订阅专栏

JavaScript基础语法：
(1)使用Js
(2)变量运用/数据类型
 (3)Js运算符
 (4)Js的数组
 (5)函数
 (6)练习：表单校验
 (7)对象

一、Js介绍

JavaScript是一种基于对象和事件驱动的客户端脚本语言。
JavaScript是一种轻量级的编程语言。
JavaScript是可插入HTML页面的编程代码。
JavaScript插入HTML页面之后，可在所有的现代浏览器中执行。
Js的用途：使页面更加丰富，使页面动起来。

二、Js基础语法

(1)使用Js

①定义事件时直接写入Js脚本代码
②嵌入式:<script>标签
③文件调用方式:Js文件

function method2() {
    alert("引入Js文件");
}

<head>
    <title>JavaScript</title>
    <meta charset="UTF-8">

    <script type="text/javascript" src="./myJs.js"> </script>
    
    <script type="text/javascript">
        function method1() {
            alert("嵌入式标签");
        }
    </script>


</head>

<body>
    <!-- 1.定义函数时,直接使用Js -->
    <input type="button" value="普通按钮" onclick="alert('直接使用Js')" />

    <!-- 2.嵌入式标签 -->
    <input type="button" value="普通按钮1" onclick="method1()" />

    <!-- 3.引入Js文件 -->
    <input type="button" value="普通按钮2" onclick="method2()" />
</body>

(2)变量运用/数据类型

①第一个字符必须是字母、下划线或者美元符号。
②区分大小写，分号可有可无
③弱类型语言

var i = 3;
var s = "abc";

String类型字符串由一对单引号或双引号括起来
所有数字都是由浮点型表示的，不区分整型数值和浮点型
布尔数据类型只有两个值，分别为true和false
特殊的数据类型：null和undefined
复合数据类型–对象，如Array、Function

(3)Js运算符

"==“比较值的大小，”==="类型和值都一致的情况下才为true。

(4)Js的数组

①数组内可以存放任意类型的数据
②数组元素不赋值，则为undefined
③打印数组时，如果某个元素没有赋值，则为""
④访问数组范围以外的元素时，不会出现越界异常，为undefined
⑤定义了数组大小，依然可以添加更多的元素

⑥数组的4种定义：

var arr = new Array();
var arr2 = new Array(2);
var arr3 = new Array(true,123,false);
var arr4 = [false,"aaa",123];

⑦创建二维数组的2种方法:

//方法一:
var a = new Array(7);
for(var i=0;i<=6;i++){
	a[i] = new Array(2);
}
a[0][0] = "星期日";
a[0][1] = "Sunday";
//方法二:
var a1 = [[0,1,2],[1,2,3]];
a1[0][1] = 5;//覆盖掉原有的值

(5)函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

<head>
</script>
    <script type="text/javascript">
        function method3(a, b) {
            // alert(a+b);
            return (a + b);
        }
    </script>
</head>

<body>
    <!-- 带参数的函数 -->
    <input type="button" value="普通按钮3" onclick="alert(method3(10,20))">
</body>

常用事件：

onclick 单击
ondblclick 双击
onmouseover 鼠标滑入
onmouseout 鼠标划出
onload 加载

其他事件：
在这里插入图片描述

(6)练习：表单校验

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<!-- 要求:
    1.用户名,密码,不能为空
    2.密码 确认密码一致
    3.邮箱要匹配正则表达式:str.match("正则表达式")
    4.正则.test("字符串") -->

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function checkForm() {
            var username = document.getElementById("username");
            var password = document.getElementById("password");
            var repassword = document.getElementById("repassword");
            var email = document.getElementById("email");
            if (username.value == "") {
                alert("用户名不能为空!");

            }
            if (password.value == "") {
                alert("密码不能为空");

            }
            if (repassword.value != password.value) {
                alert("两次密码输入不一致");

            }
            if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.a-zA-Z0-9_])+/.test(email)) {
                alert("请输入合法的邮箱地址");
            }
        }
    </script>
</head>

<body>
    <div style="height: 600px;background-color: pink;">
        <div
            style="border: 5px solid gray; background-color: white;width: 600px;position:absolute;left: 300px;top: 100px;">
            <form action="" method="post" name="form" onsubmit="return checkForm()">
                <table width="100%" cellspacing="15">
                    <tr>
                        <td>用户名</td>
                        <td>
                            <input type="text" id="username" name="username" value="" />
                        </td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td>
                            <input type="text" id="password" name="password" value="">
                        </td>
                    </tr>
                    <tr>
                        <td>确认密码</td>
                        <td>
                            <input type="password" id="repassword" name="repassword" value="">
                        </td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>
                            <input type="radio" name="sex" value="man" cheacked="checked" />男
                            <input type="radio" name="sex" value="woman" />女
                        </td>
                    </tr>
                    <tr>
                        <td>邮箱</td>
                        <td>
                            <input type="email" name="email" />
                        </td>
                    </tr>
                    <tr>
                        <td>爱好</td>
                        <td>
                            <input type="checkbox" name="hobby" value="sing" checked="checked" />唱歌
                            <input type="checkbox" name="hobby" value="dancing" />跳舞
                            <input type="checkbox" name="hobby" value="skiing" />滑雪
                        </td>
                    </tr>
                    <tr>
                        <td>籍贯</td>
                        <td>
                            <select name="province" value="">
                                <option>-请选择-</option>
                                <option>-河南省-</option>
                            </select>
                            <select name="city">
                                <option>-请选择-</option>
                                <option>-郑州市-</option>
                                <option>-洛阳市-</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>头像</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>简介</td>
                        <td>
                            <textarea name="info" cols="30" rows="10"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="button" value="注册" onclick="checkForm()" />
                            <input type="reset" value="重置">
                        </td>

                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>

</html>

(7)对象

在这里插入图片描述
内置对象:


简单对象	String 、Number、Boolean
组合对象	Array、Math、Date
复杂对象	Function、Regex、Object

String对象:
Array对象
Date对象
Math对象
Number对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Js对象</title>
    <script>
        function load() {
            //String对象
            var str = "hello JavaScript";
            alert(str.toUpperCase());//转换为大写
            alert(str.indexOf(11, "S"));//获取从某位开始的某个字符的下标
            alert(str.charAt(2));//获取指定位置的字符
            alert(str.substring(7, 10));//获取子字符串

            //Array对象
            var arr1 = new Array(10, true, 'hello');
            var arr2 = [30, false, "script"];

            alert(arr1.join(":"));//通过指定分隔符将数组分隔在一个字符串中
            alert(arr1.concat(arr2));//用于连接两个或多个数组,会返回被连接数组的一个副本
            alert(arr1.reverse());//反转数组,生成新的数组
            alert(arr1.sort());//对数组元素进行排序

            //日期对象
            var date = new Date();
            alert(date);
            alert(date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());

            //Math对象
            var m = -10.329;
            alert(Math.abs(m));//绝对值函数
            alert(Math.round(m));//四舍五入
            alert(Math.random());//随机数函数

            //number对象
            var n = 2.111;
            alert(n.toFixed(2));//四舍五入为指定小数位的数字
        }
    </script>
</head>

<body onload="load()">

</body>

</html>