阅读 88

前端基础-JavaScript详解

JavaScript介绍

  • 虽然是java作为前缀,但java和javascript的关系,就像老婆和老婆饼之间的关系,没有一毛钱关系!
  • 网景公司在Netscape2.0首先推出了JavaScript
  • JavaScript 的正式名称是 “ECMAScript”,此标准由 ECMA 组织发展和维护,简称“js”
  • JavaScript 是一种网页编程技术,用来向 HTML 页面添加交互行为
  • JavaScript 是一种基于对象和事件驱动的解释性脚本语言,直接嵌入 HTML 页面,由浏览器解释执行代码,不进行预编译。

js的特点

  • 可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序 (后面会学习不用浏览器也能运行)
  • 解释执行:事先不编译,逐行执行
  • 基于对象:内置大量现成对象
  • 适宜:
    • 客户端数据计算
    • 客户端表单合法性验证
    • 浏览器事件的触发
    • 网页特殊显示效果制作

js的组成

  • ECMAScript:定义核心语法,关键字,运算符,数据类型等系列标准
  • DOM:文档对象模型,将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
  • BOM:浏览器对象模型,是对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于,它只是 JavaScript 的一个部分,没有任何相关的准。
    • 弹出新的浏览器窗口
    • 移动、关闭浏览器窗口以及调整窗口大小
    • 提供 Web 浏览器详细信息的定位对象
    • 提供用户屏幕分辨率详细信息的屏幕对象
    • 对 cookie 的支持
    • IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX对象,进而实现ajax局部刷新技术

HTML与javaScript结合方式

使用js的三种方式

  • 行内脚本
  • 内部脚本
  • 外部脚本

JavaScript的使用

变量

  • 因为js是弱类型语言,所以,在定义变量的时候,所有的数据类型都是var
  • 声明变量: var x ; var x,y;
  • 数值类型:number
    • 不区分整型数值和浮点型数值
    • 所有数字都采用 64 位浮点格式存储,类似于double 格式
  • 字符串:string
    • 首尾由单引号或双引号括起
  • 布尔类型:
    • 仅有两个值:true和false也代表1和0
    • 实际运算中true=1,false=0
  • 自动类型转换
  • 数据类型转换函数
  • null与undefined
  • 算术运算
  • 关系运算
  • 逻辑运算
  • 控制语句

常用字符串API

  • length:获取字符串的长度(字符串中字符的个数)属性,没有小括号
  • toUpperCase/toLowerCase:转大小写
  • charAt(下标):返回某个下标上的字符
  • indexof(字符):查找字符串中字符出现的首次下标
  • lastIndexof(字符):查找字符串中字符最后一次出现的下标
  • substring(开始,结束):截取字符串中一部分(结束是不包含的)
  • replace(旧的,新的):将字符串中的旧字符替换成新字符
  • split(分割的节点):一个字符串切割成N个小字符串,所以返回的是数组类型

数组

数组的常用方法

  • tostring():将数组转换成字符串
  • join(连接符号):将数组中的每个元素用连接符号连接成一个新的字符串。
  • concat(新元素):将原来的数组连接新元素,原数组不变。
  • slice(开始,结束):在数组中提取一部分,形成新的数组。
  • reverse():数组的反转(倒序)
  • sort():数组排序

Math数学对象

  • Math 对象用于执行数学任务
  • 没有构造函数 Math()
  • 无需创建,直接把 Math 作为对象使用就可以调用其所有属性和方法

Number对象

  • Number.fixed(2); 自带四舍五入技能

正则表达式

  • 对字符串执行模式匹配的强大工具

日期对象

函数

  • 使用关键字function定义函数
function 函数名( 形参列表 ){
    // 函数体 
    return 返回值; 
}
复制代码
  • 函数声明后不会立即执行,会在我们需要的时候调用到。

  • 注意:

    • 形参:一定不要带数据类型
    • 分号是用来分隔可执行JavaScript语句。 由于函数声明不是一个可执行语句,所以不以分号结束。
  • 无返回值

  • 有返回值

  • 参数对象

  • 构造函数

  • 匿名函数

  • 全局函数

  • 闭包

弹框输出

  • 普通弹框 alert("hello,拉勾");
  • 控制台日志输出 console.log("谷歌浏览器按F12进入控制台");
  • 页面输出 document.write("<h2>我爱你中国</h2>"); 将<h2>元素输出到<body>中
  • 确认框 confirm("确定删除吗?");
  • 输入框 prompt("请输入姓名:");

DOM 操作

  • 在一个html页面中,会使用很多标签来规划制作页面。
  • 每个标签都有它存在的意义,如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素
  • 如何查找到这个元素是个难题,W3C组织的工程师们,突然看到了一棵大树。我要是想找到某一片叶子,应该怎么做?
  • “顺藤摸瓜”,主树干有分支,每个分支还有许多小分支,只要把这个分支的结构整理清楚,任何一片叶子都不是难事了
  • 叶子和大树的一些启发,工程师们开会讨论就定了这个理论“文档对象模型”,
  • 文档对象模型,就是将页面中所有的标签元素都看成是一个对象(一片叶子),主树干定义为根节点(根元素),所有的标签都是从根元素延伸出去的,摸清结构,找到某个标签就不再困难了
    • 在节点树中,顶端节点就是根节点(root)
    • 每个节点都有父节点(除了根节点)
    • 任何一个节点都可以拥有任意数量的子节点
    • 同胞是拥有相同父节点的节点

从上面的HTML中:

  • <html> 节点没有父节点;它是根节点
  • <head> 和 <body> 的父节点是 <html> 节点
  • 文本节点 "Hello world!" 的父节点是 <p> 节点

并且:

  • <html> 节点拥有两个子节点:<head> 和 <body>
  • <head> 节点拥有两个子节点:<meta> 与 <title> 节点
  • <title> 节点也拥有一个子节点:文本节点 "DOM 教程"<h1> 和 <p> 节点是同胞节点,同时也是
  • <body> 的子节点

并且:

  • <head> 元素是 <html> 元素的首个子节点
  • <body> 元素是 <html> 元素的最后一个子节点
  • <h1> 元素是 <body> 元素的首个子节点
  • <p> 元素是 <body> 元素的最后一个子节点

js为我们提供了很多种方法来实现在页面找查找某个元素节点

DOM访问

  • getElementById:通过id属性获得元素节点对象
  • getElementsByName:通过name属性获得元素节点对象集
  • getElementsByTagName:通过标签名称获得元素节点对象集

DOM修改

  • 修改 HTML DOM 意味着许多不同的方面:
    • 改变 HTML 内容
    • 改变 CSS 样式
    • 改变 HTML 属性
    • 创建新的 HTML 元素
    • 删除已有的 HTML 元素
    • 改变事件(处理程序)
  • 添加节点
  • 删除节点
  • 替换节点

事件

js捕获某个动作而做出的反馈
HTML 事件的例子:

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图片已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户触发按键时

窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。

  • onload 当文档被载入时执行脚本

表单元素事件 (Form Element Events)

仅在表单元素中有效。

  • onblur 当元素失去焦点时执行脚本
  • onfocus 当元素获得焦点时执行脚本

鼠标事件 (Mouse Events)

  • onclick 当鼠标被单击时执行脚本
  • ondblclick 当鼠标被双击时执行脚本
  • onmouseout 当鼠标指针移出某元素时执行脚本
  • onmouseover 当鼠标指针悬停于某元素之上时执行脚本

键盘事件

  • onkeydown 按下去
  • onkeyup 弹上来

事件冒泡

  • 先子,后父。事件的触发顺序自内向外,这就是事件冒泡

事件捕获

  • 先父,后子。事件触发顺序变更为自外向内,这就是事件捕获

面向对象OOP

  • 使用Object创建通用对象
  • 使用构造函数
  • 使用直接量

JSON

  • 大家在互联网上来回传递数据,如果没有一个统一的格式,解析起来的难度很大(每个人的编码喜好不一样)
  • JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
  • 易于人阅读和编写,同时也易于机器解析和生成
{
属性1:值1,
属性2:值2,
。。。。
}
复制代码

BOM操作

就是javascript对浏览器的一些常规操作的方法

window对象

image.png

  • screen屏幕对象
  • location定位
  • history浏览器历史
  • navigator 导航

存储对象

用起来和我们在java中map很相似,都是键值对的方式存数据

  • 本地存储 localStorage
  • 会话存储 sessionStorage

计时操作

  • 周期性定时器 setInterval
  • 停止定时器 clearInterval
  • 一次性定时器 setTimeout
文章分类
前端
文章标签