10.javascript

最新推荐文章于 2023-10-14 20:54:19 发布

简至大道

最新推荐文章于 2023-10-14 20:54:19 发布

阅读量92

点赞数 3

分类专栏：前端文章标签： javascript js

又见面了，惊不惊喜，意不意外

本文链接：https://blog.csdn.net/zxyhj/article/details/119754009

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1. js : javascript: ecmascript(ES6)

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

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

HTML：标记

CSS: 标记的样式

JS: 动起来

js出现的位置：

写在当前页中 script标签中

写外部文件中，用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)
      }

简至大道

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.javascript

1. js : javascript: ecmascript(ES6)1.基于对象， 2.事件驱动 3，弱类型 4.脚本基于对象？？？？：封装、继承没有多态事件驱动： onclick。。。onchange弱类型：变量没有类型； var a = 1; a = “”； a = new Date();HTML：标记CSS: 标记的样式JS: 动起来js出现的位置：写在当前页中 script标签中写外部文件中，用script标签的src属性关联
复制链接

扫一扫