10.javascript

1. js : javascript: ecmascript(ES6)

1.基于对象， 2.事件驱动 3，弱类型 4.脚本

    1. 基于对象？？？？：封装、继承 没有多态
    2. 事件驱动： onclick。。。onchange
    3. 弱类型： 变量没有类型； var a = 1; a = “”； a = new Date();

HTML：标记

CSS: 标记的样式

JS: 动起来

  1. js出现的位置：

    1. 写在当前页中 script标签中

    2. 写外部文件中，用script标签的src属性关联

      <!DOCTYPE html>
<html lang="en">
<head>
    <!-- <base href="11111" /> -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" rel="styleSheet" href="../datepicker/skin/WdatePicker.css" />
    <script language="JavaScript" type="text/JavaScript" src="./test1.js"></script>
    <script language="JavaScript" type="text/JavaScript">

        function abc(param0) {
            // 内容
            var x = param0.innerHTML
            alert(x)
            window.close();
        }
        console.log(a1);
    </script>

</head>
<body>
    <button onclick="abc(this)">hello world</button>

</body>
</html>

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0PAx9zRo-1629174714457)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20210510091651792.png)]

2. 注释；

Ø单行注释：//this is a comment

Ø多行注释：/* This is a comment

​ block. It contains

​ several lines */

3. 字面量：

        var a = 1;
        console.info(typeof(a)); // number
        a = 1.1;
        console.info(typeof(a)); // number

        var a = "hello world";
        console.info(typeof(a)); // string
        a = '你好'
        console.info(typeof(a)); // string
        a = `你好
        ${a}
        `; // es6 模板字符串
        console.info(typeof(a)=='string'); // string
        console.info(a);

        a = /\d+/g;
        console.info(typeof(a)); // object
        console.info(a instanceof RegExp)

		// json
        a = [1, 3, 5]
        console.info(typeof(a)); // object
        console.info(a instanceof Array)
		// json
        a = {ename: "tom", age: 10, getAge:function(){return this.age}}; // object 字面量对象
        console.info(a.getAge())
        console.info(typeof(a)); // object
        console.info(typeof(a.getAge())) //         console.info(typeof(a.getAge()))
        a = function(){}
        console.info(typeof(a)); // function
        console.info(a instanceof Function)

        a = null;
        console.info(typeof(a)); // object
        a = undefined;
        console.info(typeof(a)); // undefined
		a = false
        console.info(typeof(a)); // boolean

        var a2 = NaN; // not a number
        console.info(typeof(a2)) // number
        console.info(NaN == NaN) // false
        var a3 = Infinity
        console.info(typeof(a3))  // number
        console.info(Infinity == Infinity) // true
        console.info(1 / 0)

4. 变量的作用域：

  • 全局：window对象
  • 函数： function内
    • 闭包：内不函数可以访问外部函数的变量
        var a = 10;
        function abc() {
            var b = 100;
            {
                var c = 1000
            }
			for (var i = 0;i<10;i++) {
		
			}
			console.info(i)
            console.info(a)
            console.info(b)
            console.info(c)
            function bcd(params) {
                // debugger
                var d = 10000;
                console.info(b); // 可以访问外部函数的
                console.info(c)
            }
            // 访问不了内部函数里的东西
            // console.info(d)
            bcd();
        }
        abc();
        function b1() {
            var b = 10;
            return function() {
                return b;
            }
        }
        var b = 10;
        console.info(b1()())

  • let 变量： 和java一样的作用域

  • 函数中有变量提升： 定义放在最前面

  • 函数内不写var变量是全局： this===window

            // 1. let语法
        // function abc() {
        //     {
        //         let c = 10;
        //     }
        //     for (var i = 0; i < 10; i++) { // let i = 0
        //         // debugger
        //     }
        //     console.info(i);
        //     console.info(c);
        // }
        // abc();

        function xyz() {
            var a = 100; // 3.不写var就变成全局的了
            console.info(a); // 100

            console.info(c) // 2 undefined变量提升
            var c = 10;
        }
        xyz();
        console.info(a); // 100

5. js数据类型：

  • 数值类型： number

    • NaN: not a number； // isNaN()数字判断
    • Infinity: 1/0 无限

  • 字符串：

    • ` 可以写${变量}` ‘’ “” 三种

  • 布尔： true, false,

  • 对象： object

    • null: 对象为空
    • 数组：Array
    • 正则 /\d/ RegExp

  • 函数类型; function

    • Function类型：Object

  • 未定义类型：undefined

            var a2 = NaN; // not a number
        console.info(typeof(a2))
        console.info(NaN == NaN) // false
        var a3 = Infinity
        console.info(typeof(a3))
        console.info(Infinity == Infinity) // true
        console.info(1 / 0)
        var a4;
        console.info(a4); // undefined
        var a5 = null;
        console.info(a5); // null
        console.info(a4 == a5) // 双等 内容相等
        console.info(a4 === a5) // 完全一致（类型和内容）
        console.info(1 == true) // 1和true可以比较

6.表达式与运算符

  • typeof(a); 获取变量类型

  • n instanceof 类型

  • delete: 删除属性

            var n = {ename: 'tom', age: 10};
        console.info(n)
        delete n.age // 删除对象的0属性
        console.info(n)

  • in语法： for…in

    	    var n = {ename: 'tom', age: 10};        
		console.info("-----for in 遍历属性------")
        for (var x in n) {
            console.info(`属性：${x} 值：${n[x]} \`)
        }
        console.info("--遍历数组---------")
        var n = [1, 3, 5];
        for (var x in n) {
            console.info(`属性：${x} 值：${n[x]}`)
        }
        console.info("-----------")

  • IF 语句

    • if的条件 有值就是true; 无值就是false;

      • “” 0 null undifined

         <script>
        var a = 10;
        if (a) { // 有值就是true
            console.info(1)
        } else {
            console.info(2)
        }
        
        function func1() {
            // document.getElementsByName("ename")[0].value 获取input的输入内容""  if(!"") 
            // if (document.getElementsByName("ename")[0].value == "")
            if (!document.getElementsByName("ename")[0].value) { // 没有值就不让提交
                document.getElementById("msg").innerHTML="员工名必须输入！"
                return false;
            } else {
                document.getElementById("msg").innerHTML=""
                return true;
            }
        }
    </script>
    <form action="aa">
        <input name="ename" oninput="func1()" />
        <span id="msg" style="color:red"></span>
        <button>提交</button>
        <!-- 提交按钮不提交 return false -->
        <button onclick="return false">提交</button>
        <button onclick="return func1()">提交</button>
    </form>

        // emca统一了js的标准， 网景、GG、FF、IE-MS Jscript
        var abc = function () {
            var value = arguments[0] || 'hello'
            console.info(value)
        }
        abc(); // hello
        abc("1234") // 1234
        abc = 1;
        console.info(abc)

      7.函数：

      • 第一种：直接定义

      • 定义遍历

      • 定义Function类对象

        arguments： 参数数组

        
        function xyz() {
            for (var i = 0; i < arguments.length; i++) {
                console.info(arguments[i])
            }
        }
        console.info(xyz);
        xyz();
        xyz(1);
        xyz(1, "hello");
        xyz(1, "hello", new Date());

        var a3 = function(){console.info("aaaa")};
        var a4 = new Function("console.info(\"aaaa\")");
        a4()

      • 函数还可以当类用

        
        // 函数可以当成类
        function Student(pname) {
            // 模拟属性私有化
            var name = pname;
            getter=function() {
                return name;
            }
            setter=function(pname1) {
                name = pname1;
            }
        }

        Student();
        var stu = new Student("tom1");
        var stu1 = new Student("tom2");
        console.info(stu.name);
        console.info(stu1.name);

        // 公开方法
        stu.setter("tom3");
        stu1.setter("tom44");
        console.info(stu.getter())
        console.info(stu1.getter())

      8. with(){};修改作用域链

              var a1 = {ename: 'tom', age: 10}
        with(a1) {
            debugger
            console.info(ename)
        }


            stu.setter("tom3");
      stu1.setter("tom44");
      console.info(stu.getter())
      console.info(stu1.getter())

      


# 8. with(){};修改作用域链

```js
      var a1 = {ename: 'tom', age: 10}
      with(a1) {
          debugger
          console.info(ename)
      }
posted @   剑心空明  阅读(4)  评论(0)  编辑  收藏  举报  
相关博文：
· 12.javascript_高级
· 13.js_3
· javascript 01: 语法基础
· JavaScript笔记
· JavaScript学习笔记
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛