# JavaScript - Encryption 弱弱的加密
## base64 Base64 encoding and decoding
## sha1(only js to js) Need utf8 encode JavaScript sha1 function
## utf8(only js to js) JavaScript utf8_encode function JavaScript utf8_decode function decode can handle php utf8_encode()
## Encrypt(js to php) Use crypto-js
HMAC
Refer - Javascript: Equivalent of PHP’s hash_hmac() with RAW BINARY output?
...
Category: JavaScript
# JavaScript - get element height If we want get element height use JavaScript We can use clientHeight 、 offsetHeight or scrollHeight
console.log(document.getElementById('div').clientHeight); console.log(document.getElementById('div').offsetHeight); console.log(document.getElementById('div').scrollHeight); Refer - Element - Web API Interfaces | MDN
...
# JavaScript - jsonp ## If only get data(read) Use callback
// javascript // build from javascript var scriptEl = document.createElement("script"); scriptEl.src = "http://tysh310246.blogspot.com/feeds/posts/default?alt=json&callback=myFunction"; document.getElementsByTagName("head")[0].appendChild(scriptEl); or
<!-- html --> <!-- embed from HTML --> <script src="http://tysh310246.blogspot.com/feeds/posts/default?alt=json&callback=myFunction"></script> myFunction is callback function handle json data
// javascript function myFunction(data) { // data is json console.log(data); } ### example <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <!-- <script src="http://tedshd.lionfree.net/demo/php/api_test.php?callback=test"></script> --> <script> var scriptEl = document.
...
# JavaScript - YouTube API note player demo YouTube JavaScript Player API Reference YouTube 嵌入式播放器参数 YouTube Embedded Players and Player Parameters YouTube Player API Reference for iframe Embeds
Use YouTube video must init a youtube player There have 2 player we can use
flash player iframe player I suggest use iframe player because it can support flash and HTML5 If use Apple mobile devices, they can’t support flash Use iframe player can solve this problem We can use javascript control player
...
# Konami 密技 JavaScript 簡單實作 最近有一個網站很紅 vogue 上上下下左右左右BA 接下來就狂按 A
KONAMI 密技阿
身為一個宅宅前端攻城獅一定要學起來這招(以後就藏一些東西在程式中)
Demo
var keyCount = 0; window.onkeydown = konami; function konami(e) { if (e.keyCode === 38 && keyCount === 0) { keyCount++; console.log(keyCount); } else if (e.keyCode === 38 && keyCount === 1) { keyCount++; console.log(keyCount); } else if (e.keyCode === 40 && keyCount === 2) { keyCount++; console.log(keyCount); } else if (e.keyCode === 40 && keyCount === 3) { keyCount++; console.
...
# JavaScript - Some Articles Collection 给JavaScript初学者的24条最佳实践
全栈式JavaScript
前端工程師必看 JavaScript The Right Way
Web 技術中的 Session 是什麼？
A first-person engine in 265 lines
JavaScript 語言核心（11）this 是什麼？
How can I get the progress of a downloading
...
# Website switch layout 之前看過不少網站有切換 layout 的功能 於是就試著做做看
Demo
主要利用定義在 body 上的 class 去做不同 layout 的切換
Sample code
var node; function node(selector) { return document.querySelector(selector); } // set style var layoutList = 'layoutList', layoutGrid = 'layoutGrid', layoutFull = 'layoutFull', layoutCard = 'layoutCard'; function changeLayout(style) { // maybe make loading? node('body').setAttribute('class', style); } // bind click change style node('#style_1').addEventListener('click', function () { changeLayout(layoutGrid); }); node('#style_2').addEventListener('click', function () { changeLayout(layoutList); }); node('#style_3').
...
# Detect mobile device Use PHP or JavaScript detect mobile device like iPhone, iPad, iPod or Android…
## Android ### PHP <?php $ua = strtolower($_SERVER['HTTP_USER_AGENT']); if(stripos($ua, 'android') !== false) { echo 'Android!!'; exit; } ?> ### JavaScript var ua = navigator.userAgent.toLowerCase(); if(ua.indexOf("android") > -1) { document.write('Android!!'); } Refer - Android Detection with JavaScript or PHP
## Apple mobile device Refer - How to detect iPhone, iPod and iPad with PHP Refer - How to Identify an Apple iPhone, iPod or iPad Visitor to Your Website
...
# JavaScript - Easy to get DOM It is old way to use getElementById, getElementsByTagName …
New method is use querySelector and querySelectorAll
If use IE, it only for IE8 up.
Make them as a method
var node; function node(selector) { if (selector.indexOf('.') === -1) { if (document.querySelectorAll(selector).length === 1) { return document.querySelector(selector); } return document.querySelectorAll(selector); } return document.querySelectorAll(selector); } And then use it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>querySelector</title> </head> <body> <div id="box" class="area"> test </div> <div class="area"> test2 </div> <div id="selector" class="area"> <p class="con"> content </p> </div> </body> <script> var node; function node(selector) { if (selector.
...
# Google map api - research log ## Introduction 使用 Google Maps JavaScript v3 static map 嵌入地圖到網頁中以圖片方式呈現 使用限制 基本上不要一日載超過 25000 次都沒事 區域化 - 語系
Library
## Init map <!DOCTYPE html> <!--使用 <!DOCTYPE html> 宣告，將應用程式宣告為 HTML5--> <html> <head> <meta charset="utf-8"> <title>Google_map_api_basic</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!--最新的瀏覽器會將使用此 DOCTYPE 宣告的內容以「標準模式」呈現，也就是說，您的應用程式應更具備跨瀏覽器相容性。此外，DOCTYPE 也設計成會逐漸適應，但無法理解它的瀏覽器將會忽略它，而採用「快速模式」顯示內容。請注意，有些 CSS 在快速模式中可以運作，但在標準模式中卻無效。具體來說，所有百分比的大小都必須繼承父區塊項目，但這些上階中如有任何一個無法指定大小，就會假設為 0 x 0 像素大小。基於這個理由，我們加入了下列 <style> 宣告--> <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0px; padding: 0px; } #map_canvas { height: 100%; } </style> <!
...