JavaScript（w3c持续更新。。）

其他 2020-04-05 10:08:03 阅读次数: 0

文章目录

JavaScript

  • JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

  • JavaScript 是 web 开发者必学的三种语言之一：

    （1） HTML 定义网页的内容
    （2）CSS 规定网页的布局
    （3）JavaScript 对网页行为进行编程

基础部分

js的引入方式

  • 可以使用script标签，在script标签内编写js代码，script标签可以放在head或者body标签内
  • 也可以使用script标签引入外部js文件。

提示：把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

js的显示数据方式

  • 使用 window.alert() 写入警告框(弹框)
  • 使用 document.write() 写入 HTML 输出(仅用于测试)
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台

JavaScript 变量

  • 使用var来声明
  • 在这里插入图片描述

JavaScript 注释

  • // 或者 /* 和 */ 之间的代码被视为注释

JavaScript 算数

  • <script>
	x = "8" + 3 + 5;
	document.getElementById("demo").innerHTML = x;
</script>

//输出835

  • <script>
	var x = 3 + 5 + "8"
	document.getElementById("demo").innerHTML = x;
</script>

//88
关于js中的 == 与 ===
  • == 代表相同， ===代表严格相同
  • 当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行 === 比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false.

js 数据类型

  • JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：
  • JavaScript 拥有动态类型
    • 这意味着相同变量可用作不同类型：
    •   var x;               // 现在 x 是 undefined
  var x = 7;           // 现在 x 是数值
  var x = "Bill";      // 现在 x 是字符串值

（1） JavaScript 只有一种数值类型，即写数值时用不用小数点均可：
（2） 字符串变量可以使用单引号也可以使用双引号。嵌套使用时，内类型引号须与外不同。
（3） JavaScript 数组

  • var cars = ["Porsche", "Volvo", "BMW"];

（4） JavaScript 对象

  • var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

js类型运算符

运算符 描述
typeof 返回变量的类型
instanceof 返回true，对象是对象类型的实例
typeof 运算符
  • 可以返回4种原始类型之一：string，number，boolean，undefine
  • 可以返回2种复杂类型之一：function，object（对象，数组或null）
  •   typeof ""                  // 返回 "string"
  typeof "Bill"              // 返回 "string"
  typeof 0                   // 返回 "number"
  typeof 314                 // 返回 "number"
  • typeof 运算符对数组返回 “object”，因为在 JavaScript 中数组属于对象。
  • 在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。
  • 任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined

js值

空值

空值与 undefined 不是一回事，空的字符串变量既有值也有类型。

  • var car = ""; // 值是 ""，类型是 "string"
Null
  • 在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物，null 的数据类型是对象，可以通过设置值为 null 清空对象：
    null是object类型
Undefined 与 Null 的区别
  • Undefined 与 null 的值相等，但类型不相等

js函数(待更新。。。)

  • 定义一个函数
    function myFunction(p1,p2) {
	return p1*p2;
}
  • 使用函数能够对代码进行复用：只要定义一次代码，就可以多次使用它
  • 当 JavaScript 到达 return 语句，函数将停止执行。
  • () 运算符调用函数

    调用方法时，toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果。

js对象

  • 定义一个对象
    var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
  • 在函数定义中，this 引用该函数的“拥有者”。
  • 访问对象属性
    • objectName.propertyName
    • objectName["propertyName"]
  • 访问对象方法
    • objectName.methodName()
    • 如果您不使用 () 访问 fullName 方法，则将返回函数定义。

js事件

  • 通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。
    <p>点击按钮来显示日期。</p>

<button onclick="displayDate()">时间是？</button>

<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>
  • 常见的 HTML 事件
    事件 描述
    onchange HTML 元素已被改变
    onclick 用户点击了 HTML 元素
    onmouseover 用户把鼠标移动到 HTML 元素上
    onmouseout 用户把鼠标移开 HTML 元素
    onkeydown 用户按下键盘按键
    onload 浏览器已经完成页面加载

js字符串

  • 字符串长度：内建属性 length 可返回字符串的长度：

    var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;

  • js中转译字符

    \"		转译后"
\'		转译后'
\\		转译后\

  • 长代码行换行

    • 为了最佳可读性， 程序员们通常会避免每行代码超过 80 个字符串。
    • 对长字符串换行的最安全做法（但是有点慢）是使用字符串加法：
      document.getElementById("demo").innerHTML = "Hello" +
      "Kitty!";

  • 字符串可以是对象

    var x = "Bill";			//string类型
var y = new String("Bill");//object类型
x == y    true
x === y   false
    • JavaScript 对象无法进行对比，比较两个 JavaScript 将始终返回 false。
    var x = new String("Bill");  // x 是对象
var y = new String("Bill");  // y 也是对象
document.getElementById("demo").innerHTML = (x==y);  // false

高级部分（待待待更新。。）

在这里插入图片描述

  • 面向过程（pop）

    • 分析出解决问题所需要的步骤，然后用函数一步一步实现，使用的时候再一个一个的依次调用就可以了。

  • 面向对象（oop）

    • 把事务分解成为一个个对象，然后由对象之间分工合作

  • 面向对象的特性：

    • 封装性
    • 继承性
    • 多态性

  • 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串，数值，数组，函数等。

  • 对象由属性和方法组成

    属性：事物的特征，在对象中用属性表示
    方法：事物的行为，在对象中用方法表示

创建类和对象

  • 创建类
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    <script>
        //1.创建类 class创建一个 明星类
        class Star {
            constructor(uname,age) {
                this.uname = uname;
                this.age = age;
            }
        }

        //2.利用类创建对象 new
        var cyx = new Star('陈奕迅',18);
        var hg = new Star('胡歌',20);
        console.log(cyx.uname);
        console.log(hg);
    </script>
</body>
</html>
    在这里插入图片描述
    • 多个方法
    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    <script>
        //1.创建类 class创建一个 明星类
        class Star {
            constructor(uname,age) {
                this.uname = uname;
                this.age = age;
            }
            sing(song) {
                console.log(this.uname + song);
            }
        }

        //2.利用类创建对象 new
        var cyx = new Star('陈奕迅',18);
        var hg = new Star('胡歌',20);
        console.log(cyx.uname);
        console.log(hg);
        //类里面所有函数不需要写function
        //多个函数方法之间不需要添加逗号分隔
        cyx.sing('两只老虎');
        hg.sing('春天在哪里');

    </script>
</body>
</html>
      在这里插入图片描述

类的继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    <script>
        class Father {
            constructor(x,y) {
                this.x = x;
                this.y = y;
            }
            sum(){
                console.log(this.x + this.y);
            }
        }
        class Son extends Father{
            constructor(x,y) {
                // this.x = x;
                // this.y = y;
                // 使用以上注释部分会报错
                super(x,y);
            }
        }
        var son = new Son(1,2);
        son.sum();
        var son2 = new Son(12,21);
        son2.sum();

    </script>
</body>
</html>
  • super关键字调用父类普通函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    <script>
        //super 关键字调用父类普通函数
        class Father {
            say() {
                return '我是爸爸';
            }
        }
        class Son extends Father{
            say() {
                console.log(super.say() + '的儿子');
            }
        }
        var son = new Son();
        son.say();
        //继承中的属性或者方法查找原则：就近原则
        // 1.继承中，如果实例化一个子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
        // 2.继承中，如果自类里面没有，就去查找父类有没有这个方法，如果有，就执行父类这个方法(就近原则)
    </script>
</body>
</html>
  • super必须放在子类this之前
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    <script>
        //父类有加法方法
        class Father {
            constructor(x,y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        //子类继承父类加法方法 同时 扩展减法方法
        class Son extends Father{
            constructor(x,y) {
                //利用super 调用父类构造方法
                //super 必须在子类this之前调用
                super(x,y);
                this.x = x;
                this.y = y;
            }

            substract() {
                console.log(this.x - this.y);
            }
        }
        var son = new Son(5,3);
        son.substract();
        son.sum();
        //继承中的属性或者方法查找原则：就近原则
        // 1.继承中，如果实例化一个子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
        // 2.继承中，如果自类里面没有，就去查找父类有没有这个方法，如果有，就执行父类这个方法(就近原则)
    </script>
</body>
</html>
  • 使用类的注意事项
  1. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象
  2. 类里面的共有的属性和方法一定要加this使用
  3. 类里面this指向问题：constructor 里面的this指向实例对象，方法里面的this指向这个方法的调用者
LuckyGuyy
发布了53 篇原创文章 · 获赞 13 · 访问量 2269
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_36821220/article/details/103254254
w3c
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
周排行
购置笔记本常识
从源码看Spring Security之采坑笔记（Spring Boot篇）
大数据学习——高可用配置案例
如何避免选择不专业的建站公司?
Euclid's Game HDU - 1525（博弈）
面试笔记（六）---Js实现eventHandler
Windows 实例搭建的 FTP 在外网无法连接和访问
设计模式 : 桥接模式
USB 设备驱动开发之几个重要结构体分析
14-p14_sqrt求平方根
每日归档
更多
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022