Web系统设计【五】

发表于 分类于   |   字数统计: 3.6k(字)   |   阅读时长≈ 13(分)

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就能够实现响应式布局了

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