WEB渗透系统班-JavaScript 基础（三）&JavaScript 基础（四）

WEB渗透测试工程师系统班250303期

第22节课作业

1.解释以下代码

Var cc = [‘a’,’b’,’c’,’d’];

For(var i = 0 ; i>= cc.length ; i ++){

Alert(cc);

}

首先声明一个数组cc，包含四个元素， 'a','b','c','d'

然后用for循环，i初始值为0，循环条件是i >= cc.length，即i大于等于4才执行循环，每次循环后i值+1

alert用于弹出数组当前元素

2.创建一个永久循环，在循环中，提示用户输入两个数字，并打印出两个数字区间内的所有奇数。如果用户输入1和5，就打印出1，3，5。如果用户输入的第一个数字大于第二个数字，就结束循环。

// 永久循环，直到用户输入的第一个数字大于第二个数字

while (true) {

  // 获取用户输入的两个数字（使用+运算符快速转换为Number类型）

  const a = +prompt("请输入第一个数字：");

  const b = +prompt("请输入第二个数字：");

  // 退出条件检测：当第一个数字大于第二个数字时

  if (a > b) {

    alert("程序终止");

    break;

  }

  // 存储奇数的数组

  const odds = [];

  // 遍历区间内的所有整数

  for (let i = a; i <= b; i++) {

    // 判断奇数条件：除以2余1

    if (i % 2 === 1) odds.push(i);

  }

  // 输出结果（用空格分隔）

  alert(odds.join(" "));

}

一、笔记标题：WEB渗透系统班-JavaScript 基础（三）&JavaScript 基础（四）

二、文章内容：

1. 课程内容概要

主要知识点1：字典

<script>

    //数组定义：[1,2,3,4]

    //字典定义：{} 键值对

    var dict = {'k1':'404','k2':'505','k3':'405'};

    console.log(dict['k2']);

    dict['k1'] ='hello';

    console.log(dict['k1']);

    delete dict['k1'];

    console.log(dict['k1']);

</script>

主要知识点2：eval&time

<script>

        var a = 'alert(111)'

        eval(a);

        var myDate = new Date();

        console.log(myDate.getTime());//1745409686351

        console.log(myDate.getHours());

    </script>

Date 对象

var myDate = new Date();

myDate.getYear(); //获取当前年份(2位)

myDate.getFullYear(); //获取完整的年份(4位,1970-????)

myDate.getMonth(); //获取当前⽉份(0-11,0代表1⽉) 所以获取当前⽉份是 myDate.getMonth()+1;

myDate.getDate(); //获取当前⽇(1-31)

myDate.getDay(); //获取当前星期X(0-6,0代表星期天)

myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)

myDate.getHours(); //获取当前⼩时数(0-23)

myDate.getMinutes(); //获取当前分钟数(0-59)

myDate.getSeconds(); //获取当前秒数(0-59)

myDate.getMilliseconds(); //获取当前毫秒数(0-999)

myDate.toLocaleDateString(); //获取当前⽇期

var mytime = myDate.toLocaleTimeString(); //获取当前时间

myDate.toLocaleString( ); //获取⽇期与时间

主要知识点3：面向对象

<script>

    //番茄炒蛋：买菜 切菜 炒菜  吃 （面向过程）

    //指挥对象（厨师）java

    //类、方法、对象

    //制作手机 设计图（打电话、发短信、看短视频）————》手机实体

     function Person(name, age) {  //定义了一个 人 这个类

       this.name = name;

       this.age = age;

       this.get_name = function() {

         console.log(this.name);

       }

       this.get_age = function() {

         console.log(this.age);

       }

       this.set_name = function(name) {

         this.name = name;

         return name;

       }

       this.set_age = function(age) {

         this.age = age;

         return age;

       }

     }

    var p1 = new Person('404',18);//创建对象

    //原始数据

    p1.get_name();//404

    p1.get_age();//18

    //修改数据

    p1.set_age(99);

    p1.set_name('505');

    //新数据

    p1.get_name();

    p1.get_age();

    var p2 = new Person('xiaoming',20);

    p2.get_name();

    p2.get_age();

  </script>

    <script>

        class Person2{

            constructor(name) {

                this.name = name;

            }

            get_name(){

                console.log(this.name);

            }

            set_name(name) {

                this.name = name;

            }

        }

        var p3 = new Person2('404')

        p3.get_name();//404

        p3.set_name('666')//修改数据

        p3.get_name();//666

    </script>

主要知识点4：运算符

<script>

    /**

     * 算数运算符：+ - * / %

     *

     * 比较运算符：

     * <

     * >

     * ==

     * !=

     * <=

     * >=

     * ===

     *

     * 赋值运算符

     * =

     * +=

     * -=

     * *=

     * /=

     * %=

     *

     * 逻辑运算符

     * && 全真为真

     * || 一真为真

     * !  取反

     *

     * 三元运算符

     * 表达式1?表达式2:表达式3  1成立 执行 2  否则执行 3

     * */

    var a = 5;

    var b = 2;

    console.log(a+b);

    console.log(a-b);

    console.log(a*b);

    console.log(a/b);

    console.log(a%b);

    console.log(a<b);

    console.log(a>b);

    console.log(a==b);

    console.log(a!=b);

    console.log(a+=1); //a = a+1

    console.log(a-=1); //a = a-1

    console.log(a>b || a==b);

    console.log(a>1?'a 大于 1':'a 不大于 1');

  </script>

主要知识点5：流程控制

<script>
    //判断
    var age = 20;
    if(age >=18){
      console.log("我成年了！")
    }else {
      console.log("我未成年")
    }

    if(age ==20){
      console.log("我20岁！")
    }else if(age ==30){
      console.log("我 30岁！")
    }else if(age < 100){
      console.log("我没有 100岁")
    }

    switch (new Date().getDay()){
      case 6:
        console.log("今天周六");
            break;
        case 7:
          console.log("今天周日");
            break;
          default:
            console.log("今天周"+ new Date().getDay());
    }

    //循环
    //while 先判断条件，条件成立 去执行
    var a =0;
    while (a<10){
        a+=1;//a=a+1
        console.log("a现在的值是："+a);
    }

    //do while  不管条件成不成立  都会先执行一次
    var b =0;
    do{
        b+=1;
        console.log("b现在的值是："+b);
    }while (b<10)

    //for
    var i = 0;
    for(i;i<10; i++){
        console.log("i现在的值是："+i);
    }

  </script>

主要知识点6：dom

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dom</title>

  <script>

  </script>

</head>

<body>

  <div id="div1">

    <p>测试</p>

  </div>

  <label for="input">name:</label><input id="input" type="text" name="username" value="404"/>

<div id="div2" class="c1" style="font-size: 25px;">

    <p>这是 div2 里面的 p 标签</p>

</div>

</body>

</html>

document.getElementById('id'); //通过id来获取元素,返回指定的唯⼀元素。

document.getElementsByName("name"); //通过name来获取元素，返回name='name'的集合。

document.getElementsByClassName("classname") //⽤classname来获取元素，返回的是⼀个

class="classname"的集合(不兼容IE8及以下)。

document.getElementsByTagName('div'); //⽤元素的标签获取元素，返回所有标签=“div”的集合。

2.重点知识与细节

        概念解析

        概念1： 面向对象

        概念2： 流程控制

        概念3：dom

        关键步骤

        步骤1：无

        步骤2：

        步骤3：

        相关代码

3.实操练习 和 解析

如作业

4.个人总结

        本节课最大的收获是：学习了js的一些写法

        仍然存在疑问的地方：for循环while循环的应用

        需要课后深入学习的内容：js代码