Web 坐标整理

坐标分类

  1. 文档坐标

  2. 窗口坐标

scroll

Element.scrollTop: 设置或获得一个元素距离他容器顶部的像素距离, 当一个元素的容器没有产生垂直方向的滚动条, 则他的 scrollTop 的值默认为0

获得滚动距离
var intElementScrollTop = someElement.scrollTop;

scrollTop可以被设置为任何整数, 但是一下情况会报错:
1. 如果一个元素不能被滚动(没有溢出容器或本身不可滚动)的时候设置其 scrollTop 为 0;

  1. 设置 scrollTop 的值小于 0, scrollTop 被设为 0

  2. 如果设置了超出这个容器可以滚动的值, scrollTop 会被设为最大值

其实就是溢出距离

Element.scrollHeight: 计量元素内容高度的只读属性, 包括 overflow 样式属性导致的视图中不可见内容

没有垂直滚动条的情况下, scrollHeight 值与元素视图填充所有内容所需要的最小值 clientHeight 相同, 包括元素的 padding, 但不包括 margin

其实就是溢出元素的本身高度

!()[https://developer.mozilla.org/@api/deki/files/840/=ScrollHeight.png]

判断元素是否滚动到底部

element.scrollHeight - element.scrollTop === element.clientHeight

clientTop

Element.clientTop: 一个元素顶部边框的宽度, 不包括顶部外边距或内边距, 只读属性

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 来计算

其实就是可视区域高度

mouseEvent.clientX: 只读属性, 事件发生时应用客户端区域的水平坐标, 与页面无关

mouseEvent.x 是 mouseEvent.clientX 的别名

window

window.innerHeight: 浏览器窗口的视口( viewport ) 高度, 如果存在滚动条, 则要包括在内, 只读属性

window.outerHeight: 整个浏览器窗口的高度

offset

mouseEvent.offsetX: read-only property provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node

page

event.PageX: read-only property returns the horizontal coordinate of the event relative to the whole document

文档坐标

screen

mouseEvent.screenX: read-only property provides the horizontal coordinate of the mouse pointer in the global(screen) coordinate.

H5 移动端注意点

  1. 使用 rem 作为单位

给手机这是 100px 的字体大小, 对于320px 的手机匹配是100px, 其他手机都是按比例分配, 因此设计稿上多少像素的话, rem = 设计稿像素/100

  1. 禁用 a, button, input, opigroup, select, textare 等标签背景变暗

在移动端使用 a 标签作为按钮或文字链接的时候, 点击按钮会出现一个暗色背景, 需要在 css 中加入

a, button, input, textarea, optgroud, select{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
}
`</pre>
  1. meta 基础知识

    页面窗口自动调整到设别宽度, 并禁止用户缩放页面

    `<meta name="viewport" content="width=device-width,initial-width:1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    `

    忽略页面中的数字识别为手机号

    `<meta name="format-detection" content="telephone=no"/>
    `

    忽略 Android 平台对邮箱地址的识别

    `<meta name="format-detection" content="email=no"/>
    `

    当网站添加到主屏时可隐藏地址栏, 仅针对 ios 的 safari

    `<meta name="apple-mobile-web-app-capable" content="yes"/>
    `
  2. 移动端定义字体

    `body{
      font-family:"Helvetica Neue", Helvetica, sans-serif;
    }
    `
  3. 设置拨打电话

    `<a href="tel:1242432423">1242432423</a>
    `
  4. 设置发送短信

    `<a href="sms:123124325434">123124325434</a>
    `
  5. 设置发送邮箱

    `<a href=”mailto:131321@21312.com“>发送邮件</a>

8, calc 语法, 兼容 IE9+, FF4.0, Chrome19+, Safari6+

Mac OS 下前端开发环境配置

安装 homebrew

终端下执行
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

配置 iterm2

下载后下载配色 solarized, 然后下载 zsh 和 oh-my-zsh, 添加插件 git, osx, ruby, autojump

安装 Nginx

终端下执行
brew install nginx
安装完成后用浏览器打卡 http://localhost:8080, 如果页面显示正常,则表示安装完成
nginx 有一下几个操作

  #打开 nginx
  nginx
  #nginx -s 重新加载配置|重启|停止|退出
  nginx -s reload|reopen|stop|quit
  #测试配置是否有语法错误
  nginx -t
`</pre>

Note: 如果执行不成功, 请使用 sudo 提权

默认访问目录是
`/usr/local/Cellar/nginx/1.10.0/html`

nginx 的配置文件位置为:
`/usr/local/etc/nginx/nginx.conf`

#### 配置 nginx

首先备份一下 nginx.conf ==> nginx.conf.default
修改server 部分为:

<pre>`server
  {
    listen    8080;
    server_name localhost;

    location /{
      root /Users/YourId/Documents; //项目目录
      #index index.html index.htm;
    }
  }
`</pre>

配置完成后启动 nginx 即可访问

### 安装 mySQL

终端执行
`brew install mysql`
 安装完成后默认没有密码, 修改密码
 ```
 mysql -uroot -p
 Enter password:
 mysql>use mysql;
 mysql> UPDATE user SET password=password("修改的密码") WHERE user='root';

mysql 的操作命令

<pre>`  #开启
  mysql.server start
  #结束
  mysql.server stop

配置文件位于
/usr/local/Cellar/mysql/5.6.28/my.cnf

Node

A Node is an interface from which a number of DOM types, and allows these various types to be treated similarly.

Properties

  • Node.baseURI: return a DOMStirng representing the base URL
  • Node.childNodes: return a live NodeList containing all the children of this node. NodeList being live means that if the children of the Node change, the NodeList will update automatically.
  • Node.firstChild: return a Node representing the first direct child Node of this Node, or Null if the node has no child.
  • Node.lastChild: Return a Node representing the last direct child Node of this Node, or Null if the node has no child.
  • Node.nextSibling: return a Node representing the next Node in the tree, or null if there is no one.
  • Node.previousSibling
  • Node.nodeName: return a DOMString containing the name of the node. The structure of the name will differ with the name type. E.g. An HTMLElement will contain the name of the corresponding tag, like “audio”, for an HTMLAudioElement, a Text node will have the “#text” string, or a Document node will have the “#document” string.
  • Node.nodeType: return an unsigned short representing the type of the node. Possible values are:





































Name Value
Element_Node 1
Attribute_Node 2
Text_Node 3
Document_Node 9
Document_Type_Node 10
Notation_Node 12
  • Node.nodeValue: return a DOMString representing the value of an object. For most node types, this returns null, and any set operation is ignored.
    For Nodes of type TEXT_NODE(Text objects), COMMENT_NODE(Comment objects), and PROGRESSING_INSTRUCTION_NODE(ProgressingInstruction objects), the value corresponds to the text data contained in the obejct.
  • Node.parentNode: return a Node that is the parent of this node, if there is no such node, like if this node is the top of the tree or if doesn’t participate in a tree, this property returns Null.
  • Node.parentElement: returns an Element that is the parent of this node. If the node has no parent, or if that parent is not an Element, this property returns Null.
  • Node.rootNode: return a Node representing the topmost Node in this tree or the current node if it’s the topmost node in the tree.
  • Node.textContent: is a DOMString representing the textual content of an element and all its descendants.

Methods

  • Node.appendChild()
  • Node.cloneNode(): Clone a Node and optionally all of its contents. By default, it clones the content of the node.
  • Node.hasChildNodes(): return a boolean indicating if the element has any child nodes, or not.
  • Node.insertBefore(newNode, beforeItsChild)
  • Node.isEqualNode(): return a boolean which indicating whether or not two nodes are of the same type and all their defining data points match.
  • Node.isSameNode(): return a boolean value indicating whether or not the two nodes are the same(that is they reference the same object).
  • Node.removeChild()
  • Node.replace(newNode, replaceItsChild)

    *   Note: replaceNode will not generate new one.</p>
    
    • E.g.

      ul&gt;li*3

      ul.replace(li[2],li[0])

      it will act as:
      remove li[2], put it li[0], remove li[0], so the result looks like

      ul
      –li[2]
      –li[1]
      `

    Examples

    Browser All Child Nodes

    The following function recursively cycles all child nodes of a node and executes a callback function upon them(and upon the parent node itself).

    `function DOMComb(oParent, oCallBack){
      if(oParent.hasChildNodes()){
        for(var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling){
          DOMComb(oNode, oCallBack);
        }
      }
      oCallBack.call(oParent);
    }
    `

    Remove all children nested within a node

    `Element.prototype.removeAll = function(){
    while(this.firstChild){

    this.removeAll(this.firstChild);
    

    }
    return this;
    };

innerHTML and textContext and NodeValue

Summary:

  • nodeValue is a little more confusing to use, but faster than innerHTML
  • innerHTML parses content as HTML and takes longer(output text/html)
  • textContent uses straight text, does not parse HTML, and is faster(output text/plain)
  • innerText takes styles into consideration. It won’t get hidden text for instance.

node.textContent

The Node.textContent property represents the text content of a node and it descendants.

Syntax

example.textContent ="&lt;a href='...'&gt;textContent&lt;/a&gt;"
will output &lt;a href='...'&gt;textContent&lt;/a&gt;

Differences from innerText

  • textContent gets the content of all elements, including

Event

In computing, an event is an action or occurrence recognized by software that may be handled by the software. Computer events can be generated or triggered by the system, by the user or in other ways. Typically, events are handled synchronously with the program flow, that is, the software may have one or more dedicated places where events are handled, frequently an event loop. A source of events includes the user, who may interact with the software by way of, for example, keystroke on the keyboard. Another source is a hardware device such as a timer. Software can be trigger its own set of events into the event loop, e.g. to communicate the completion of a task. Software that changes its behavior in response to events is said to be event-driven, often with the goal of being inactive.

Event handler

In computer programming, an event handler is a callback subroutine that handles inputs received in a program(called a listener in Java and JavaScript). Each event is a piece of application-level information from the underlying framework, typically the GUI Toolkit. GUI events including key presses, mouse movement, action selections, and timer expiring.

DOM Events

DOM(Document Object Model) events allow event-driven programming language like JavaScript, JScript, ECMAScript, VBScript and Java to register various event handler/listener on the element nodes inside a DOM tree, e.g. HTML, XHTML, XUL, and SVG documents.

Events

HTML Events

There is a huge collection of events that can be generated by most element nodes:

  • Mouse events;
  • Keyboard events;
  • HTML frame/object events;
  • HTML form events;
  • User interface events;
  • Mutation events(notification of any changes to the structure of a document);
  • Progress events(used by XMLHttpResponse, File API, …)

Mouse:
click, dblclick, mousedown, mouseover, mousemove, mouseout, dragstart, drag, dragenter, dragleave, dragover, drop, dragend

  • Click: The sequence of click: mousedown, mouseup, click
  • Mouseover: Fires when the pointing device is moved onto an element
  • Mouseover: Fires when the pointing device is moved while it is over an element
  • Dragstart: Fired on an element when a drag is started
  • Dragend: The source of the drag will receive a dragend event when the drag operation is complete, whether it was sucessful or not,

Keyboard:
keydown, keypress, keyup

HTML frame/object:
load, unload, abort, error, resize, scroll

  • Load: Fires when the user agent finishes loading all content within a document, including window, frames, objects, and images.
  • Unlaod: Fires when the user agent removes all content from a window or frame.
  • Abort: Fires when an object/image is stopped from loading before completely loaded.
  • Error: Fires when an object/image/frame/ cannot be loaded properly.
  • Resize: Fires when a document view is resized.
  • Scroll: Fires when an element or document view is scrolled

HTML form:
select, change, submit, reset, focus, blur

  • Select: Fires when a user selects some text in a text field, including input and textarea.
  • Change: Fires when a control loses the input focus and its value has been modified since gaining focus.
  • Submit: Fires when a form is submitted.
  • Reset: Fires when a form is reset.
  • Focus: Fires when an element receives focus either via the pointing device or by tab navigation.
  • Blur: Fires when an element loses focus.

User Interface:
focusin, focusout, DOMActivate

Mutation:
DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified

Progress:
loadstart, progress, error, abort, load, loadnd

Touch Events

Web broswer running on touch-enabled devices will generate additional events

Touch:
touchstart, touchend, touchmove, touchenter, touchleave, touchcancel

  • Touchstart: Fires when a finger is placed on the touch surface/screen.
  • Touchend: Fires when a finger is removed from the touch surface/screen.
  • Touchenter: Fires when a touch point moves onto the interactive area defined by a DOM Element
  • Touchcancel: A user-agent must dispatch this event type to indicate when a TouchPoint has been disrupted in an implementation-specific manner, such as by moving outside the bounds of the UA window.

In the W3C draft recommendation, a TouchEvent delivers a TouchList of Touch location, the modifier keys that were active, a TouchList of Touch locations within the targeted DOM element, and a TouchList of Touch lcoations that have changed since the previous TouchEvent.

Internet Explorer-specific events

In addition to the common/W3C events, two major types of events are added by Internet Explorer. Some of the events have been implemented as de facto standards by other browsers.

Clipbord:
cut, copy, paste, beforecut, beforecopy, beforepaste

Data binding:
afterupdate, beforeupdate, cellchange, dataavailable, datasetchagned, datasetcomplete, errorudpate, rowenter, rowexit, rowsdelete, rowinserted

  • Afterupdate: Fires immediately after a databound object has been updated.
  • Beforeupdate: Fires before a data source has changed.
  • Cellchange: Fires when a data source has change.
  • Dataavailable: Fires when new data from a data source become available.
  • Rowenter: Fires whena new row of data from the data source is available.

Mouse:
contextmenu, selectstart

  • Contentmenu: Fires when the context menu is shown.
  • Selectstart: Fires when the user starts to select text.

Keyboard:
help

  • Help: Fires when the user initiates help.

HTML frame/object:
beforeunload, stop

  • Beforeunload: Fires before a document is unloaded.
  • Stop: Fires when the user stop loading the object. (unlike abort, stop event can be attached to document).

优化 HTML 结构

语义化命名

  • 语义化的 HTML 能够直接表示出某个 Tag 的业务功能;
  • 语义化的 CSS 可以提高样式的抽象程度, 方便复用;

模块化

  • 提高代码复用程度;
  • 使业务逻辑更加清晰;

选择一个好的命名约定

遵循单一职责原则

SRP 原则即每个模块或者类应当只承担系统中的某一个单一功能, 并且该功能应当完整封装起来. 比如 CSS 组织结构中的 Carousel, NavigationBar 等, 要做成独立的 CSS Component.

Notes on 'POST' and 'GET' in Form

The ‘method’ attribute in form element specifies how to send form-data(the form-data is sent to the page specified in the ‘action’ attribute).

The form-data can be sent as URL variables(with method='get') or as HTTP Post transaction(with method='post').

Notes on GET:

  • Appends form-data into the URL in name-value pairs;
  • The length of a URL is limited(about 3000 characters);
  • Never use GET to send sensitive data cause they will be visible in the URL;
  • Useful for form submissions where a user want to bookmark the result;
  • GET is better than non-secure data, like query string in Google.

Notes on POST:

  • Appends form-data inside the body of HTTP request(both in head-line and body);
  • Has no size limitation;
  • Form submissions with POST cannot be bookmarked.

CFB HomePage(RWD)

Chinafiremag.cn is a non-responsive website and this is a prototype of RW one.

Bootstrap 4 Guide Written by BS3

Make new features of BS4 by BS3

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×