DOM对象——Web学习day3

最新推荐文章于 2024-09-26 19:38:44 发布

「已注销」

最新推荐文章于 2024-09-26 19:38:44 发布

阅读量94

点赞数

分类专栏： Web集训2021 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44453019/article/details/120532319

版权

Web集训2021 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

js介绍

css+html 纯静态网页，动态效果，轮播。点击按钮。。。。

js运行再浏览器端的。

网景 ecmascript 标准，各大浏览器厂商都去实现这个标准。

标准：基于对象，有很多内置对象，各个对象功能不同。 bom,dom,其他内置对象。date

es 版本介绍

版本	官方名称	描述
1	ECMAScript 1 (1997)	第一版。
2	ECMAScript 2 (1998)	只改变编辑方式。
3	ECMAScript 3 (1999)	添加了正则表达式。添加了 try/catch。
4	ECMAScript 4	从未发布过。
5	ECMAScript 5 (2009)阅读更多：JS ES5	添加了“严格模式”。添加了 JSON 支持。添加了 String.trim()。添加了 Array.isArray()。添加了数组迭代方法。
5.1	ECMAScript 5.1 (2011)	编辑改变。
6	ECMAScript 2015阅读更多：JS ES6	添加了 let 和 const添加了默认参数值添加了 Array.find()添加了 Array.findIndex()
7	ECMAScript 2016	添加了指数运算符（**）。添加了 Array.prototype.includes。
8	ECMAScript 2017	添加了字符串填充。添加了新的 Object 属性。添加了异步功能。添加了共享内存。
9	ECMAScript 2018	添加了 rest / spread 属性。添加了异步迭代。添加了 Promise.finally()。增加 RegExp。

ECMAScript 通常缩写为 ES。

js 三种引入方式

行内js
写在

js元数据类型

字符串、数字、布尔、数组、对象、Null、Undefined

<script>
        // 元数据类型   NaN
        var a ;    //undefined这个值表示变量不含有值
        var b = 1;  //number。JavaScript只有一种数字类型。数字可以带小数点，也可以不带。
        var f = 1.1; //number
        var c = '2';  //string  字符串： ''  ""  es6:``
        var d = true; //boolean。布尔（逻辑）只能有两个值：true 或 false
        var e = null; //object  支持的对象 json。可以通过将变量的值设置为 null 来清空变量
       
        console.log(typeof (a),typeof (b),typeof (c),typeof (d),typeof (e),typeof (f))
    </script>

console.log() 方法用于在控制台输出信息。

运算符typeof：js中获取数据类型常用的四种方式之一

可以判断 js 中基本数据类型，但无法判断对象的具体类型。当使用基本包装类型创建字符串，数组或布尔值时，使用typeof返回的是Object

变量

上面 a b c d e f ，咱们称之为变量，也叫标识符

变量用于储存数据的，运算数据，可以存储变化的数据。 var a = “admin”

语法：类型var 变量名 = 值

在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 “Volvo”，然后把它放入 id=“demo” 的 HTML 段落中：

<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

标识符

由数字，字母，下划线，$,

取名的时候：1. 最好见名之义 2. 语法规定：不能以数字开头。

var a = “123a” ×错数字开头

var b = “a1 2b” x 错有空格

变量定义方式

var a = 1;  // 老的方式
let b = 1; // 范围更小，块级别。推荐使用
const c = 1;  // 常量。

常量

不能二次赋值。

运算

运算符 = 用于赋值。

运算符 + 用于加值。
自增自减 ++ –
比较比大小

===：比较数据和类型 ==：只比较数据值结果 boolean
逻辑运算与或非 && || ！结果类型 boolean

三目运算

由三个表达式组成的
表达式1？表达式2:表达式3
结果： 如果1为true  结果 就是 2 的结果
      相反就是  3的结果。

语句

顺序执行
1. 程序默认读取文档树，依次往下执行

判断语句

<script>
    var age = 19;
   
    if (age>=18){
        alert("努力学习")
    }else{
       alert("还可以玩一下。")
    }
   
  </script>

选择语句

switch(变量){
	case 值1 : 
		//代码
		break; //结束选择语句。   如果不加break,称之为case穿透。
	case 值2 : 
		//代码
		break;
	case 值3 : 
		//代码
		break;
	case 值4 : 
		//代码
		break;
	default:
		break;
}

循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //循环： 重复执行，花括号 中的代码
        /**
         * 执行流程：
         *   1. 先执行表达式1，初始化条件，只执行一次
         *   2. 执行表达式2，，判断条件是否满足循环的条件。  true
         *   3. 循环体。
         *   4. 表达式3  i++  意思是    i = i +1
         *   5. 第二轮执行 表达式2
         *   6. 依次类推，直到表达式2不满足就跳出循环。
         *   考点： 哪个表达式至少执行一次， 1，2
         *         哪个表达式比谁多执行一次 .2比3
         */
        for (let i = 0; i < 100; i++) {
            //循环体。
            console.log("我爱你！！！")
        }
    </script>
</body>
</html>

5、while循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        /*
        *  执行流程，判断满足，就执行循环体，，
        *   写循环要避免死循环，，，，要注意改变条件的值。
        * */
        var i = 0;
        while (i < 10){
            alert("执行"+i+"次")
            i++;  //给程序一个出去的机会。
        }
    </script>
</body>
</html>

全局方法

直接写方法名字就能调用。

setInterval() : 像闹钟，循环执行

setTimeout() ：像炸弹，到了时间炸一次。

clearInterval()

clearTimeout()

应用

倒计时三秒，跳转百度

<script>
    // 我们不能以现有的知识去理解一个新的知识点。
    var i = 3;
    function test() {
        document.body.innerHTML = i--;
    }
   var id = setInterval("test()",1000);
    setTimeout(function () {
        clearInterval(id)  //清除定时器。
        location.href = "https://baidu.com"
    },3000)
</script>

页面10秒倒计时，显示发射

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p{
      text-align: center;
      font-size: 30px;
      color: red;
    }
  </style>
</head>
<body>
  <p id="p2" style="color: red;font-size: 30px">10</p>
</body>
</html>
<script>
  // 获取p对象  alt + enter
  let p = document.getElementById("p2");  //固定写法，找到页面上的id为p2的标签对象
  // p.innerText = 20    innerText：获取容器内容   将内容改为20
  // p.style.color = "green"     将颜色改为绿色
  // p.style.fontSize = "50px"   将字体大小改为50像素
  var num = p.innerText;          将容器数字赋值给num
  var id =  setInterval(function () {
      num--;
      if (num<=0){ //数字到0了，显示 发射两字
          //清除定时器
          clearInterval(id)
          //第二个： 改变p的内容为发射。
          p.style.color = "green"
          p.style.fontSize = "50px"
          p.innerText = `发射！！`
      }else{ // 数字大于0  ，继续减一回写到p标签
          p.innerText = num;
      }
  },1000);
</script>

如何获取网页内容

第一步：获取元素对象

第二部：对象.下面的

容器

innerHTML、innerText这两个属性都是获取document对象文本内容，但使用起来还是有区别的；

1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)

2） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
表单
1. value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <form action="http://localhost:8080/login" onsubmit="return false">  <!--同步登录。以后不用。js发送异步 请求  1. js先获取用户名 ，或去密码，js发送请求。-->
      <input id="user" type="text" name="username">
      <input id="pwd" type="password" name="pwd">
<!--      <input id="bt" type="submit" value="登录" οnclick="login()">-->
      <input id="bt" type="submit" value="登录">
  </form>
</body>
</html>
<script>

    // 点击事件第一种写法
    /*function login(){
        // alert("点击")
    }*/
    // 点击事件第二种写法
  var bt =   document.getElementById(`bt`);
    bt.onclick = function(){
        let user = document.getElementById("user");
        let pwd = document.getElementById("pwd");
        let inputUser = user.value.trim()
        let inputpwd = pwd.value.trim()

        if ("" == inputUser || inputpwd == ""){ // js可以校验用户名和密码
            alert("请输入用户名或密码")
            return;//后边代码不执行。
        }

    }

</script>