歡迎轉載(註明出處)或直接轉貼網址也ok,但是請不要直接把內容摳走貼在別的地方~

目前分類:Javascript (18)

瀏覽方式: 標題列表 簡短摘要

這篇要來紀錄學到的是 Chrome 瀏覽器的開發人員工具 (Chrome DevTools) 的一些小技巧

這個開發工具對我來說有點強,如果會使用或是加上其他套件的話,有很多小技巧可以讓你開發更快速

但是這一篇先來了解的是 console 的使用,畢竟這個比較常用

之後再來使用這個工具來效能分析之類的

首先混篇數的是常用的快捷鍵 (不常用的就不列了) 

一、快捷鍵

1. F12 叫出開發人員工具

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

此篇是給新手看的,老手可以直接上一頁了

這篇要來仔細研究的是邏輯運算子的使用,與一些開發上的小技巧

大家看到標題一定會以為這篇又是來混篇數的, &&、||、! (and、or、not) 還需要你講嗎

的確是混篇數沒錯,但如果真的了解這幾個運算子的使用,能讓你在開發時的 code 更簡短,邏輯更清晰

Javascript 有以下幾種類型的運算子,但這篇主要是針對邏輯運算子,想了解其他運算子的自己點進去看

代入運算子比較運算子算術運算子位元運算子邏輯運算子字串運算子特殊運算子

另外還有一元、二元、三元運算子,三元運算子就是條件運算子,請點進上面"特殊運算子"裡面有講

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

這篇要來出考題考考大家!! 答對了沒有獎品

前言:

這篇要來拿昨天看到的一個例子來練習,覺得是個很好的範例,內含許多 javascript 基礎

在這個系列的第一篇有說明了 By Value、By Reference 的差異還有造成差異的原因

在進行考試之前可以進來這篇複習:

Javascript 基礎打底系列 (一) - 常見的出包狀況解析 (關於By Value、By Reference)

如果你看過且已經完全了解上面那篇的話,那下面這問題就會答對

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

前言 & 廢話:

這篇是基礎打底系列第二篇,這篇其實比較簡單些,要來搞懂的是 null、undefined、NaN 的差別

Javascript 這語言有很多特別的地方,除了上篇根據原始值、複合值來決定by value、by reference 外

其他語言只會有一種型態來表示 "沒有" 的意思,像 C# 是 null、VB.Net 是 Nothing

但 Javascript 至少就有 null 跟 undefined 兩種,另外還有個 NaN 不知道幹嘛的

這篇要來稍微了解一下它們之間的差異為何,還有開發時該怎麼處理這些特別的值

雖然簡短,但也有目錄,懶得看過程可以直接點結論:

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

這篇有目錄

1. 何謂原始值

2. 何謂複合值

Q:內建建構式的使用與比對問題

Q:原始值與複合值的比對問題

Q:By Reference or By Value ?

Q:在函數中的 By Value、By Reference

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

今天要來介紹的是 Web Works,其實這個技術已經很久了,不過知道歸知道,瀏覽器不支援也沒法用

但隨著舊版本IE的沒落,感覺應該是可以開心使用了

先來看一下支援表

首先望向進步的反指標 IE,沒有看到 IE10......不,感覺是直接當作從來沒有 IE10的樣子

找了半天,還好展開全部發現 IE10是有支援的,反而Android Browser 要非常小心

雖然我的Android手機現在都6.0了,但應該還有一些低階手機還在 4.X

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

前言:

超級難得我會來介紹有關播放影片的套件,畢竟在網站上播放串流的機會不是很高 

(我是說我的工作上啦)

這次會接觸到串流影片的播放是因為前陣子接了個 case,想要在各平台上播放自家的串流影片

所謂各平台就是指.....Windows、Mac、iPhone、Android、平板上面也可以順利的播放串流影片

第一次接觸到串流的東東讓我做了好久的功課啊!!


小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

這個問題其實是前幾個禮拜開發專案時遇到的,其實最後總結來講算是常識

但當時還是搞很久,因為 js 寫太長......debugger 也看不出問題 (因為是瀏覽器行為造成的)

不過還是寫出來混一下篇數,因為最近在衝百萬累積人氣如下圖 ㄎㄎ

廢文開始

大家都知道 HTML5 的標籤很多本身就具有驗證的能力

ex: <input type="......." />

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

今天被交付了一個工作....是要在原本的舊表單頁面判斷權限

如果沒有權限的就只能唯讀或 disabled,不能讓使用者修改

就類似下圖這樣,有的可以改有的不能改

Clipboard02  

但這真的很麻煩.....除了要將每個控制項 (input、select) 都加上額外的標籤外,還要改到後端接值的方式

之所以要加標籤是為了要知道這個 input 是用於哪一個區塊的權限

如果沒有權限就要將 input 改為 disabled

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

網路上找到這個方法超好用的

原網址在此:http://yiding-he.iteye.com/blog/58180

在此筆記一下

一直以來都覺得 javascript 的字串有點麻煩

因為它不像C#一樣可以直接用如下的方式表示一個字串

string Str = @"

111

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

前言 : 

會需要增加行距這東西是使用者要求的,據說好像是有行距比較有fu

但這個問題足足困擾了我1.1天,因為網路上看到的解決方案都騙人的啊!!!

而且天下文章一大抄,對岸找到的一堆解決方案根本都一模一樣

連前言都給人家摳過去真是不要臉

 

我要做到的功能如下圖,可以讓user 編輯文章的 line-height

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

感覺這篇寫了很久....

都是上班無聊有想到才開來寫一下這樣

這篇也是我的學習心得之一,當然還有一些工作上常用到,但初學者可能也不太了的東西

因為本人學習還蠻不求甚解的,只要覺得好玩就會去玩一下

所以看到有一些用法很有趣,或學完之後會讓人覺得很厲害的話就會來學一下

以下就列出這些進階用法或小常識

但對一些不是初學者的人可能會覺得是個P,請多多包涵

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

前言 : 

因為最近瘋狂的用 javascript 操作 JSON,發現陣列實在是超級無敵好用

不管是在陣列上的資料儲存、過濾、排序、組合都超級好用

所以有整理了一些常用 + 日後可能會用到的操作方式

完整的 Array 用法可以看 MDN 官網

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

這篇只是列出來比較常用或可能會用到的操作

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

總要來個前言

============================================

因為工作是寫網站的關係,常常需要寫一些驗證或判斷的 js

但是有些常用的功能每次都要重寫一遍很浪費時間,所以打算打包成一個js

然後這陣子有看了 "Javascript 設計模式" 這本書

所以就用了一些裡面教的方法打包了,順便當作練習一下

如果有人要用的話......(檔案那麼小,其實很好用的喔)

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

函數不管在哪種程式中都是不可或缺的好用

javascript 中函數有三種寫法與名稱,使用上也會有些差異

俺比較常用的是宣告式 + 匿名函數

第一種大概是最常用的,叫做函數宣告式

   //函數宣告式
   function add(a,b) {
      return a + b;
   }

第二種叫做具名函數 or 具名表示式

   
   //具名函數
   var addfun = function add(a,b) {
      return a + b;
   }

第三種是匿名函數,也可以叫函數的表示式

   
   //匿名函數
   var addfun = function (a,b) {
      return a + b;
   }

 

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

物件的建立

如果要建立一個物件,就像下面這樣

但是現在可以改用實字的方式建立,結構會更清楚喔

另一個使用實字的原因,如果你在區域範圍內用 Object 去建構的話

假設你外圍有相同名字的建構式,那解譯器會從你呼叫Object() 的區域開始向外找

直到找到全域為止

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()

標題有點長

今天早上遇到一個有關 html + js 的靈異現象,足足卡了一個早上

其實這個程式非常的簡單,簡單到根本沒幾行

後來雖然想辦法解決了但是還是不知道為什麼....

如果有知道為什麼的人跟我說一下原理 (跪 

================================

我要的功能是這樣的 :

小雕 發表在 痞客邦 PIXNET 留言(3) 人氣()

休息時間寫一篇.....(好像休息很久了)

今天遇到客戶的一個問題是為什麼商品加不進去購物車(他用 IE6)

這年代是要去哪裡找 IE6,IE6 是 windows 2000 時代的東西

實在是很想忽略不管.....但還是很不爭氣的找了問題....

 

然後我是這樣寫的

html : 

小雕 發表在 痞客邦 PIXNET 留言(0) 人氣()