JAVAScrip 介绍 DOM对象 BOM对象

最新推荐文章于 2025-09-05 11:22:47 发布

刘广睿

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量392

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： javascript 表单提交

本文链接：https://blog.youkuaiyun.com/a18302465887/article/details/76448589

前端技术专栏收录该内容

2 篇文章

订阅专栏

本文介绍了JavaScript的基础知识，包括语言特性、语法、数据类型、事件处理、函数定义及文档对象模型操作等内容，并提供了表单验证和窗口操作的具体实例。

1. JavaScript的概述

是基于对象和事件驱动的语言，应用于客户端(浏览器)

解释：对象的概念的源于java，但是java 需要自己去创建，但是在JS的编程中已经提供的许多对象比如有 Array Boolean Date Math Number String RegExp 等对象，类如还有BOM对象 Window Location Screen 等对象的存在

特点

安全性目前我还没有看出到底怎么安全
跨平台（多个浏览器都可用支持）
互动性（就是可用看到被）

JS的引入方式 (2种)

第一种方式 <script type="text/javascript" src="js文件的路径"></script>
第二种方式 <script type="text/javascript" >自己去写函数</script>

2. JS的语法介绍

基本语法

定义的变量是区分大小的类型统一var变量因为是属于弱类型语言 var aa=”aaa”; //分号有无都可以
在定义变量的只能以字符下划线 $ 开头

数据类型

1.Undefined
定义的一个变量但是没有赋值 var a；
2.String

3.Boolean

4.Number

5.Null
表示的代表引用的对象位空 var a= null；

类型转换

1.Boolean (Value)
2.Number(Value)
parseInt(Value) parseFloat(value) 都可以转为数字类型
3.String(Value) 都可以转换为指定的类型
注意事项：在执行类型转换的时候
比如 Boolean类型进行加减是0 或者1 的运算
比如字符串跟数字进行比较的时候将字符串转数字如果字符串不是数字显示的NaN
比如对象跟字符串进行比较的时候将对象转数字

运算符注意事项

==和===区别

==比较的是值
=== 比较的是值和类型

逻辑运算判断代码示例

（1）if 语句
    * 代码
    //if语句
    var a = 10;
    if(a==10) {
        alert("10");
    } else {
        alert("other");
    }       

    （2）switch语句
    * 在java里面 
    switch(a) {
        case 10:
         break;
        case 20:
         break;
        default:
        ....
    }
    * 代码
    var b = 5;
    switch(b) {
        case 4:
            alert("4");
            break;
        case 5:
            alert("5");
            break;
        default:
            alert("other");
    }

    （3）while循环语句
    * 代码
    //while语句
    var i = 4;
    while(i<6) {
        alert(i);
        i++;
    }

    （4）for循环语句
    * 代码
    //for语句
    for(var i=0;i<3;i++) {
        alert(i);
    }

常用的事件

 onclick ：鼠标单击事件
 ondblclick ：鼠标双击事件
 onmouseover ：鼠标悬停事件
 onmousemove ：鼠标移动事件
 onmouseout ：鼠标离开事件
 onkeyup ：键盘抬起事件
 onload ：页面加载事件
 onfocus ：获得焦点事件
 onblur ：失去焦点事件
 onchange ：下拉列表改变事件
 onsubmit ：表单提交事件

事件的用法（3种）

(1)使用事件属性调用 JS方法
<input type="button" value="第一种方式" onclick="add1();"/>

(2) 使用事件属性获取标签ID，调用事件属性
document.getElementById("buttonid").onclick = add1;

(3) 获取事件属性标签id，自己写function
document.getElementById("buttonid1").onclick = function() { alert("aaaaa"); };

JavaScript 函数定义

**第一种匿名函数**
var sum = function( ){
}

**第二种函数**
function  fun(var par) {

}
使用对象定义函数
var pp = new function(“参数1”,”参数2”,”方法体”);

JS种的全局函数

1. eval( ）将字符串转为js代码执行

var str = “alert(‘123456’);”;
//alert(str);
eval(str);

2. isNaN ( )检查某个值是否为数字

如果是数字返回 false,如果不是一个数字返回 true。

3. encodeURI() 把字符串编码为 URI

var str2 = “abc测试中文”;
var encodestr2 = encodeURI(str2);

4. decodeURI() 解码某个编码的 URI

var decodestr2 = decodeURI(encodestr);

Document对象

document代表整个文档对象

使用方法案例
第一种
document.write("aa");
第二种
var input1 = document.getElementById("textid"); document.write(input1.value);
第三种
getElementsByName(): 根据标签里面name属性的值得到标签对象，返回数组
var inputs1 = document.getElementsByName(“name1”);
alert(input1.value);
第四种
innerHTML属性不是dom里面属性
var span1 = document.getElementById(“spanid”);
alert(span1.innerHTML);

表单的提交

第一种方式正常表单提交

<form  method="get">
            username: <input type="text" name="username"/>
            <br/>
            password: <input type="password" name="password"/>
            <br/>
            <input type="submit" value="提交" />
        </form>

第二种方式

通过button的点击事件提交

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

        <script type="text/javascript">
            function form01() {
            //得到form标签
            var form01 = document.getElementById("form01");
            //提交form表单
            form01.submit();

            alert("ni")
          }
        </script>
    </head>
    <body>

        <form id="form01" method="get">
            username: <input type="text" name="username"/>
            <br/>
            password: <input type="password" name="password"/>
            <br/>
            <input type6="button" value="提交" onclick="form01()"/>
        </form>

表单校验提交

表单提交的校验基于 input type=”submit” value=”提交”

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

        <script type="text/javascript">
            function pp(){

        var username = document.getElementById("usernameID").value;
        var password = document.getElementById("passwordID").value;

            alert(password);
            if(password != "" && username != "" )
                alert("数据可以提交");
                return true;

            }else {
                alert("数据不能提交");
                return false;
            }


        </script>
    </head>
    <body>

        <form method="get" action="#" onsubmit="return pp();">
            username: <input type="text"   id="usernameID" name="username"/>
            <br/>
            password: <input id="passwordID" type="password" name="password"/>
            <br/>
            <input type="submit" value="提交"/>
        </form>
    </body>

Window 常用的一些方法

·               window.location="http://www.baidu.com";

                window.open(); //打开一个新的界面

                // 确认框
                var flag = window.confirm("您确定要删除该记录吗?"); 

                history.go(-1);   //返回上前一页

                window.setTimeout("alert('hello')",3000);

                window.setInterval("alert('hello')",5000);

                window.clearInterval();
               
                window.clearTimeout();