JavaScript学习笔记（第二天）

最新推荐文章于 2023-01-08 20:56:14 发布

隔壁小王66

最新推荐文章于 2023-01-08 20:56:14 发布

阅读量397

点赞数

分类专栏： Web学习进阶文章标签： javascript

本文链接：https://blog.csdn.net/qq_16131393/article/details/72838989

版权

Web学习进阶专栏收录该内容

16 篇文章 0 订阅

订阅专栏

今天我们继续学习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>