【JavaScript】前端基础：javascript简介

本文链接：https://blog.csdn.net/Mr_TianSDQ/article/details/130689128

本文介绍了JavaScript中的常用对话框如alert和confirm，以及事件处理，如window.onload、form.submit和超链接的onClick事件。同时展示了如何使用按钮或图片代替提交按钮，以及通过表单对象和document获取元素的方法。

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

1. 常用对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js基础语法 </title>
    <script type="text/javascript">
        alert("hello javascript")
        var result = confirm("确定要退出吗？");
        alert(result)
        result=confirm("确定要退出吗？");
        alert(result)
    </script>
</head>

<body>
    
</body>
</html>

2.常用事件介绍

<!DOCTYPE html>

    <head>
        <title>常用事件介绍 </title>
        <script type="text/javascript">
            function BodyLoad(){
                alert("窗体加载完毕");
            }
            function FormSubmit(){
                alert("表单被提交了");
            }
        </script>
    </head>

    <body onload="BodyLoad()">
        <form onsubmit="FormSubmit()">
            <a href="#" onmouseover="this.style.fontSize='18px'"
            onmouseout = "this.style.fontSize='12px'">会变字体的超链接</a>
            <input type="submit" value="提交表单" />
        </form>
        
    </body>
</html>

3.超链接中如何使用onClick事件

<!DOCTYPE html>

    <head>
        <title>常用事件介绍 </title>
        <script type="text/javascript">
            function AddTowNum(a,b){
                alert(a+b);
            }
            function AddNum(a,b){
                alert(a+b);
                return a+b<10;
            }
        </script>
    </head>

    <body onload="BodyLoad()">
        <form>
            <a href="javascript: AddTowNum(10,20)">超链接中函数的使用</a><br><br>
            <a href="../5.DIV/01盒子模型.html" onclick="return AddNum(2,6)">超链接中事件的使用</a>
        </form>
    </body>
</html>

4.使用普通按钮或图片代替提交按钮

<!DOCTYPE html>

    <head>
        <title>常用事件介绍 </title>
        <script type="text/javascript">
            function submitMyForm(){
                if(confirm("确认要提交表单吗？")){
                    alert("马上提交表单");
                    myform.submit();
                }else{
                    alert("表单取消");
                }
            }
        </script>
    </head>

    <body>
        <form name="myform" action="../5.DIV/01盒子模型.html" method="post">
            <input type="button" value="提交表单" onclick="submitMyForm()" />
            <input src="D:/素材/icon/浅蓝.jpeg" alt="" onclick="submitMyForm()" />
        </form>
    </body>
</html>

5.通过表单对象“分级定位”方法获取表单中的元素

<!DOCTYPE html>

    <head>
        <title>常用事件介绍 </title>
        <script type="text/javascript">
            function SubmitMyFrom(){
                var uName = myform.userName.value;
                alert("当前输入的是:"+uName);
            }
        </script>
    </head>

    <body>
        <form name="myform" action="../5.DIV/05float.html" method="post">
            请输入用户名：<input type="text" name="userName" />
            <input type="button" value="提交表单" onclick="SubmitMyFrom()"/>
        </form>
    </body>
</html>

6.06通过document获取表单的元素对象

<!DOCTYPE html>
    <head>
        <title>常用事件介绍 </title>
        <script type="text/javascript">
            function SubmitMyFrom(){
                var uName = document.getElementById("userName");
                alert(uName.value);
            }
        </script>
    </head>
    <body>
        请输入用户名：<input type="text" id="userName" />
        <input type="button" value="提交表单" onclick="SubmitMyFrom()"/>
    </body>
</html>