Web系统设计【五】

JavaScript


1、JavaScript概述与基础语法

(1)什么是 JavaScript

JavaScript 是一种运行于JavaScript解释器/引擎中的解释型脚本语言.

运行环境:

  • 1、独立安装的JS解释器(NodeJS)

  • 2、嵌入在[浏览器]内核中JS解释器

    • 浏览器内核的作用:负责页面内容的渲染。内核主要由两部分组成

      • 内容排版引擎解析HTML和CSS
      • 脚本解释引擎解析Javascript
    • 不同的浏览器的内核是不同的

(2)JS组成

1、核心(ECMAScript)

2、文档对象模型(DOM,Document Object Model)让JS有能力与网页进行对话

3、浏览器对象模型(BOM,Browser Object Model)让JS有能力与浏览器进行对话

(3)JS特点

  • 开发工具简单,记事本即可
  • 无需编译,直接由JS引擎负责执行
  • 弱类型语言,由数据来决定 数据类型
  • 面向对象

(4)JavaScript的使用

1、将JS代码嵌入在元素”事件”中

<div id="" onclick="JS代码">xxx</div>

2、将JS代码嵌入在<script>标记中

<script></script>允许出现网页的任意位置处

3、将JS代码写在外部脚本文件中(.js)

在页面中 引入 js文件<script src="js文件路径"></script>

注意:方法3中,该对标记中,是不允许出现任何内容的

(5)语法规范

使用 分号 来表示结束、大小写敏感、英文标点符号、由表达式、关键字、运算符 组成

2、基本使用

  • 定义变量:var

  • 定义函数:function

  • 数据类型判断:

    • 获取数据类型:typeof(变量名) 或者typeof 变量名

    • NaN:Not a Number

    • isNaN(数据) : 判断 数据是否为 非数字

  • 数据类型转换:

    • toString()

    • parseInt()

    • parseFloat()

    • Number()

    • 所有的数据类型 与 string 做 + 运算时,最后的结果都为 string

  • 分支:

    • if else
    • switch case
  • 循环:

    • while
    • do while
      • while、do while 都是判断条件为真继续执行
    • for
  • 数组(类似python中的元组):注意,由于其特性,数组内容可以不一致,例如[1,q,”weq”]

    • 创建:1、arr=[] 2、arr=new Array()
    • 数组的 length属性:记录了数组中理论上的元素个数length属性的值永远是最大下标+1。且更改其内容,就会改变其大小,减小的话就会删除多余元素
    • 三不:不限制数组的元素个数、不限制下标越界、不限制数组元素数据类型
  • 关联数组(字典)

    • *创建:arr=[];arr[“test”]=6; *
    • 遍历:for(var key in hash)
  • 数组API

    • String(arr) :将arr中每个元素转为字符串,用逗号分隔
      • 固定套路: 对数组拍照: 用于鉴别是否数组被修改过
    • arr.join(“连接符”) :将arr中每个元素转为字符串,用自定义的连接符分隔,使用空串作为连接符则为无缝转成字符串
      • 扩展: 判断数组是空数组: arr.join(“”)==””
      • 将数组转化为页面元素的内容:
    • concat() :拼接两个或更多的数组,并返回结果。不直接修改原数组,而返回新数组!
    • slice(starti,endi) :返回现有数组的一个子数组范围是starti到endi,前闭后开
      • 一直选取到结尾: 可省略第二个参数
      • 如果选取的元素离结尾近: 可用倒数下标
      • 复制数组: arr.slice(0,arr.length);可简写为:arr.slice();
    • 删除splice(starti,n);删除arr中starti位置开始的n个元素,返回值被删除的元素组成的临时数组。直接修改原数组!返回值保存了被删除的元素组成的临时数组
    • 插入splice(starti,0,值1,值2,…):starti位置,插入新值1,值2,…原starti位置的值及其之后的值被向后顺移
    • 替换splice(starti,n,值1,值2,…):先删除arr中starti位置的n个值,再在starti位置插入新值
      • 强调: 删除的元素个数和插入的新元素个数不必一致。
    • reverse() :颠倒数组中元素的顺序
    • arr.sort(): 默认将所有元素转为字符串再排列
      • 问题: 只能排列字符串类型的元素
      • 解决: 使用自定义比较器函数

3、DOM

什么是DOM?

document object model DOM 是 W3C(万维网联盟)的标准, 是中立于平台和语言

的接口,它允许程序和脚本动态地访问和更新文档的内容、结 构和样式。 对网页进行增删改查的操作。

DOM标准:

  • 核心DOM:可操作一切结构化文档的API,包括HTML和XML万能!繁琐!
  • HTML DOM:专门操作HTML文档的简化版DOM API 仅对常用的复杂的API进行了简化 不是万能! 简单

对于开发人员来说,先用简单的,再用复杂的补充——以实现效果为目标

在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

常用DOM方法
getElementById()返回带有指定 ID 的元素。
getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。
appendChild()把新的子节点添加到指定节点。
removeChild()删除子节点。
replaceChild()替换子节点。
insertBefore()在指定的子节点前面插入新的子节点。
createAttribute()创建属性节点。
createElement()创建元素节点。
createTextNode()创建文本节点。
getAttribute()返回指定的属性值。
setAttribute()把指定属性设置或修改为指定的值。

(1)DOM查找

  • var elem=document.getElementById(“id”);按id属性,精确查找一个元素对象

  • var elems=parent.getElementsByTagName(“tag”);按标签名找

    • 可用在任意父元素,例如:
      • var ul = document.getElementById(‘menuList’);
        var list = ul.getElementsByTagName(‘li’);
    • 不仅查直接子节点,而且查所有子代节点
    • 返回一个动态集合,即使只找到一个元素,也返回集合,必须用[0],取出唯一元素。
  • var list = document.getElementsByName(‘name’);通过name属性查找

  • var elems=parent.getElemnetsByClassName(“class”);查找父元素下指定class属性的元素

    • 例如:

      var div = document.getElementById(‘news’);
      var list = div.getElementsByClassName(‘mainTitle’);

  • 通过CSS选择器查找一个:var elem=parent.querySelector(“selector”)

    • selector支持一切css中选择器
    • 如果选择器匹配的有多个,只返回第一个
  • *通过CSS选择器查找多个:var elems=parent.querySelectorAll(“selector”) *

selector API 返回的是非动态集合:

(2)DOM修改

核心DOM: 4个操作

  • ①读取属性值:

    • 1.先获得属性(节点)对象,再获得节点对象的值:

      在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。所以,方法一:通过属性名获取该属性节点的对象,通过该对象获取属性值。有些繁琐,很少使用。

      • 获取节点对象(两种):
        • var attrNode=elem.attributes[下标/属性名];
        • var attrNode=elem.getAttributeNode(属性名)
      • 通过节点对象获取属性值:attrNode.value——属性值
    • 2.直接获得属性值:var value=elem.getAttribute(“属性名”);

  • ②修改属性值:elem.setAttribute(“属性名”, value);

  • ③判断是否包含指定属性:var bool=elem.hasAttribute(“属性名”)

  • ④移除属性:elem.removeAttribute(“属性名”)

(3)DOM添加

步骤:创建空元素(标签)、 设置关键属性、将元素添加到DOM树

  • 创建空元素:var elem=document.createElement(“元素名”)
  • 设置关键属性或样式
    • 直接通过elem.属性名设置属性
    • 直接通过elem.style.样式名设置样式;若样式过多可以通过elem.style.cssText=“样式内容”设置
  • 将元素添加到DOM树
    • parentNode.appendChild(childNode);可用于将为一个父元素追加最后一个子节点
    • parentNode.insertBefore(newChild, existingChild);

尽量少的操作DOM树,因为每次修改DOM树,都导致重新layout

1.如果同时创建父元素和子元素时,建议在内存中先将子元素添加到父元素,再将父元素一次性挂到页面

2.如果只添加多个平级子元素时, 就要将所有子元素,临时添加到文档片段中。再将文档片段整体添加到页面

文档片段: 内存中,临时保存多个平级子元素的 虚拟父元素用法和普通父元素完全一样

4、BOM

(1)简介

Browser Object Model专门操作浏览器窗口的API其既没有标准的实现,也没有严格的定义, 所以浏览器厂商可以自由地实现BOM——没有标准, 有兼容性问题使用要注意

浏览器对象模型:

  • window: 代表整个窗口

  • history: 封装当前窗口打开后,成功访问过的历史url记录

  • navigator: 封装浏览器配置信息

  • document: 封装当前正在加载的网页内容

  • location: 封装了当前窗口正在打开的url地址

  • screen: 封装了屏幕的信息

  • event: 定义了网页中的事件机制

例如:获取窗口大小

完整窗口大小: window.outerWidth/outerHeight

文档显示区大小: window.innerWidth/innerHeight

(2)定时器

什么是定时器?让程序按指定时间间隔自动执行任务。实现网页动态效果、计时功能等

  • 周期性定时器:让程序按指定时间间隔反复自动执行一项任务

    • 语法:var timer=setInterval(exp,time);exp:执行语句time:时间周期,单位为毫秒

  • 停止定时器:clearInterval(timer); timer是定义的定时器

  • 一次性定时器:让程序延迟一段时间执行

    • 语法:setTimeout(exp,time);exp:执行语句time:时间周期,单位为毫秒

Jquery


1、概述

什么是 JQuery? 答:快速、简洁的第三方js库

JQuery的核心理念是write less,do more(写更少的代码,做更多的事情)

JQuery是DOM操作的终极简化,还屏蔽了浏览器的兼容性问题。

  • 核心DOM: 万能,但繁琐
  • HTML DOM: 简单,但不是万能
  • Jquery: 对DOM操作的终极简化

如何使用JQuery?答:先引入JQuery.js , 再编写自定义脚本

1、将JQuery.js 下载到服务器本地,在script中使用服务器路径

2、使用CDN网络上共享的JQuery.js 生产环境中用的最多

工厂函数:在JQuery中,无论使用哪种类型的选择符,都要从一个美元符号和一对圆括号开始:$()。所有能在样式表中使用的选择符,都能放到这个圆括号中的引号内。

2、JQuery增删改查

(1)查找

$(“#myList”);就是document.getElementById(‘myList’);

括号内的内容可以是基本选择器、层级选择器,他们的表示方法和CSS一样。

表示兄弟关系时:

(2)修改

修改属性
  • 获取 $(“…”).attr(“属性名”)
  • 修改 $(“…”).attr(“属性名”,值)
修改内容
  • 修改html内容
    • html( ):(函数值为空)读取或(函数值为修改的内容)修改节点的HTML内容
  • 文本操作
    • text( ):读取或修改节点的文本内容
  • 值操作
    • val( ):读取或修改节点的value属性值
修改样式
  • 直接修改css属性
    • 获取css样式(计算后的样式) $(“…”).css(“CSS属性名”)
    • 修改css样式 $(“…”).css(“css属性名”,值)
  • 通过修改class批量修改样式
    • 判断是否包含指定class:$(“…”).hasClass(“类名”
    • 添加class: $(“…”).addClass(“类名”)
    • 移除class :$(“…”).removeClass(“类名”)

(3)添加

  • 创建新元素:var $new = $("html代码片段")
  • 将新元素结尾添加到DOM树:$(parent).append($newelem)

(4)删除

$(“…”).remove()

3、JQuery事件

(1)事件绑定

语法:$(“…”).bind(“事件类型”,function(e){….})

(2)事件对象

function(event)中的event这个对象中包含与事件相关的信息,也提供了可以影响事件在DOM中传递进程的一些方法。

事件对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息

clientX/offsetX/pageX/screenX/x:事件发生的X坐标

clientY/offsetY/pageY/screenY/y:事件发生的Y坐标

keyCode : 键盘事件中按下的按键的值

响应式布局


响应式布局:检测设备信息,设备宽度不同, 布局不同.

这里介绍两种布局方法:CSS3 Media Query媒体查询、第三方开源框架 Bootstrap

1、CSS3媒体查询

(1)Viewport视口

视口:显示网页的区域

为了响应式布局,我们对视口规定:布局视口=设备视觉视口、不可缩放

实现视口规定:设置meta标签

1
2
<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

sublime中meta:vp即可 扩展出该设定

(2)媒体查询

检查设备宽度,根据宽度设置CSS样式

设备屏幕尺寸
超小屏extra small<768
小屏small≥768
中等medium≥992
大屏large≥1200

媒体查询设计:

  • @media表示媒体查询,之后跟查询何种对象的尺寸,这里是screen 可以是打印机等其他。
  • and连接满足的条件
    • min-height 页面最小高度
    • min-width 页面最小宽度
    • max-height 页面最大高度
    • max-width 页面最大宽度
  • 根据CSS自上而下顺序解释特性,由于min-width 使用我们也需要将尺寸变化由小到大表示,这样做到覆盖。

2、Bootstrap

Bootstrap:来自 Twitter,Bootstrap4 ;开源、移动优先的前端框架 ;是基于 HTML、CSS、JavaScript、JQuery 的 ;写很少代码,实现多终端的页面适配。

两个版本:编译版本(不需要修改源码时使用)、源代码版本(既包括源代码又包括编译版本)

docs是说明和示例

中文官网

(1)Bootstrap使用

  • 方式一:下载下来引用
  • 方式二:CDN方式,通过超链接使用网络上保存的资源。

区别只是在于路径设置。两者都是要按照CSS、Jquery、JS顺序引用

1
2
3
4
5
6
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/
dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/
dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/
dist/js/bootstrap.min.js"></script>
  • 中文文档中有很多功能和相应源代码,复制下来就能使用了

(2)栅格布局

  • 需要一个container包括栅格布局界面

  • container中设置row,在row中划分列,来组织一行的栅格大小

    • 一行最多12列,放不开就会自动换行
    • md可换,表示设备尺寸
      • xs:extra small <768
      • sm:small ≥768
      • md:medium≥992
      • lg:large≥1200
    • 数字代表合并的栅格数,最小的1代表设备尺寸/12
  • 通过引入多个class就能够实现响应式布局了

-----------------------本文结束 感谢阅读-----------------------
坚持原创技术分享,您的支持将鼓励我继续创作!恰饭^.^~