JavaScript入门（一）

来源：互联网发布：美国商务签证知乎编辑：程序博客网时间：2024/05/20 09:43

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列表中前一个URLforward()：加载History列表中下一个URLgo()：加载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>

阅读全文

0 0