javaScript

jsp javaScrip
发布时间 :
阅读 :
  1. javaScrip 基础知识点
    1. 规则
    2. 数据型
    3. 严格检查格式
    4. 流程控制
    5. Map和Set（集合）
    6. 方法
    7. 变量
    8. 消息对话框
    9. 第一个 javaScript
  2. 常用系统函数
    1. 常用系统函数-全局函数
    2. 常用系统函数-常用的对象函数
  3. JSON
  4. 面向对象
    1. proto 原型继承
    2. class 继承
  5. 关于 BOM 对象的操作
  6. 关于 DOM 对象的操作
    1. 获取节点
      1. 更新节点
    2. 删除节点
    3. 获取和设置表单的值

javaScrip 基础知识点

规则

标识符的定义规则：数字、字母、美元符号、下划线、中文(不使用)，不能以数字开头。
定义变量使用 var //var 代表任意数据类型；
输出语句： alert(); 或console.log();
输出：document.write(“输出内容”)

数据型

  1. 不区分小数和整数。

  2. NaN //not a number。

  3. Infinity //表示无限大。

  4. 字符串用 “” 或 ‘’ 引起来。
    多行编写字符串用一对 “Tab 上面的键” 包起来。
    模板字符串： ${变量名}。

  5. 网页上使用 console.log() 输出。

  6. = 赋值
    == 等于（类型不一样，值一样，为true）
    === 绝对等于（类型一样，值一样，结果为true）

  7. undefind //未定义;

  8. 数组
    （1）定义： 

             var arr=[//任意数据类型]
         new Array(//任意数据类型)

    （2）尾部 - push()添加，pop()删除。
    （3）头部 - unshift()添加，shift()删除。

  9. 对象
    (1)定义：

         var 对象名 = {
         属性名: 属性值,
         属性名: 属性值,
         属性名: 属性值
         }
(2) 引用： 对象名.属性名
(3) 动态删减     delete 对象名.属性名
    动态添加   对象名.属性名=属性值
(4) 判断某一对象是否存在某一属性值      "属性名" in 对象名 （判断包括继承来的属性）
    对象名.hasOwnProprty("属性名")    可以用来判断对象本身是否存在该属性

严格检查格式

严格检查语句必须写在 javaScript 的第一行。
“use strict”;
作用：预防 javaScript 的随意性可能导致产生的问题。
局部变量建议使用 let 定义。

流程控制

  1. if语句，while语句，for循环 和Java使用规则相同。
    forEach 循环：
     对象名.forEach(function (value)){     //value 表示当前元素;
     console.log(value);  
 }
  2. for、、、in 循环：
     for(var x in 对象名){
 //打印下标;
 console.log(x);
 }
  3. for、、、of 循环:
       for(var x of 对象名){
     //属性值;
   console.log(x);
   }
  4. if…else 例题
    成绩查询，要求：输入成绩打印等级。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>if...eles</title>
    <script type="text/javascript">
        function scores(a){
            if(a>=90&&a<=100){
                alert(a+"优秀");
            }else if(a>=80&&a<=89){
                alert(a+"良好");
            }else if(a>=70&&a<=79){
                alert(a+"一般");
            }else if(a<=69&&a>=60){
                alert(a+"及格");
            }else if(a>=0&&a<=59){
                alert(a+"不及格");
            }else{
                alert("查询失败")
                }
        }
    </script>
</head>
<body>
    <form>
        <input type="text" name="score01" />
        <input type="submit" value="查询" onclick="scores(score01.value)"/>
    </form> 
</body>
</html>

Map和Set（集合）

  1. Map 是一种双列集合，它的每个元素都包含一个键对象Key和值对象Value，键和值对象之间的映射关系是一对一的，其中键对象Key不允许重复，只要指定了Key，就能找到对应的Value。
     var map=new Map([["tom",15],["jake",15],]);
 //通过key获得value;
 var name=map.get("tom");
 console.log(name);
 map.set("jake",16);   //修改;
 map.set("linsa",17);  //添加;
  2. Set 集合的特点是元素无序，并且不能重复。
    let set=new Set([元素1，元素2···]);
    添加元素：对象名.add(待添加元素);
    删除元素：对象名.delete(待删除元素);
    查看元素是否存在 存在true,不存在false : 对象名.has(查看元素);

方法

  1. 定义方法1：
     function  方法名(参数1，参数2、、、){
         //方法体;
     }
  2. 定义方法2：
      let 变量名= function (参数1，参数2、、、){
           //方法体;
                 }
  3. argiuments
    作用：用于存储所有参数的数组;
  4. 存储多余参数的数组;
     //数组名xt 可以自定义，符合标识符的特点就可以;
 let fount= function (a,b,...xt){
             console.log("a->"+a);
             // console.log("b->"+b);
             console.log(xt);
             }

变量

  1. 作用域：函数体内定义，函数体外不能调用。内部函数可以引用外部函数的成员，外部函数不能引用内部函数的成员。
  2. let 是定义局部作用域的关键字。
  3. Apply 是定义this的指向问题,使用格式：待指向方法名.Apply(将要指向的方法名.[]);

消息对话框

  1. 警告框
1
alter("javascript函数");
  1. 确认框
1
var yu=confirm("javascript函数");
  1. 提示框
1
var s1=prompt("text","defaultText");

第一个 javaScript

  1. 内联javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>第一个javaScript</title>
    <script type="text/javascript">
        function message(){
            alert("调用head中定义的javaScrip");
        }
    </script>
</head>

<body>
    <h3>head标记内定义的javaScrip函数</h3>
    <form>
        <input name="btnCallJS" type="button"  onclick="message();" value="事件调用自定义函数"/>
    </form>
</body>
</html>

运行结果：

2. 外联Javascript
(1)创建 .js文件，在里面编写JavaScript，作为外联的JavaScript

1
2
3
4
5
6
function message(){
         alert("调用js函数！sum（100，200）="+sum(100,200));
     }
 function sum(x,y){
        return (x+y);
      }

(2)创建 .html文件，编写网页主体。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>head中定义的js函数</title>

    <script type="text/javascript" src="js_01.js">
    
    </script>
</head>
<body>
 
    <h4>head标记内定义两个js函数</h4>
    <p>无返回值函数：meassage()</p>
    <p>有返回值函数：sum(x,y)</p>
    <form>
    <input name="bt" type="button" onclick="message();" value="计算并显示两个数的和" />
    </form>
</body>
</html>

常用系统函数

函数需要先定义后使用，JavaScript函数一般定义在HTML文件的头部head标记或外部JS文件中，而函数的调用可以在HTML文件的主体body标记中任何位置

常用系统函数-全局函数

常用系统函数-常用的对象函数

JSON

·JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

  1. 任何 javaScript 支持的类型都可以用 JSON 表示。

  2. 对象 JSON 之间的转换
    （1）对象转换为 JSON字符串:

     JSON.stringify(对象名);

    (2) JSON字符串转换为对象： 

     JSON.parse('{"属性名1":"属性值1","属性名2":"属性值2","属性名3":"属性值3"}');
 eg: 
 JSON.parse('{"name":"guolulu","class":"二班","age":20}');

面向对象

proto 原型继承

    格式: 子对象名.__proto__=父对象
    eg:
           let student={
            name: "学生",
            class: "二班",
            age:20
            }
            let teather={
                work: "计算机老师",
                class: "一年级"
            }
            student.__proto__=teather;

class 继承

        //定义一个 学生类;
           class people{
                  name= "学生";
                   classroom= "二班";
                   lage=20;
            }
            //定义一个 老师类,并且继承学生类;
            class student extends people  {
                work="学生"
                //创建构造器;
                constructor(name) {
                    //将父类的属性name重写为老师;
                   super(name);
                    console.log(name+"曾经也一名"+this.work);
                }
                }
            //通过子类调用父类的属性；
          let st=new student("老师");

关于 BOM 对象的操作

window 代表其全局对象，可以获取窗口属性
Navigator 代表当前浏览器对象
Screen 代表屏幕的尺寸(像素 px)
loction 代表当前页面的 URL信息
document 代表当前网页的文本内容
history 代表浏览器的历史纪录
cookie 用户可以改变浏览器的设置，以使用Cookies。同时一些浏览器自带或安装开发者工具包允许用户查看、修改或删除特定网站的Cookies信息。

关于 DOM 对象的操作

获取节点

更新节点

（1）修改指定节点的文内容:

    节点属性.innerText="修改后的文本内容";

(2) 解析 HTML 文本标签：
文本加粗 eg: 节点属性.innerHTML=”需要加粗的文本内容“
(3) 追加标签:

（4） 在前面添加节点:

        let h01=document.getElementById("h01");
        let p01=document.getElementById("p01");
        let outId=document.getElementById("outId");
        outId.insertBefore(p01,h01);

删除节点

(1）直接通过该节点的父节点删除该节点:
父节点.removeChild(选择删除的子节点);
(2) 通过子节点获取父节点，然后通过父节点删除子节点:

let out=子节点.parentElement;
out.removeChild(字节点);
(3) 通过索引删除子节点:
父节点.removeChild(父节点.children[索引]);

获取和设置表单的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
            eg:
                    <title>guolulude</title>
                <p>
                        <span>用户名</span> <input type="password",name="密码" id="passwords">
                    </p>
                   <p>
                       <input type="radio" name="sex" id="jizhumima" value="1"> 记住密码
                       <input type="radio" name="sex" id="wangjimima" value="2"> 忘记密码
                   </p>
                    <script>
                    "use strict";
                    let remember=document.getElementById("jizhumima");
                    let forget=document.getElementById("wangjimima");
                    let password=document.getElementById("passwords");
                    <!--修改密码-->
                    password.value="guolulu";
                    <!--获得密码-->
                    let pwd=password.value;
                    <!--获取单选框的值-->
                    let rememberValue=remember.value;
                    <!--获取单选框的状态，返回值为boolean值,ture表示选中,false表示未选中-->             forget.checked;
                    </script>
```    
## 前端表单提交验证及密码MD5加密

```javaScript
"https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js " 该加密脚本不是我写的！！
            <!DOCTYPE html>
        <html lang="en">
        <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
        <head>
            <meta charset="UTF-8">
            <title>guolulude</title>
            <form action="https://froginthewell.github.io/"  method="post"  onsubmit="return shout()">
                <p>
                    <span>用户名</span> <input type="text",name="name" id="name">
                </p>
                <p>
                    <span>用户密码</span> <input type="password",name="password" id="passwords">
                    <button type="submit" >登录</button>
                </p>
                <p>
                    <input type="radio" name="sex" id="jizhumima" value="1"> 记住密码
                    <input type="radio" name="sex" id="wangjimima" value="2"> 忘记密码
                </p>
                <input type="hidden" name="password" id="hide">
            </form>
            <script>
                "use strict";
                let name=document.getElementById("name");
                let password=document.getElementById("passwords");
                let hisepwd=document.getElementById("hide");
                let pwd=md5("123456");
                function shout(){
                    if(name.value=="2356645209"&&md5(password.value)==pwd){
                        hide.value=md5(password.value);
                        return true;
                    }else {
                        alert("用户名或密码错误请重新输入！")
                        return false;
                    }
                }
            </script>
        </head>
        <body>
        <!--<script>alert("javaScript")</script>-->
        </body>
        </html>
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com

赏

©2016-2020 Yelog

Built with Hexo and 3-hexo theme

×

喜欢就点赞,疼爱就打赏