Firebug使用相关

Firebug是网页浏览器Firefox下的一款开发类插件,集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。在日常使用中常会同时安装其扩展Yslow来一并对网站进行调试。同时为了兼容其它浏览器,还开发有Firebug Lite,功能略弱于Firebug。 安装完后要开启Firebug,可点击浏览器工具栏中的Firebug图标图标,也可按下F12开启,关闭方法与开启方法相同,另外按下Ctrl+F12将会在弹出的窗口中开启Firebug的调试窗口。调试窗口中主要包含控制台标签、HTML标签、CSS标签、脚本标签、DOM标签、网络标签和Cookies标签,可通过点击调试窗口左上角的Firebug图标,然后在可见面板中勾选或取消勾选来显示或隐藏相应的标签,调试窗口右上侧还有搜索窗口,能过搜索方便找到所需查看的内容。 Firebug调试窗口 控制台标签为JS命令行操作,显示JS错误信息、提示信息和日志信息,可在右侧窗口键入代码; HTML标签显示页面的所有HTML源代码,可能过直接修改代码的方式查看修改后的结果, 只需要所需修改代码上双击或右击在弹出窗口中选择”编辑HTML…”即可进行编辑,而要定位到页面上相应元素的代码,可通过在相应页面元素上右击选择“使用Firebug查看元素”,也可点击小甲虫右侧的点击查看页面元素图标即“点击查看页面中的元素”图标(快捷键Ctrl+Shift+C)然后直接点击需查看的元素来定位到相对应的代码; CSS标签下可编辑页面的CSS源代码,如同对HTML的修改一样,可通过双击来对样式来进行修改,对于字体大小等数值还可以通过方向键↑和↓来进行更改,这种修改每次会调整1个单位,而按下Ctrl键加方向键每次调整0.1个单位,按下Shift键加方向键每次调整10个单位; 脚本标签中显示页面的脚本,也可在该标签对脚本进行调试; DOM标签显示所有的页面对象和DOM属性; 网络标签显示页面各元素的下载情况和所花费的时间,以及HTTP请求和头信息; Cookies标签显示页面请求的Cookies,可对页面中的cookie进行查看和修改。

JavaScript控制台

Firebug的控制台可以很方便地对JavaScript代码进行调试,控制台内置了很多命令方便对JS进行调试,如console.log()命令可以打印出日志,以下代码可以输出日志结果2014年8月31日

console.log("%d年%d月%d日",2014,8,31);

其中的%d称为占位符,代表数字,此外浮点数的占位符为%f,字符串占位符为%s,对象的占位符为%o,输出的内容也可以为变量,如console.log(i),除日志输出外还有信息输出console.info(),debug输出console.debug(),警告输出console.warn(),错误输出console.error()。对输出的内容可进行分组,使用console.group()命令:

console.group("group1");
console.log("101");
console.log("102");
console.log("103");
console.groupEnd();
console.group("group2");
console.log("201");
console.log("202");
console.log("203");
console.groupEnd();

控制台中还有用于调试JS代码运行速度的命令console.time(),使用示例如下:

console.time("test");
for(var i=1; i<10000; i++){

}
console.timeEnd("test");

控制台还包含其它命令,可通过console.dir(console)来查看console对象的所有命令和方法,这些命令可以写在文件中,也可以在控制台右侧的多行调试框中输入并点击运行来进行查看
Firebug控制台

JavaScript String对象的方法

String对象的方法和属性,字符串变量同样也可以使用。

方法 描述
anchor() 创建 HTML 锚。
big() 用大号字体显示字符串。
blink() 显示闪动字符串。
bold() 使用粗体显示字符串。
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
fixed() 以打字机文本显示字符串。
fontcolor() 使用指定的颜色来显示字符串。
fontsize() 使用指定的尺寸来显示字符串。
fromCharCode() 从字符编码创建一个字符串。
indexOf() 检索字符串。
italics() 使用斜体显示字符串。
lastIndexOf() 从后向前搜索字符串。
link() 将字符串显示为链接。
localeCompare() 用本地特定的顺序来比较两个字符串。
match() 找到一个或多个正则表达式的匹配。
replace() 替换与正则表达式匹配的子串。
search() 检索与正则表达式相匹配的值。
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
small() 使用小字号来显示字符串。
split() 把字符串分割为字符串数组。
strike() 使用删除线来显示字符串。
sub() 把字符串显示为下标。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
sup() 把字符串显示为上标。
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
toSource() 代表对象的源代码。
toString() 返回字符串。
valueOf() 返回某个字符串对象的原始值。

JavaScript event.keyCode大全

JavaScript event.keyCode大全
keycode 8 = BackSpace BackSpace
keycode 9 = Tab Tab
keycode 12 = Clear
keycode 13 = Enter
keycode 16 = Shift_L
keycode 17 = Control_L
keycode 18 = Alt_L
keycode 19 = Pause
keycode 20 = Caps_Lock
keycode 27 = Escape Escape
keycode 32 = space space
keycode 33 = Prior
keycode 34 = Next
keycode 35 = End
keycode 36 = Home
keycode 37 = Left
keycode 38 = Up
keycode 39 = Right
keycode 40 = Down
keycode 41 = Select
keycode 42 = Print
keycode 43 = Execute
keycode 45 = Insert
keycode 46 = Delete
keycode 47 = Help
keycode 48 = 0 equal braceright
keycode 49 = 1 exclam onesuperior
keycode 50 = 2 quotedbl twosuperior
keycode 51 = 3 section threesuperior
keycode 52 = 4 dollar
keycode 53 = 5 percent
keycode 54 = 6 ampersand
keycode 55 = 7 slash braceleft
keycode 56 = 8 parenleft bracketleft
keycode 57 = 9 parenright bracketright
keycode 65 = a A
keycode 66 = b B
keycode 67 = c C
keycode 68 = d D
keycode 69 = e E EuroSign
keycode 70 = f F
keycode 71 = g G
keycode 72 = h H
keycode 73 = i I
keycode 74 = j J
keycode 75 = k K
keycode 76 = l L
keycode 77 = m M mu
keycode 78 = n N
keycode 79 = o O
keycode 80 = p P
keycode 81 = q Q at
keycode 82 = r R
keycode 83 = s S
keycode 84 = t T
keycode 85 = u U
keycode 86 = v V
keycode 87 = w W
keycode 88 = x X
keycode 89 = y Y
keycode 90 = z Z
keycode 96 = KP_0 KP_0
keycode 97 = KP_1 KP_1
keycode 98 = KP_2 KP_2
keycode 99 = KP_3 KP_3
keycode 100 = KP_4 KP_4
keycode 101 = KP_5 KP_5
keycode 102 = KP_6 KP_6
keycode 103 = KP_7 KP_7
keycode 104 = KP_8 KP_8
keycode 105 = KP_9 KP_9
keycode 106 = KP_Multiply KP_Multiply
keycode 107 = KP_Add KP_Add

keycode 108 = KP_Separator KP_Separator
keycode 109 = KP_Subtract KP_Subtract
keycode 110 = KP_Decimal KP_Decimal
keycode 111 = KP_Divide KP_Divide
keycode 112 = F1
keycode 113 = F2
keycode 114 = F3
keycode 115 = F4
keycode 116 = F5
keycode 117 = F6
keycode 118 = F7
keycode 119 = F8
keycode 120 = F9
keycode 121 = F10
keycode 122 = F11
keycode 123 = F12
keycode 124 = F13
keycode 125 = F14
keycode 126 = F15
keycode 127 = F16
keycode 128 = F17
keycode 129 = F18
keycode 130 = F19
keycode 131 = F20
keycode 132 = F21
keycode 133 = F22
keycode 134 = F23
keycode 135 = F24
keycode 136 = Num_Lock
keycode 137 = Scroll_Lock
keycode 187 = acute grave
keycode 188 = comma semicolon
keycode 189 = minus underscore
keycode 190 = period colon
keycode 192 = numbersign apostrophe
keycode 210 = plusminus hyphen macron
keycode 211 =
keycode 212 = copyright registered
keycode 213 = guillemotleft guillemotright
keycode 214 = masculine ordfeminine
keycode 215 = ae AE
keycode 216 = cent yen
keycode 217 = questiondown exclamdown
keycode 218 = onequarter onehalf threequarters
keycode 220 = less greater bar
keycode 221 = plus asterisk asciitilde
keycode 227 = multiply division

keycode 228 = acircumflex Acircumflex
keycode 229 = ecircumflex Ecircumflex
keycode 230 = icircumflex Icircumflex
keycode 231 = ocircumflex Ocircumflex
keycode 232 = ucircumflex Ucircumflex
keycode 233 = ntilde Ntilde
keycode 234 = yacute Yacute
keycode 235 = oslash Ooblique
keycode 236 = aring Aring
keycode 237 = ccedilla Ccedilla
keycode 238 = thorn THORN
keycode 239 = eth ETH
keycode 240 = diaeresis cedilla currency
keycode 241 = agrave Agrave atilde Atilde
keycode 242 = egrave Egrave
keycode 243 = igrave Igrave
keycode 244 = ograve Ograve otilde Otilde
keycode 245 = ugrave Ugrave
keycode 246 = adiaeresis Adiaeresis
keycode 247 = ediaeresis Ediaeresis
keycode 248 = idiaeresis Idiaeresis
keycode 249 = odiaeresis Odiaeresis
keycode 250 = udiaeresis Udiaeresis
keycode 251 = ssharp question backslash
keycode 252 = asciicircum degree
keycode 253 = 3 sterling
keycode 254 = Mode_switch

使用event对象的keyCode属性判断输入的键值
eg:if(event.keyCode==13)alert(“enter!”);
键值对应表
A  0X65  U   0X85
B  0X66  V   0X86
C  0X67  W   0X87
D  0X68  X   0X88
E  0X69  Y   0X89
F  0X70  Z   0X90
G  0X71  0   0X48
H  0X72  1   0X49
I  0X73  2   0X50
J  0X74  3   0X51
K  0X75  4   0X52
L  0X76  5   0X53
M  0X77  6   0X54
N  0X78  7   0X55
O  0X79  8   0X56
P  0X80  9   0X57
Q  0X81 ESC  0X1B
R  0X82 CTRL  0X11
S  0X83 SHIFT 0X10
T  0X84 ENTER 0XD
如果要使用组合键,则可以利用event.ctrlKey,event.shiftKey,event .altKey判断是否按下了ctrl键、shift键以及alt键
示例代码如下,可通过在内添加onkeyboard=maskingKeyboard()方法来进行测试:

function maskingKeyboard(){
if(event.keyCode==8){
event.keyCode=0;
event.returnValue=false;
alert("当前设置不允许使用退格键");
}
if(event.keyCode==13){
event.keyCode=0;
event.returnValue=false;
alert("当前设置不允许使用回车键");
}
if(event.keyCode==116){
event.keyCode=0;
event.returnValue=false;
alert("当前设置不允许使用F5键刷新");
}
if((event.altKey)&&((window.event.keyCode==37)||(window.event.keyCode==39))){
event.returnValue=false;
alert("当前设置不允许使用Alt+方向键←或方向键→");
}
if((event.ctrlKey)&&(event.keyCode==67)){
event.returnValue=false;
alert("当前设置不允许使用Ctrl+C快键键");
}
if((event.shiftKey)&&(event.keyCode==121)){
event.returnValue=false;
alert("当前设置不允许使用Shift+F10");
}
}

HTML5绘制桌球

桌球(又称台球 ,撞球)源自英国,是一项在国际上广泛流行的高雅的室内体育运动,是一种用球杆在台上击球,依靠计算得分确定比赛胜负的室内娱乐体育项目。
下图为通过HTML5的Canvas配合JS生成的仿桌球图片,右侧的小球采用随机函数显示不同颜色,每次刷新后将显示不同的组合颜色。


Your browser does not support the canvas element.


HTML5绘制奥运五环

奥运五环是奥运会的标志,由Pierre de Coubertin顾拜旦先生于1913年所构思设计的,下面通过HTML5的canvas加js来绘制五环标志。部分代码如下:
创建Canvas:

通过javascript设置画布环境并绘制圆形:

由于IE9以前的版本及其它浏览器早期的版本对canvas不支持,所以将无法正常显示,图形效果如下:


Your browser does not support the canvas element.


Html and JavaScript Mumbo Jumbo Part 1

I want to start a journey of getting to know those jargons with you,  fancy words like HTML, CSS, Javascript, JQuery, AJAX, PHP, MySQL aren‘t really as straightforward as they sounded to be. As a member from the sales team, you shouldn’t be expecting to become an expect on any of these subjects, after all, this is just a blog from an amateur.

What is HTML after all? Hypertext Markup Language or HTML(standardized by W3C or World Wide Web Consortium) is a browser-side language which can be interpreted by different browsers to present you all the beautiful and ugly billions of web pages out there. Basically with HTML you use a pair of tags(open tag and close tag) to present elements:<p></p> for paragraph, <h1></h1> for heading 1 etc. But there’re tags without closing tag, such as <br /> tag and <hr />tag. Like any language, HTML has its own grammar, always surrounded by <html></html>tags(the DTD(Document Type Definition) is another story), within which there’re <head></head>and <body></body> tags. Within head tags you’ll have title, meta(description, keyword), link(for CSS),script(which can also be put in body tags) tags. The main content are all located in body tags, here we’ll meet H1 through H6, p,table, div, span, ul, ol and other tags.

CSS is the short form of Cascading Style Sheets, which formats the HTML elements with different styles(be it background image, padding, margin or font size). It’s worth noting that you can format the margin or padding on four sides independently in a single line of code, it goes clockwise(namely top, right, bottom, left). CSS can be a individual .css file or embedded within the html files.

JavaScript was formerly known as EMCAScript(Sorry, EMCAScript is a standard, JS was firstly know as Livescript and developed by Netscape), but then renamed as JavaScript, probably it was due to this buzzword Java came around at the time it was renamed. We’ll talk more about JavaScript in the future.

Comparing to CSS and JS, HTML is like the building blocks of a web page, it controls the structure, CSS and JS are there to make the web pages in style and improve the interactivity.