JavaScript学习笔记（第二天）

来源：互联网发布：农历日期 java代码编辑：程序博客网时间：2024/05/16 01:14

今天我们继续学习Javascript。

Js运算符

js运算符感觉跟java一样，其实没什么好讲。

1算术运算符：
这里写图片描述

加减乘除，递增递减。一样一样。

2赋值运算符：

这里写图片描述

还是跟java一样，略过。

关于+运算符提一下，其实也跟java一样，可以做加法运算，也可以连接两个字符串。当然，跟java不一样的是当数字跟字符串进行加法运算，结果是做字符串的拼接。

3一元运算符：

delete：删除对象属性或者方法引用。

举个列子：

    <script>            var o=new Object();            o.name="David";            alert(o.name);            delete o.name;            alert(o.name);        </script>

定义一个对象o以及其属性name，先弹出name，然后删除name属性，在弹出。

结果：第一个弹窗弹出undefined

js验证

js验证一般是对form表单进行验证，验证内容其实跟android登陆一样，是否为空，格式是否正确等等。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>js验证</title>        <script>            function validate_required(field,txt) {                with(field){                    if(value==null||value==""){                        alert(txt);                        return false;                    }                }            }            function validate_form(thisform) {                with (thisform){                    if(validate_required(email,"Email must be filled out!")==false){                        email.focus();                        return false;                    }                }            }        </script>    </head>    <body>         <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">             Email:<input type="text" name="email" size="30">             <input type="submit" value="Submit">         </form>    </body></html>

这里以一个例子来讲述我的理解。定义两个带参函数validate_required，validate_form。

validate_required函数参数分别为一个对象和字符串，通过with方法来引用field对象的value属性，进行非空判断，如果为空弹出txt，返回false。

validate_form函数传入表单对象，通过with方法来引用表单对象的email属性，调用validate_required方法传入email对象以及字符串，如果为false，让email获取焦点，返回false

在标签中创建一个form表单。action表示提交动作，一般会使用服务器脚本来处理提交表单。

onsubmit等号右边可以理解为一个函数，在web开发中onsubmit必须有2返回值，返回true允许提交表单，返回false则不允许提交表单，说明提交的表单有问题。

是最重要的表单元素，type=txt表示输入框，名称是email，size是输入长度。type=”submit”则表示为提交按钮。

实际效果，点击submit会弹出Email must be filled out!，然后email输入框获取焦点。

下面来一个完整的邮箱验证

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>js验证</title>        <script>            function validate_required(field,txt) {                with(field){                    if(value==null||value==""){                        alert(txt);                        return false;                    }else {                        var apos=value.indexOf("@");                        var dot=value.lastIndexOf(".");                        if(apos<1||dot-apos<2){                            alert(txt)                            return false;                        }else {                            return true;                        }                    }                }            }            function validate_form(thisform) {                with (thisform){                    if(validate_required(email,"Email must be filled out!")==false){                        email.focus();                        return false;                    }else {                        alert("输入正确");                    }                }            }        </script>    </head>    <body>         <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">             Email:<input type="text" name="email" size="30">             <input type="submit" value="Submit">         </form>    </body></html>

在前面的基础上稍加修改，添加一些对邮箱的验证逻辑，如果包含@，和点，且@的坐标应该大于1，点的坐标应该比@坐标大2，验证结果

这里写图片描述

反之，

这里写图片描述

JavaScript HTML DOM

通过上面的一翻学习，我们会思考如何操作HTML中那么多的标签，那就是通过HTML DOM 来访问的。
先来看一下HTML DOM（文档对象模型）的结构

这里写图片描述

其实这些就是html中的结构标签头部，内容区域等

js能够做什么？js能够改变页面所有的html元素，属性，css，以及各种事件，例如点击事件。

查找HTML元素

1：通过id查找

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><p id="name">张三</p><script>    var x=document.getElementById("name");    document.write("元素值为："+x.innerHTML);    alert(x.innerHTML);</script></body></html>

通过id=name找到p标签里的内容

2通过标签名找html元素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>通过标签名查找HTMl元素</title></head><body>  <div id="main">      <p>通过标签名查找HTMl元素1</p>      <p>通过标签名查找HTMl元素2</p>      <p>通过标签名查找HTMl元素3</p>      <p>通过标签名查找HTMl元素4</p>  </div>  <div id="main2">      <p>通过标签名查找HTMl元素</p>  </div><script>    var x=document.getElementById("main");    var y=x.getElementsByTagName("p");    alert(y[0].innerHTML);</script></body></html>

这里只讲为啥y是数组，因为div标标签下可以包含多个标签。

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

1改变HTML输出流。

通过document.write(）；来写入内容

2改变html内容。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>改变 HTML 输出流</title>    <script>        function aa() {            document.getElementById("p1").innerHTML="Hello world";        }    </script></head><body onload="aa()"><p id="p1">ni hao !</p><script>    document.write(Date());</script></body></html>

3改变html属性

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>改变html属性</title>    <script>        function aa() {            document.getElementById('t1').type="button";            document.getElementById('img').src="img/SAM_0371.JPG";        }    </script></head><body onload="aa()"><form name="form" onload="aa()">    <input type="text" id="t1">    <input type="button" id="btn"></form><img src="img/SAM_0384.JPG" id="img"></body></html>

改变 HTML 样式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>改变 HTML 样式</title>    <script>        function aa() {            document.getElementById("p1").style.color='red';        }    </script></head><body onload="aa()">   <p id="p1">aaaaaa</p></body></html>

查找id為p1的標簽，改變樣式style中color為紅色。

可以這麽寫：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>改变 HTML 样式</title>    <script>        function aa() {           var x=document.getElementById("p1");           x.style.color='red';           x.style.backgroundColor='blue';        }    </script></head><body onload="aa()">   <p id="p1">aaaaaa</p></body></html>

所以學習的時候可以發散了一下。

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

通過對onlick=“函數”來處理點擊事件。

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。</title>    <script>        function aa() {            alert("謝謝點擊");        }    </script></head><body><img src="img/SAM_0371.JPG" onclick="aa()"></body></html>

效果：點擊圖片，彈出彈窗

这里写图片描述

點擊修改元素。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。</title>    <script>        function aa() {            alert("謝謝點擊");        }        function bb() {            document.getElementById('p1').innerHTML="謝謝點擊";        }    </script></head><body><!--<img src="img/SAM_0371.JPG" onclick="aa()">--><p id="p1" onclick="bb()">Hello wrold</p></body></html>

有參函數

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。</title>    <script>        function aa() {            alert("謝謝點擊");        }        function bb() {            document.getElementById('p1').innerHTML="謝謝點擊";        }        function cc(a) {            a.innerHTML='shui jiao le '        }    </script></head><body><!--<img src="img/SAM_0371.JPG" onclick="aa()">--><!--<p id="p1" onclick="bb()">Hello wrold</p>--><p id="a" onclick="cc(this)">dian wo shi shi </p></body></html>

通過點擊事件修改標簽屬性

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>HTML 事件属性</title>    <script>        function aa() {            document.write(Date())        }    </script></head><body>    <button onclick="aa()">dian ji wo</button></body></html>

onload 和 onunload 事件

分別在進入和退出頁面時被觸發。可用與處理cookie

onchange 事件

類似與android中對edittext輸入内容的監聽，儅輸入内容發生變化時調用。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>HTML 事件属性</title>    <script>        function aa() {            document.write(Date())        }        function bb(a) {           a.value++;        }    </script></head><body><button onclick="aa()">dian ji wo</button><input type="text" id="txt" onchange="bb(this)"></body></html>

每次改變内容+1。

onmouseover 和 onmouseout 事件與onmousedown、onmouseup

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。onmousedown鼠標點下，onmouseup鼠標擡起，跟onlick一起用

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>onfocus事件</title>    <script>        function aa(a) {            a.style.backgroundColor='red';        }    </script></head><body><input type="text" onfocus="aa(this)"><p onmousedown="style.backgroundColor='red'" onmouseup="style.backgroundColor='blue'">onmousedown 和 onmouseup</p><p onmouseout="style.backgroundColor='red'" onmouseover="style.backgroundColor='blue'">onmouseout 和 onmouseover</p></body></html>

onload事件：

頁面加載結束調用

onfocus事件
獲取焦點時調用

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>onfocus事件</title>    <script>        function aa(a) {            a.style.backgroundColor='red';        }    </script></head><body><input type="text" onfocus="aa(this)"></body></html>

獲取焦點時改變背景色。

十二點多了，睡覺！！！！

阅读全文

0 0