看完了小米12发布会,连夜写下这篇JavaScript笔记

2024-03-09 19:38

本文主要是介绍看完了小米12发布会,连夜写下这篇JavaScript笔记,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JavaScript

  • 关于JavaScript的基本内容了解
  • 基础语法
  • 基本对象
  • BOM
  • DOM
  • 事件监听机制
    • 常见的事件

在这里插入图片描述

关于JavaScript的基本内容了解

一、概念: 一门客户端脚本语言
  1.运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
  2.脚本语言:不需要编译,直接就可以被浏览器解析执行了

二、功能:可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。

三、JavaScript发展史:
  1. 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C-- ,后来更名为:ScriptEase
  2. 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
  3. 1996年,微软抄袭JavaScript开发出JScript语言
  4. 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。

 JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

基础语法

  • ECMAScript:客户端脚本语言的标准
    1. 基本语法
      1. 与html结合方式

        1. 内部JS:
          • 定义<script>,标签体内容就是js代码
        2. 外部JS:
          • 定义<script>,通过src属性引入外部的js文件
        • 注意:
          1.<script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
          1. <script>可以定义多个。
      2. 注释

        1. 单行注释://注释内容
        2. 多行注释:/注释内容/
      3. 数据类型

        1. 原始数据类型(基本数据类型):

          1. number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
          2. string:字符串。 字符串 “abc” “a” ‘abc’
          3. boolean: true和false
          4. null:一个对象为空的占位符
          5. undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
        2. 引用数据类型:对象

      4. 变量

        • 变量:一小块存储数据的内存空间

        • Java语言是强类型语言,而JavaScript是弱类型语言。

          • 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
          • 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
        • 语法:

          • var 变量名 = 初始化值;
        • typeof运算符:获取变量的类型。

          • 注:null运算后得到的是object
      5. 运算符

        1. 一元运算符:只有一个运算数的运算符
          ++,-- , +(正号)

          • ++ --: 自增(自减)
            • ++(–) 在前,先自增(自减),再运算
            • ++(–) 在后,先运算,再自增(自减)
          • +(-):正负号
          • 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
            • 其他类型转number:
              • string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
              • boolean转number:true转为1,false转为0
        2. 算数运算符

              • / % …
        3. 赋值运算符
          = += -+…

        4. 比较运算符

          < >= <= == ===(全等于)

          • 比较方式
            1. 类型相同:直接比较
              • 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
            2. 类型不同:先进行类型转换,再比较
              • ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
        5. 逻辑运算符
          && || !

          • 其他类型转boolean:
            1. number:0或NaN为假,其他为真
            2. string:除了空字符串(""),其他都是true
            3. null&undefined:都是false
            4. 对象:所有对象都为true
        6. 三元运算符
          ? : 表达式
          var a = 3;
          var b = 4;

          var c = a > b ? 1:0;

          • 语法:
            • 表达式? 值1:值2;
            • 判断表达式的值,如果是true则取值1,如果是false则取值2;
      6. 流程控制语句

        1. if…else…
        2. switch:
          • 在java中,switch语句可以接受的数据类型: byte int shor char,枚举(1.5) ,String(1.7)
            • switch(变量):
              case 值:
          • 在JS中,switch语句可以接受任意的原始数据类型
        3. while
        4. do…while
        5. for
      7. JS特殊语法

        1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议)
        2. 变量的定义使用var关键字,也可以不使用
          • 用: 定义的变量是局部变量
          • 不用:定义的变量是全局变量(不建议)

在这里插入图片描述

基本对象

	1. Function:函数(方法)对象1. 创建:1. var fun = new Function(形式参数列表,方法体);  //忘掉吧2. function 方法名称(形式参数列表){方法体}3. var 方法名 = function(形式参数列表){方法体}2. 方法:3. 属性:length:代表形参的个数4. 特点:1. 方法定义是,形参的类型不用写,返回值类型也不写。2. 方法是一个对象,如果定义名称相同的方法,会覆盖3. 在JS中,方法的调用只与方法的名称有关,和参数列表无关4. 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数5. 调用:方法名称(实际参数列表);2. Array:数组对象1. 创建:1. var arr = new Array(元素列表);2. var arr = new Array(默认长度);3. var arr = [元素列表];2. 方法join(参数):将数组中的元素按照指定的分隔符拼接为字符串push()	向数组的末尾添加一个或更多元素,并返回新的长度。3. 属性length:数组的长度4. 特点:1. JS中,数组元素的类型可变的。2. JS中,数组长度可变的。3. Boolean4. Date:日期对象1. 创建:var date = new Date();2. 方法:toLocaleString():返回当前date对象对应的时间本地字符串格式getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差5. Math:数学对象1. 创建:* 特点:Math对象不用创建,直接使用。  Math.方法名();2. 方法:random():返回 0 ~ 1 之间的随机数。 含0不含1ceil(x):对数进行上舍入。floor(x):对数进行下舍入。round(x):把数四舍五入为最接近的整数。3. 属性:PI6. Number7. String8. RegExp:正则表达式对象1. 正则表达式:定义字符串的组成规则。1. 单个字符:[]如: [a] [ab] [a-zA-Z0-9_]* 特殊符号代表特殊含义的单个字符:\d:单个数字字符 [0-9]\w:单个单词字符[a-zA-Z0-9_]2. 量词符号:?:表示出现0次或1次*:表示出现0次或多次+:出现1次或多次{m,n}:表示 m<= 数量 <= n* m如果缺省: {,n}:最多n次* n如果缺省:{m,} 最少m次3. 开始结束符号* ^:开始* $:结束2. 正则对象:1. 创建1. var reg = new RegExp("正则表达式");2. var reg = /正则表达式/;2. 方法	1. test(参数):验证指定的字符串是否符合正则定义的规范	9. Global1. 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。  方法名();2. 方法:encodeURI():url编码decodeURI():url解码encodeURIComponent():url编码,编码的字符更多decodeURIComponent():url解码parseInt():将字符串转为数字* 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为numberisNaN():判断一个值是否是NaN* NaN六亲不认,连自己都不认。NaN参与的==比较全部问falseeval():讲 JavaScript 字符串,并把它作为脚本代码来执行。3. URL编码传智播客 =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

BOM

  1. 概念:Browser Object Model 浏览器对象模型

    • 将浏览器的各个组成部分封装成对象。
  2. 组成:

    • Window:窗口对象
    • Navigator:浏览器对象
    • Screen:显示器屏幕对象
    • History:历史记录对象
    • Location:地址栏对象
  3. Window:窗口对象

    1. 创建

    2. 方法

      1. 与弹出框有关的方法:
        alert() 显示带有一段消息和一个确认按钮的警告框。
        confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
        * 如果用户点击确定按钮,则方法返回true
        * 如果用户点击取消按钮,则方法返回false
        prompt() 显示可提示用户输入的对话框。
        * 返回值:获取用户输入的值

      2. 与打开关闭有关的方法:
        close() 关闭浏览器窗口。
        * 谁调用我 ,我关谁
        open() 打开一个新的浏览器窗口
        * 返回新的Window对象

      3. 与定时器有关的方式
        setTimeout() 在指定的毫秒数后调用函数或计算表达式。
        * 参数:
        1. js代码或者方法对象
        2. 毫秒值
        * 返回值:唯一标识,用于取消定时器
        clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

        setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
        clearInterval() 取消由 setInterval() 设置的 timeout。

    3. 属性:

      1. 获取其他BOM对象:
        history
        location
        Navigator
        Screen:
      2. 获取DOM对象
        document
    4. 特点

      • Window对象不需要创建可以直接使用 window使用。 window.方法名();
      • window引用可以省略。 方法名();
  4. Location:地址栏对象

    1. 创建(获取):

      1. window.location
      2. location
    2. 方法:

      • reload() 重新加载当前文档。刷新
    3. 属性

      • href 设置或返回完整的 URL。
  5. History:历史记录对象

    1. 创建(获取):

      1. window.history
      2. history
    2. 方法:

      • back() 加载 history 列表中的前一个 URL。
      • forward() 加载 history 列表中的下一个 URL。
      • go(参数) 加载 history 列表中的某个具体页面。
        • 参数:
          • 正数:前进几个历史记录
          • 负数:后退几个历史记录
    3. 属性:

      • length 返回当前窗口历史列表中的 URL 数量。

DOM

  • 概念: Document Object Model 文档对象模型

    • 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
  • W3C DOM 标准被分为 3 个不同的部分:

    • 核心 DOM - 针对任何结构化文档的标准模型
      • Document:文档对象

      • Element:元素对象

      • Attribute:属性对象

      • Text:文本对象

      • Comment:注释对象

      • Node:节点对象,其他5个的父对象

    • XML DOM - 针对 XML 文档的标准模型
    • HTML DOM - 针对 HTML 文档的标准模型
  • 核心DOM模型:

    • Document:文档对象
      1. 创建(获取):在html dom模型中可以使用window对象来获取
        1. window.document
        2. document
      2. 方法:
        1. 获取Element对象:
          1. getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
          2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
          3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
          4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
        2. 创建其他DOM对象:
          createAttribute(name)
          createComment()
          createElement()
          createTextNode()
      3. 属性
    • Element:元素对象
      1. 获取/创建:通过document来获取和创建
      2. 方法:
        1. removeAttribute():删除属性
        2. setAttribute():设置属性
    • Node:节点对象,其他5个的父对象
      • 特点:所有dom对象都可以被认为是一个节点
      • 方法:
        • CRUD dom树:
          • appendChild():向节点的子节点列表的结尾添加新的子节点。
          • removeChild() :删除(并返回)当前节点的指定子节点。
          • replaceChild():用新节点替换一个子节点。
      • 属性:
        * parentNode 返回节点的父节点。
  • HTML DOM

    1. 标签体的设置和获取:innerHTML
    2. 使用html元素对象的属性
    3. 控制元素样式
      1. 使用元素的style属性来设置
        如:
        //修改样式方式1
        div1.style.border = “1px solid red”;
        div1.style.width = “200px”;
        //font-size–> fontSize
        div1.style.fontSize = “20px”;
      2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。

事件监听机制

  • 概念:某些组件被执行了某些操作后,触发某些代码的执行。
    • 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
    • 事件源:组件。如: 按钮 文本输入框…
    • 监听器:代码。
    • 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。

常见的事件

1. 点击事件:1. onclick:单击事件2. ondblclick:双击事件
2. 焦点事件1. onblur:失去焦点2. onfocus:元素获得焦点。3. 加载事件:1. onload:一张页面或一幅图像完成加载。4. 鼠标事件:1. onmousedown	鼠标按钮被按下。2. onmouseup	鼠标按键被松开。3. onmousemove	鼠标被移动。4. onmouseover	鼠标移到某元素之上。5. onmouseout	鼠标从某元素移开。
5. 键盘事件:1. onkeydown	某个键盘按键被按下。	2. onkeyup		某个键盘按键被松开。3. onkeypress	某个键盘按键被按下并松开。
6. 选择和改变1. onchange	域的内容被改变。2. onselect	文本被选中。7. 表单事件:1. onsubmit	确认按钮被点击。2. onreset	重置按钮被点击。

# DOM

这篇关于看完了小米12发布会,连夜写下这篇JavaScript笔记的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/791743

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

百度/小米/滴滴/京东,中台架构比较

小米中台建设实践 01 小米的三大中台建设:业务+数据+技术 业务中台--从业务说起 在中台建设中,需要规范化的服务接口、一致整合化的数据、容器化的技术组件以及弹性的基础设施。并结合业务情况,判定是否真的需要中台。 小米参考了业界优秀的案例包括移动中台、数据中台、业务中台、技术中台等,再结合其业务发展历程及业务现状,整理了中台架构的核心方法论,一是企业如何共享服务,二是如何为业务提供便利。

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听