JavaScript入门（一）

最新推荐文章于 2024-07-20 17:46:33 发布

原创最新推荐文章于 2024-07-20 17:46:33 发布 · 397 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javaee 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了JavaScript的基础知识，包括语言特性、数据类型、事件处理、页面交互等，并提供了多个实用示例，帮助初学者快速掌握JavaScript的基本用法。

1、JavaScript是属于网络的脚本语言。JavaScript被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。它能够让整个页面具有动态效果。
区分大小写。
变量是弱类型的。
每行的结尾分号可有可无。
变量声明不是必须的。统一使用 var 来定义。定义变量的时候不要使用关键字和保留字。

2、 javascript 的组成部分：
ECMAScript：它是整个 javascript 的核心，包含基本语法、变量、关键字、保留字、数据类型、语句、函数等等；
DOM：文档对象模型，包含(整个 html 页面的内容)；
BOM：浏览器对象模型,包含(整个浏览器相关内容)。

3.1、数据类型分为原始数据类型和引用数据类型。
原始数据类型：string、number、boolean、null、undefined
引用数据类型：Array、Boolean、Date、Math、Number、String、ReqExp。

3.2、运算符
其它运算符与 java 大体一致，需要注意其等性运算符。
== 它在做比较的时候会进行自动转换。
=== 它在做比较的时候不会进行自动转换。

3.3、获取元素内容
获取元素：

document.getElementById(“id 名称”);

注意：如果 id 是一个字符串，那么必须加上引号，如果是一个变量那么不需要。
获取元素里面的值：

document.getElementById(“id 名称”).value;

<head>
<meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            //获取页面指定位置元素
            var uEle = document.getElementById("username")
            //获取页面指定位置内容（值）
            var uValue = uEle.value
        }
    </script>
</head>
<body>
    用户名：<input type="text" name="username" id="username"/><br />
    密码：<input type="password" name="password" /><br />
</body>

3.4、javascript事件
表单提交事件：onsubmit
关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个返回值。
onsubmit = return checkForm()

3.5、javascripte 的输出
警告框：alert();
向页面指定位置写入内容：innerHTML(属性)

4、提交输入框校验
onsubmit()此事件写在form标签中，必须有返回值。

<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function checkFrom(){
            /**校验用户名*/
            //1.获取用户输入的数据
            var uValue = document.getElementById("user").value;
            //2.给出错误提示信息
            if(uValue==""){
                alert("用户名不能为空!");
                return false;
            }

            /*校验邮箱*/
            var eValue = document.getElementById("eamil").value;
            if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                alert("邮箱格式不正确!");
                return false;
            }
        }
    </script>
</head>
<body>
    <form onsubmit="return checkFrom()">
        用户名：<input type="text" name="username" id="user"/><br />
        邮箱：<input type="text" name="email" id="eamil"/><br />
        <input type="submit" value="注册" />
    </form>
</body>

5、页面加载事件实现轮播图
onload()此事件只能写一次并且放到body标签中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                border: 1px solid white;
                width: 500px;
                height: 350px;
                margin: auto;
                text-align: center;
            }
        </style>
        <script>
            function init(){
                window.setInterval("changeImg()",3000)
            }

            var i = 0
            function changeImg(){
                i ++;
                document.getElementById("img1").src = "../img/"+i+".jpg";
                if (i == 3){
                    i =0;
                }
            }
        </script>
    </head>
    <body onload="init()">
        <div>
            <img src="../img/1.jpg" width="100%" height="100%" id="img1"/>
        </div>
    </body>
</html>

6、先弹出图片广告，再隐藏图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function init(){
                //不加var就是成员变量
                picImg = setInterval("showAd()",3000);
            }
            function showAd(){
                var adEle = document.getElementById("img1");
                //弹出图片
                adEle.style.display = "block";
                //清除定时操作
                clearInterval(picImg);
                //隐藏图片定时操作
                hide = setInterval("hiddenAd()",3000);
            }
            function hiddenAd(){
                document.getElementById("img1").style.display = "none";
                clearInterval(hide);
            }
        </script>
    </head>
    <body onload="init()">
        <div>
            <img src="../img/1.jpg" width="100%" style="display: none" id="img1"/>
        </div>
    </body>
</html>

7.1、javascript 的引入方式
7.1.1、内部引入方式：
直接将 javascript 代码写到<script type=”text/javascript”></script>
7.1.2、外部引入方式
需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script标签的 src 属性引入该外部的 js 文件。

<script type="text/javascript" src="1.js" ></script>

7.2、BOM对象
BOM对象：浏览器对象模型(操作与浏览器相关的内容)。

7.2.1、Window对象
Window 对象表示浏览器中打开的窗口。
常用的对象方法：

alert()
confirm()
prompt()
clearInterval()
clearTimeout()
setInterval()
setTimeout()

<script type="text/javascript">
    //带确认和取消按钮
    //confirm("确定删除？");
    //输入框
    prompt("请输入年龄");
</script>

setInterval():它有一个返回值，主要是提供给 clearInterval 使用。
setTimeout():它有一个返回值，主要是提供给 clearTimeout 使用。
clearInterval():该方法只能清除由 setInterval 设置的定时操作。
clearTimeout():该方法只能清除由 setTimeout 设置的定时操作。

7.2.2、History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
常用的对象方法：

back()：加载History列表中前一个URL
forward()：加载History列表中下一个URL
go()：加载History列表中某个具体页面

<input type="button" value="返回上一个页面" onclick="javascript:history.back()"/>

go(参数)：
参数：-1 返回上一个历史记录页面；-2 返回上上一个历史记录页面，1 进入下一个历史记录页面。

7.2.3、Location对象
实现页面跳转

<input type="button" value="跳转页面" onclick="javascript:location.href='xxx.html'"/>

8、输入框校验，以及函数传参
向页面指定位置写入内容：innerHTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function showTips(id,info){
                document.getElementById(id+"span").innerHTML = "<font color='gray'>"+info+"</font>";
            }

            function checkUser(id,info){
                var uValue = document.getElementById(id).value;
                if(uValue == ""){
                    document.getElementById(id + "span").innerHTML = "<font color='red'>"+info+"</font>";
                }else{
                    document.getElementById(id + "span").innerHTML = "";
                }
            }
        </script>
    </head>
    <body>
        用户名<input type="text" id="user" onfocus="showTips('user','用户名必填！')" onblur="checkUser('user','用户名不能为空！')"/><span id="userspan"></span>
    </body>
</html>