JavaScript 提供網頁用戶端的腳本程式應用，最早由網景公司的 Brendan Eich 發明，用於 Netscape 瀏覽器上，後來為了使不同瀏覽器能夠互用， JavaScript 與微軟的 JScript 共同交給 EMCA （歐洲計算機製造商協會）制定標準，因此現在的 JavaScript 又被稱為 EMCAScript 。
主要特性
- 動態
- 函數化
- 基於原型
- 物件導向
學習 JavaScript 無須編譯器或直譯器，只要有上網用的瀏覽器即可，常見的瀏覽器有
Firefox
Google Chrome
Safari
Opera
Internet Explorer
我們認為初學程式最好的方式就是直接學寫應用程式，您可以從
JavaScript 入門指南
基礎篇 按一下展開目錄
網頁軟體開發 按一下展開目錄
- 認識 HTML DOM
- 陣列
- 洗牌演算法
- Encode Software 概觀
- 資料驗證
- 自訂 Encrypt 物件
- 控制函數與整合 Encrypt 物件
- 完成版的 Encode Software
- 下一步
範例程式碼 按一下展開目錄
直接學習從基礎到各種文件物件的應用，獲得開發網頁用戶端程式的基本概念。
若是您已經學過其他種類的程式語言，您可以從
JavaScript 快速導覽來直接熟悉 JavaScript 的語法、規則等。
基本概念
簡單範例
除錯資訊
標記 按一下展開目錄
資料型態
變數與常數
運算式 按一下展開目錄
型態轉換
控制結構 按一下展開目錄
函數
物件
物件的 prototype 性質
繼承
例外處理
內建性質及函數 按一下展開目錄
- eval(string)
- parseInt(string)
- parseFloat(string)
- isNaN(number)
- isFinite(number)
- escape(string)
- unescape(string)
- encodeURI()
- encodeURIComponent()
- decodeURI()
- decodeURIComponent()
內建物件 按一下展開目錄
- Boolean
- Number 按一下展開目錄
- String 按一下展開目錄
- fromCharCode()
- charAt(pos)
- charCodeAt(pos)
- concat([string1 [, string2 [, …]]])
- indexOf(searchString, position)
- lastIndexOf(searchString, position)
- match(regexp)
- search(regexp)
- replace(searchValue, replaceValue)
- slice(start, end)
- split(separator, limit)
- substring(start, end)
- substr(start, length)
- toLowerCase()
- toUpperCase()
- Array 按一下展開目錄
- toString()
- valueOf()
- concat([item1 [, item2 [, …]]])
- join(separator)
- pop()
- push([item1 [, item2 [, …]]])
- reverse()
- shift()
- slice(start, end)
- sort(comparefn)
- splice(start, deleteCount [, item1[, item2[ , …]]])
- unshift([item1 [, item2 [, …]]])
- Math 按一下展開目錄
- abs(x)
- acos(x)
- asin(x)
- atan(x)
- atan2(y, x)
- ceil(x)
- cos(x)
- exp(x)
- floor(x)
- log(x)
- max([value1 [, value2 [, …]]])
- min([value1 [, value2 [, …]]])
- pow(x, y)
- random()
- round(x)
- sin(x)
- sqrt(x)
- tan(x)
- Date 按一下展開目錄
- toString()
- toDateString()
- toTimeString()
- toLocaleString()
- toLocaleDateString()
- toLocaleTimeString()
- toUTCString()
- valueOf()
- Date.parse(string)
- Date.UTC(year, month [, date [, hours [, minutes [, seconds [, ms]]]]])
- getTime()
- getFullYear()
- getUTCFullYear()
- getMonth()
- getUTCMonth()
- getDate()
- getUTCDate()
- getDay()
- getUTCDay()
- getHours()
- getUTCHours()
- getMinutes()
- getUTCMinutes()
- getSeconds()
- getUTCSeconds()
- getMilliseconds()
- getUTCMilliseconds()
- getTimezoneOffset()
- setTime(time)
- setMilliseconds(ms)
- setUTCMilliseconds(ms)
- setSeconds(sec [, ms])
- setUTCSeconds(sec [, ms])
- setMinutes(min [, sec [, ms]])
- setUTCMinutes(min [, sec [, ms]])
- setHours(hour [, min [, sec [, ms]]])
- setUTCHours(hour [, min [, sec [, ms]]])
- setDate(date)
- setUTCDate(date)
- setMonth(month [, date])
- setUTCMonth(month [, date])
- setFullYesr(year [, month [, date]])
- setUTCFullYesr(year [, month [, date]])
- RegExp 按一下展開目錄
若是您已經學過 JavaScript ，但對於 HTML DOM 還不是很熟悉，您可以參考
HTML DOM 快速導覽來了解如何運用 HTML DOM 中的功能。
基本概念
文件物件 document
- 屬性 按一下展開目錄
- document.activeElement
- document.alinkColor
- document.anchors
- document.bgColor
- document.cookie
- document.documentElement
- document.documentURI
- document.forms
- document.images
- document.inputEncoding
- document.lastModified
- document.lastStyleSheetSet
- document.linkColor
- document.links
- document.location
- document.plugins
- document.preferredStyleSheetSet
- document.readyState
- document.referrer
- document.selectedStyleSheetSet
- document.styleSheets
- document.styleSheetSets
- document.title
- document.URL
- document.vlinkColor
- 方法 按一下展開目錄
- document.close()
- document.createAttribute(name_str)
- document.createElement(element_str)
- document.createTextNode(text_str)
- document.enableStyleSheetsForSet(ss_str)
- document.getElementById(id_str)
- document.getElementsByClassName(cn_str)
- document.getElementsByName(n_str)
- document.getElementsByTagName(tn_str)
- document.hasFocus()
- document.open()
- document.write(str)
- document.writeln(str)
元素物件 element
- 屬性 按一下展開目錄
- Node.baseURI
- Node.childNodes
- Node.firstChild
- Node.lastChild
- Node.nextSibling
- Node.nodeName
- Node.nodeType
- Node.parentNode
- Node.previousSibling
- Node.textContent
- element.childElementCount
- element.children
- element.classList
- element.className
- element.clientHeight
- element.clientLeft
- element.clientTop
- element.clientWidth
- element.firstElementChild
- element.id
- element.innerHTML
- element.lastElementChild
- element.name
- element.nextElementSibling
- element.offsetHeight
- element.offsetLeft
- element.offsetParent
- element.offsetTop
- element.offsetWidth
- element.previousElementSibling
- element.scrollHeight
- element.scrollLeft
- element.scrollTop
- element.scrollWidth
- element.style
- element.title
- 方法 按一下展開目錄
- element.addEventLisener(t_str, f, b)
- Node.appendChild(c)
- Node.cloneNode(b)
- Node.hasAttributes()
- Node.hasChildNodes()
- Node.insertBefore(n, r)
- Node.isEqualNode(a)
- Node.isSameNode()
- Node.removeChild(c)
- Node.replaceChild(c)
- element.getAttribute(n)
- element.getAttributeNode(n)
- element.getElementsByTagName(n)
- element.hasAttribute(n)
- element.removeAttribute(n)
- element.setAttribute(n, v)
事件物件 event
- 屬性 按一下展開目錄
- event.altKey
- event.button
- event.cancelable
- event.charCode
- event.clientX
- event.clientY
- event.ctrlKey
- event.defaultPrevented
- event.detail
- event.keyCode
- event.layerX
- event.layerY
- event.metaKey
- event.screenX
- event.screenY
- event.shiftKey
- event.type
- event.view
- event.which
- 方法 按一下展開目錄
HTML 元素的事件處理屬性 按一下展開目錄
- 拷貝 oncopy
- 剪下 oncut
- 貼上 onpaste
- 離開焦點 onblur
- 更改 onchange
- 點擊 onclick
- 雙重點擊 ondbclick
- 進入焦點 onfocus
- 按住按鍵 onkeydown
- 按按鍵 onkeypress
- 釋放按鍵 onkeyup
- 按住滑鼠 onmousedown
- 滑鼠移動 onmousemove
- 離開目標元素 onmouseout
- 進入目標元素 onmouseover
- 釋放滑鼠 onmouseup
- 滾動滑鼠滾輪 onmousewheel
- 調整瀏覽器視窗大小 onresize
- 使用滑鼠滾輪 onscroll
- 滑鼠「拖」 ondrag
- 滑鼠「放」 ondrop
- 載入網頁 onload
window 物件
- 屬性 按一下展開目錄
- window.closed
- window.document
- window.frameElement
- window.frames
- window.history
- window.location
- window.innerHeight
- window.innerWidth
- window.length
- window.name
- window.navigator
- navigator.appCodeName
- navigator.appName
- navigator.appVersion
- navigator.buildID
- navigator.cookieEnabled
- navigator.language
- navigator.mimeTypes
- navigator.onLine
- navigator.oscpu
- navigator.platform
- navigator.plugins
- navigator.product
- navigator.userAgent
- navigator.vendor
- navigator.javaEnabled()
- window.opener
- window.outerHeight
- window.outerWidth
- window.pageXOffset
- window.pageYOffset
- window.parent
- window.screen
- window.screen.availTop
- window.screen.availLeft
- window.screen.availHeight
- window.screen.availWidth
- window.screen.colorDepth
- window.screen.height
- window.screen.left
- window.screen.pixelDepth
- window.screen.top
- window.screen.width
- window.screenX
- window.screenY
- window.scrollMaxX
- window.scrollMaxY
- window.scrollX
- window.scrollY
- window.self
- window.status
- window.top
- 方法 按一下展開目錄
- window.close()
- window.open(sU, sN, sF)
- window.alert()
- window.back()
- window.blur()
- window.focus()
- window.clearInterval(id)
- window.setInterval(f, d)
- window.clearTimeout(id)
- window.setTimeout(f, d)
- window.confirm(m)
- window.escape(r)
- window.unescape(e)
- window.forward()
- window.getComputedStyle(e)
- window.home()
- window.moveBy(x, y)
- window.moveTo(x, y)
- window.print()
- window.prompt(t, v)
- window.resizeBy(x, y)
- window.resizeTo(x, y)
- window.scroll(x, y)
- window.scrollBy(x, y)
- window.scrollByLines(n)
- window.scrollByPages(n)
- window.scrollTo(x, y)
樣式設定物件 style
- 屬性
- 元素呈現方式 display
- 文字相關 按一下展開目錄
- 字型顏色 color
- 字型種類 fontFamily
- 字型粗細 fontWeight
- 字型尺寸 fontSize
- 字型格式 fontStyle
- 字型變體 fontVariant
- 字型伸縮 fontStretch
- 字型大小 fontSizeAdjust
- 字型 font
- 文字縮排 textIndent
- 水平對齊 textAlign
- 文字行高 lineHeight
- 垂直對齊 verticalAlign
- 單字間距 wordSpacing
- 字元間距 letterSpacing
- 大小寫轉換 textTransform
- 文字裝飾 textDecoration
- 文字陰影 textShadow
- 空白字元 whiteSpace
- 文字方向 direction
- 區塊相關 按一下展開目錄
- 寬度 width
- 高度 height
- 邊界 margin
- 左邊界 marginLeft
- 右邊界 marginRight
- 上邊界 marginTop
- 下邊界 marginBottom
- 邊距 padding
- 左邊距 paddingLeft
- 右邊距 paddingRight
- 上邊距 paddingTop
- 下邊距 paddingBottom
- 邊框格式 borderStyle
- 左邊框格式 borderLeftStyle
- 右邊框格式 borderRightStyle
- 上邊框格式 borderTopStyle
- 下邊框格式 borderBottomStyle
- 邊框粗細 borderWidth
- 左邊框粗細 borderLeftWidth
- 右邊框粗細 borderRightWidth
- 上邊框粗細 borderTopWidth
- 下邊框粗細 borderBottomWidth
- 邊框顏色 borderColor
- 左邊框顏色 borderLeftColor
- 右邊框顏色 borderRightColor
- 上邊框顏色 borderTopColor
- 下邊框顏色 borderBottomColor
- 邊框 border
- 左邊框 borderLeft
- 右邊框 borderRight
- 上邊框 borderTop
- 下邊框 borderBottom
- 背景相關 按一下展開目錄
- 背景 background
- 背景顏色 backgroundColor
- 背景圖片 backgroundImage
- 重複背景圖片 backgroundRepeat
- 背景位置 backgroundPosition
- 背景固定 backgroundAttachment
- 定位相關 按一下展開目錄
- 浮動 cssFloat
- 清除 clear
- 定位 position
- 對頂端位移 top
- 對右端位移 right
- 對底部位移 bottom
- 對左端位移 left
- 最小寬度 minWidth
- 最大寬度 maxWidth
- 最小高度 minHeight
- 最大高度 maxHeight
- 溢出 overflow
- 剪裁 clip
- 可見性 visibility
- 重疊順序 zIndex
- 表格 按一下展開目錄
- 清單 按一下展開目錄
- 自訂內容 content 按一下展開目錄
- 引號 quotes
- 滑鼠游標 cursor
- 外框 outline 按一下展開目錄
HTML 元素物件
- 根元素 按一下展開目錄
- 文件資料元素 按一下展開目錄
- <head> (HTMLHeadElement)
- <title> (HTMLTitleElement)
- <base> (HTMLBaseElement)
- <link> (HTMLLinkElement)
- <meta> (HTMLMetaElement)
- <style> (HTMLStyleElement)
- <script> (HTMLScriptElement)
- <noscript> (HTMLElement)
- 文件區域元素 按一下展開目錄
- <body> (HTMLBodyElement)
- <section> (HTMLElement)
- <nav> (HTMLElement)
- <article> (HTMLElement)
- <aside> (HTMLElement)
- <h1> <h2> <h3> <h4> <h5> <h6> (HTMLHeadingElement)
- <hgroup> (HTMLElement)
- <header> (HTMLElement)
- <footer> (HTMLElement)
- <address> (HTMLElement)
- 群組元素 按一下展開目錄
- <p> (HTMLParagraphElement)
- <hr> (HTMLHRElement)
- <pre> (HTMLPreElement)
- <blockquote> (HTMLQuoteElement)
- <ol> (HTMLOListElement)
- <ul> (HTMLUListElement)
- <li> (HTMLLIElement)
- <dl> (HTMLDListElement)
- <dt> (HTMLElement)
- <dd> (HTMLElement)
- <figure> (HTMLElement)
- <figcaption> (HTMLElement)
- <div> (HTMLDivElement)
- 文字層級元素 按一下展開目錄
- <a> (HTMLAnchorElement)
- <em> (HTMLElement)
- <strong> (HTMLElement)
- <small> (HTMLElement)
- <s> (HTMLElement)
- <cite> (HTMLElement)
- <q> (HTMLQuoteElement)
- <dfn> (HTMLElement)
- <abbr> (HTMLElement)
- <data> (HTMLDataElement)
- <time> (HTMLTimeElement)
- <code> (HTMLElement)
- <var> (HTMLElement)
- <samp> (HTMLElement)
- <kbd> (HTMLElement)
- <sub> (HTMLElement)
- <sup> (HTMLElement)
- <i> (HTMLElement)
- <b> (HTMLElement)
- <u> (HTMLElement)
- <mark> (HTMLElement)
- <ruby> (HTMLElement)
- <rt> (HTMLElement)
- <rp> (HTMLElement)
- <bdi> (HTMLElement)
- <bdo> (HTMLElement)
- <span> (HTMLSpanElement)
- <br / > (HTMLBRElement)
- <wbr> (HTMLElement)
- 編修記錄元素 按一下展開目錄
- 內嵌媒體元素 按一下展開目錄
- <img> (HTMLImageElement)
- <iframe> (HTMLIFrameElement)
- <embed> (HTMLEmbedElement)
- <object> (HTMLObjectElement)
- <param> (HTMLParamElement)
- <video> (HTMLVideoElement)
- <audio> (HTMLAudioElement)
- <source> (HTMLSourceElement)
- <track> (HTMLTrackElement)
- <canvas> (HTMLCanvasElement)
- CanvasRenderingContext2D 按一下展開目錄
- CanvasRenderingContext2D.canvas
- CanvasRenderingContext2D.save()
- CanvasRenderingContext2D.restore()
- CanvasRenderingContext2D.scale()
- CanvasRenderingContext2D.rotate()
- CanvasRenderingContext2D.translate()
- CanvasRenderingContext2D.transform()
- CanvasRenderingContext2D.setTransform()
- CanvasRenderingContext2D.globalAlpha
- CanvasRenderingContext2D.globalCompositeOperation
- CanvasRenderingContext2D.strokeStyle
- CanvasRenderingContext2D.fillStyle
- CanvasRenderingContext2D.createLinearGradient()
- CanvasRenderingContext2D.createRadialGradient()
- CanvasGradient 物件
- CanvasRenderingContext2D.createPattern()
- CanvasRenderingContext2D.lineWidth
- CanvasRenderingContext2D.lineCap
- CanvasRenderingContext2D.lineJoin
- CanvasRenderingContext2D.miterLimit
- CanvasRenderingContext2D.shadowOffsetX
- CanvasRenderingContext2D.shadowOffsetY
- CanvasRenderingContext2D.shadowBlur
- CanvasRenderingContext2D.shadowColor
- CanvasRenderingContext2D.clearRect()
- CanvasRenderingContext2D.fillRect()
- CanvasRenderingContext2D.strokeRect()
- CanvasRenderingContext2D.beginPath()
- CanvasRenderingContext2D.closePath()
- CanvasRenderingContext2D.moveTo()
- CanvasRenderingContext2D.lineTo()
- CanvasRenderingContext2D.quadraticCurveTo()
- CanvasRenderingContext2D.bezierCurveTo()
- CanvasRenderingContext2D.arcTo()
- CanvasRenderingContext2D.rect()
- CanvasRenderingContext2D.arc()
- CanvasRenderingContext2D.fill()
- CanvasRenderingContext2D.stroke()
- CanvasRenderingContext2D.drawSystemFocusRing()
- CanvasRenderingContext2D.drawCustomFocusRing()
- CanvasRenderingContext2D.scrollPathIntoView()
- CanvasRenderingContext2D.clip()
- CanvasRenderingContext2D.isPointInPath()
- CanvasRenderingContext2D.font
- CanvasRenderingContext2D.textAlign
- CanvasRenderingContext2D.textBaseline
- CanvasRenderingContext2D.fillText()
- CanvasRenderingContext2D.strokeText()
- CanvasRenderingContext2D.measureText()
- CanvasRenderingContext2D.drawImage()
- CanvasRenderingContext2D.createImageData()
- CanvasRenderingContext2D.getImageData()
- CanvasRenderingContext2D.putImageData()
- <map> (HTMLMapElement)
- <area> (HTMLAreaElement)
- <applet> (HTMLAppletElement)
- 表格元素 按一下展開目錄
- <table> (HTMLTableElement)
- <caption> (HTMLTableCaptionElement)
- <colgroup> (HTMLTableColElement)
- <col> (HTMLTableColElement)
- <tbody> (HTMLTableSectionElement)
- <thead> (HTMLTableSectionElement)
- <tfoot> (HTMLTableSectionElement)
- <tr> (HTMLTableRowElement)
- <td> (HTMLTableDataCellElement)
- <th> (HTMLTableHeaderCellElement)
- 表單元素 按一下展開目錄
- <form> (HTMLFormElement)
- <fieldset> (HTMLFieldSetElement)
- <legend> (HTMLLegendElement)
- <label> (HTMLLabelElement)
- <input> (HTMLInputElement)
- <button> (HTMLButtonElement)
- <select> (HTMLSelectElement)
- <datalist> (HTMLDataListElement)
- <optgroup> (HTMLOptGroupElement)
- <option> (HTMLOptionElement)
- <textarea> (HTMLTextAreaElement)
- <keygen> (HTMLKeygenElement)
- <output> (HTMLOutputElement)
- <progress> (HTMLProgressElement)
- <meter> (HTMLMeterElement)
- 互動式元素 按一下展開目錄
另外我們整理了一份
JavaScript 線上中文資源
the end
沒有留言:
張貼留言