Web Design with JavaScript and the DOM 读书笔记

读书笔记…还差30页…要赶紧看了…真是相见恨晚啊….这么好的一本书书.. 最近googlepapes挂了后,东西放在mofile又忽然不见了几张图片…唉….算了,不吐槽了,赶紧看书 ,时日无多了 《Web Design with JavaScript and Document Object Model》
四、1.DOM1的setAttribute()
element.setAttribute(“value”,”the new value”); 2.testPic 3.childNodes属性
返回一个数组,包含给定元素节点的全部子元素。
body元素的专用记号: document.body 4.nodeType属性
有12种可取值。
元素节点:1
属性节点:2
文本节点:3 5.nodeValue属性

aaaa


alert(document.getElementById(“test”).childNodes[0].nodeValue)
文本是

的第一个子元素 6.firstChild和lastChild属性
node.firstChild=node.childNodes[0] 五、JavaScript编程原则和良好习惯
1.预留退路 2.避免使用”javascript”伪协议及内嵌的事件处理函数
利于searchbot的搜索
Example F
http://www” >Example Y 3.分离JavaScript
function prepareLinks(){
var links = document.getElementByTagName(“a”);
for(var i=0; i if(links[i].className == “popup”){
links[i].onclick = fuction(){
popUp(this.getAttribute(“href”));
return false;
}}}} 4.向后兼容性
if(method){statements}
对象检测技术 六、美术馆的改进
1.将多个JavaScript函数绑定到 onload事件处理函数上
window.onload = function(){
firstFunction();
secondFunction();
} 改进版:
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
} addLoadEvent(firstFunction);
addLoadEvent(secondFunction); 2.JavaScript函数的优化 P95
3.DOM Core 和 Html-DOM 七、动态创建HTML内容
1.document.write() 和专利技术innerHTML
2.DOM
2.1 createElement()
document.createElement(“p”);
2.2 appendChild()
parent.appendChild(child) ;
2.3 createTextNode()
document.TextNode(“Hi”);
2.4 insertBefore()
把一个新元素插入到一个现有元素的前面
parentElement.insertBefore(newElement,targetElement)
2.5 insertAfter()函数的编写
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
} 八、充实文档的内容
即使某种特定的浏览器会引起问题,也没有必要使用浏览器嗅探代码。对浏览器的名称和版本号进行嗅探的办法很难做到面面俱到,而且往往会导致非常复杂难解的代码。
1.显示 “缩略词语表”
2.显示”文献来源链接表”
lastChildElement的编写
var quoteChildren = quotest[i].getElementByTagName('*');
if (quoteChildren.length<1) continue;
var elem =quoteChildren[quoteChildren.length-1];
3.显示”快速访问键清单”
约定俗成的快速访问键:
accesskey=”1″ 返回到本网站主页
accesskey=”2″ 后退到前一页面
accesskey=”4″ 打开本网站的搜索表单/页面
accesskey=”9″ 本站联系办法
accesskey=”0″ 查看本网站的快速访问键清单 4.避免使用DOM插入核心内容
5.对文档里现有信息进行检索
getElementById(); getElementByTagName(); getAttribute();
6.把信息添加到文档
createElement(); createTextNode(); appendChild(); insertBefore(); setAttribute(); 九、CSS-DOM
结构层、表示层、行为层
1.style属性 只能检索内嵌样式
2.样式信息的检索
element.style.fontFamily //Camel记号
3.className属性
通过JS代码刷新
4.对函数进行抽象化 P188 十、用JavaScript实现动画效果
1.位置
position属性
static: position的默认属性,有关元素将按照他们在HTML文档里的先后顺序出现在浏览器窗口里
relative: 与static相似,属性等于relative的元素可以(在float属性的作用下)从文档的正常显示顺序里脱离出来
absolute: 可以把元素摆放在它的”容器”(文档本身)里的任何位置,这个元素在原始HTML文档里出现的位置对此没有任何影响,它的显示位置将有top、left、right、bottom等属性决定
2.时间
2.1.setTimeout()函数
让某个函数在经过一段时间之后才开始执行
setTimeout(“function”,interval)
clearTimeout()取消等待执行队列里尚未执行的某个函数
movement = setTimeout(“moveMessage()”,5000);
clearTimeout(movement); 2.2.时间递增量
moveMessage()的逻辑:
(1) 获得元素的当前位置
(2)如果元素已经到达它的目的地,则退出这个函数
(3)如果元素尚未到达它的目的地,则把它想目的地移近一点
(4)经过一段时间间隔之后从步骤1开始重读上述步骤 2.3 抽象化
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(“elementID”)) return false;
var elem = document.getElementById(“elementID”);
/*parseInt(“39 steps”) => 39 小数的话用 parseFloar(string)*/
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y){
return true;
}
if (xpos < final_x){xpos++;}
if (xpos > final_x){xpos–;}
if(ypos < final_y){ypos++;}
if(ypos > final_y){ypos–;}
elem.style.left = xpos + “px”;
elem.style.top = ypos + “px”;
var repeat = “moveElement('”+elementID+”',”+final_x+”,”+final_y+”,”interval+”)”;
movement = setTimeout(repeat,interval);
} 3. CSS
overflow属性
visible:不裁剪溢出的内容
hidden:裁剪溢出的内容
scroll:类似于hidden,浏览器将对溢出的内容进行裁剪,但会显示滚动条以便让用户能够看到内容的其他部分
auto:类似与scroll,但浏览器只在真的发生内容溢出时才显示滚动条 Math.ceil(number) Math.floor(number) Math.round(number) 十一、设计实践

]]>

Ruby FastCGI lighttpd mysql

#cd /usr/src
#export PATH=”/usr/local/bin:/usr/local/sbin:$PATH”
// 安装 readline
#wget http://download.huihoo.com/ruby/readline-5.1.tar.gz
#tar xzvf readline-5.1.tar.gz
#cd readline-5.1
#./configure –prefix=/usr/local
#make
#sudo make install
#cd ..
// 安装 ruby
#wget http://download.huihoo.com/ruby/ruby-1.8.4.tar.gz
#tar xzvf ruby-1.8.4.tar.gz
#cd ruby-1.8.4
#./configure –prefix=/usr/local –enable-pthread –with-readline-dir=/usr/local
#make
#sudo make install
#cd ..
|————————–|
| RubyGems depends on zlib |
|apt-get install zlib1g-dev|我使用yum install zlib1g-dev
|————————–|
没用apt-get这个命令
// 安装apt-get
#wget http://ftp.freshrpms.net/pub/freshrpms/redhat/9/apt/apt-0.5.5cnc6-fr1.i386.rpm
#rpm -ivh apt-0.5.5cnc6-fr1.i386.rpm
#apt-get update
// 安装 ruby-zlib
#wget http://download.huihoo.com/ruby/ruby-zlib-0.6.0.tar.gz
#tar zxvf ruby-zlib-0.6.0.tar.gz
#cd ruby-zlib-0.6.0
#/usr/local/bin/ruby extconf.rb
#make
#sudo make install
// 安装 rubygems
#wget http://rubyforge.iasi.roedu.net/files/rubygems/rubygems-0.9.0.tgz
#tar xzvf rubygems-0.9.0.tgz
#cd rubygems-0.9.0
#sudo /usr/local/bin/ruby setup.rb
#sudo gem install rubygems-update
#cd ..
可能出现的错误
ERROR: While executing gem … (SocketError)
getaddrinfo: Temporary failure in name resolution
// 安装 Ruby on Rails
#sudo gem install rails –include-dependencies
可能出现的错误 (ia64-linux)
ERROR: While executing gem … (Zlib::GzipFile::CRCError)
invalid compressed data — crc error

//安装 FastCGI
#wget http://download.huihoo.com/ruby/fcgi-2.4.0.tar.gz
#tar xzvf fcgi-2.4.0.tar.gz
#cd fcgi-2.4.0
#./configure –prefix=/usr/local
#make
#sudo make install
#cd ..
// 添加 Ruby-FastCGI 绑定
#wget http://download.huihoo.com/ruby/ruby-fcgi-0.8.6.tar.gz
#tar xzvf ruby-fcgi-0.8.6.tar.gz
#cd ruby-fcgi-0.8.6
#/usr/local/bin/ruby install.rb config –prefix=/usr/local
#/usr/local/bin/ruby install.rb setup
#sudo /usr/local/bin/ruby install.rb install
#cd ..

#sudo /usr/local/bin/gem install fcgi
—–利用
#wget http://sugi.nemui.org/pub/ruby/fcgi/ruby-fcgi-0.8.6.tar.gz
#tar xzvf ruby-fcgi-0.8.6.tar.gz
#cd /usr/ports/www/fcgi
#make install
#cd ruby-fcgi-0.8.6
#/usr/local/bin/ruby install.rb config — \ –with-fcgi-include=/usr/local/include \ –with-fcgi-lib=/usr/local/lib
#/usr/local/bin/ruby install.rb setup
#/usr/local/bin/ruby install.rb install
// 安装 PCRE
#wget http://download.huihoo.com/ruby/pcre-6.6.tar.gz
#tar xzvf pcre-6.6.tar.gz
#cd pcre-6.6
#./configure –prefix=/usr/local CFLAGS=-O1
#make
#sudo make install
#cd ..
// 安装 lighttpd
#wget http://download.huihoo.com/network/http/lighttpd/lighttpd-1.4.11.tar.gz
#tar xzvf lighttpd-1.4.11.tar.gz
#cd lighttpd-1.4.11
#./configure –prefix=/usr/local –with-pcre=/usr/local
#make
#sudo make install
#cd ..
// 安装 mysql
省略 MySQL 的安装
// 绑定 mysql
#sudo gem install mysql –with-mysql-dir=/usr/local/mysql
ERROR: Interrupted
ERROR: While executing gem … (SocketError)
getaddrinfo: Temporary failure in name resolution
Select which gem to install for your platform (i686-linux)
1. mysql 2.7.1 (mswin32)
2. mysql 2.7 (ruby)
3. mysql 2.6 (ruby)
4. mysql 2.5.1 (ruby)
5. Cancel installation
> 2 // 选择2
如果出现
ERROR: While executing gem … (RuntimeError)
ERROR: Failed to build gem native extension.
Gem files will remain installed in /usr/local/lib/ruby/gems/1.8/gems/mysql-2.7 for inspection.

Results logged to /usr/local/lib/ruby/gems/1.8/gems/mysql-2.7/gem_make.out
|——————————————|
|#sudo apt-get install libmysql-ruby |
|#sudo apt-get install libmysqlclient15-dev|
|——————————————|
#make install
#mkdir -p /usr/local/lib/ruby/gems/1.8/gems/mysql-2.7/lib
#/usr/bin/install -c -m 0755 mysql.so /usr/local/lib/ruby/gems/1.8/gems/mysql-2.7/lib
Successfully installed mysql-2.7
// 创建第一个Ruby on Rails应用
#sudo mkdir /usr/local/ruby
#sudo /usr/local/bin/rails usr/local/ruby/application
#cd usr/local/ruby/application
#sudo /usr/local/bin/ruby script/server
#cp usr/local/lib/ruby/gems/1.8/gems/rails-1.1.4/configs/lighttpd.conf to
#vi /usr/local/ruby/application/config
#vi /usr/local/ruby/application/lighttpd.conf
启动 ruby
#ruby script/server
=> Booting lighttpd (use ’script/server webrick’ to force WEBrick)
=> Rails application started on http://127.0.0.1:80
=> Call with -d to detach
=> Ctrl-C to shutdown server (see config/lighttpd.conf for options)
此时启动了 Lighttpd web server
http://localhost
OK 一切顺利,Ruby 的环境安装好了。

Illustrator图标作

教程作品。。
前后居然折腾了1hour!!啊
主要是教程里的AI是中文版,偶用的是英文版。
本来knife tools叫的好好的,中文版偏偏叫美工刀。。。。无语。。。。
颜色总是觉得有点异常。。难道是用了cmyk?
TvT做个图标真不容易。。。还是像素美啊。。。

Ruby读取天气预报

读取tq1**里深圳的天气预报,输出html
突然想玩玩erb模板就用多了几行代码。。
结果就不贴图了,就那么几个字,找到好看的天气图片再弄上去

#————————————————
#— You should install rubyful_soup gem first —-
#———————————@ceilwoo——-
require 'open-uri'
weather=open('http://weather.tq121.com.cn/mapanel/index1_new.php?city=%C9%EE%DB%DA')
require 'rubyful_soup'
soup = BeautifulSoup.new(weather.read,:parse_only_these=>'td')
today = “#{Time.now.day}日-#{Time.now.day.next}日”
wt = soup.find(nil,:attrs=>{'class'=>'weather'}).string
temperature = soup.find(nil,:attrs=>{'class'=>'weatheren'}).string
require 'erb'
html= ERB.new %q{

深圳:<%=a%>

<%=b%>

<%=c%>

}
a=today
b=wt
c=temperature
open('weather.html','w'){|File|File.puts(html.result(binding))}

其实这是一个关于爱与正义的blog