Ruby Shoes：用户界面优雅的轻量之选

Shoes简介

人们总是在不断在Ruby GUI领域进行尝试。现已知的方法包括：

• 将Ruby绑定到Qt或者GTK这样的用户界面库
• 使用基于JRuby的嵌入式DSL或者API创建Swing界面

Ruby Shoes实现GUI的方式则略显不同.Ruby Shoes出自Why’s (Poignant) Guide to Ruby的作者Why The Lucky Stiff之手,这 Shoes工具箱基于Cairo（绘图）以及Pango（文本）等GTK技术开发,GUI控件的数目受限于设计,而且现有的控件使用到了系统相关的GUI 组件.目前我们可以在MacOSX、Windows以及GTK图形环境下使用它.

Ruby Shoes用C语言实现,并通过Ruby扩展库同Ruby代码交互。在自述文件中,作者声称受到了HyberCard这样的工具包,Processing以及NodeBox这样的语言的启发.我们可以通过Ruby Shoes自带的样例代码,看出后面几种专门用于完成可视化（Visualization）任务的近代语言对它的影响.

目前shoes已经更新到第四版,更多有关Shoes的信息可以前往官网了解.

除此之外,最新的Shoes4也托管在github上.

示例代码

1
2
3
4
5
6
7
8
9

Shoes.app width: 300, height: 200 do
  background lime..blue
  stack do
    para "Welcome to the world of Shoes!"
    button "Click me" do alert "Nice click!" end
    image "http://shoesrb.com/img/shoes-icon.png",
          margin_top: 20, margin_left: 10
  end
end

界面效果如下:

JavaScript DOM对象学习笔记

节点属性

在文档对象(DOM)中,每个节点都是一个对象.DOM节点有三个重要属性:

(1) nodeName:节点名称,相当于tagName属性节点返回属性名,文本节点返回#text.

1.元素节点的nodeName与标签名相同
2.属性节点的nodeName是属性的名称
3.文本节点的nodeName永远是#text
4.文档节点的nodeName永远是#document

(注:nodeName,是只读的)

(2) noType:节点类型 => 返回值:

返回值为
1,元素节点;
2,属性节点;
3,文本节点;
8,注释;
9.文档;

(注:nodeType,也是只读的)

(3) nodeValue:节点的值,返回一个字符串,表示这个节点的值.元素节点返回null,属性节点返回属性值,文本节点返回文本.

1.元素节点的nodeValue是undefined或null
2.文本节点的nodeValue是文本自身
3.属性节点的nodeValue是属性的值

(nodeValue除了对元素节点不能写外,可读可写,但一般只用于设置文本节点的值)

元素内容

我们有两种方法替换元素的内容,一个是innerHTML,另一个是innerText

• innerHTML属性用于获取或替换元素的内容.
• innerText属性用于获取或替换元素的文本内容，只有文本内容，没有其它HTML标签.

使用语法

Object.innerHTML Object.innerText

(Object 是获取的元素对象,如通过document.getElementById(“ID”)获取的元素)

innerHTML 和 innerText 都是既可读又可写的,他们既可以直接输出值或赋值给变量.

eg:

1
2

alert(Object.innerHTML)或
var ostr = Object.innerHTML

元素样式

1.style的使用语法:

Object.style.property = new style;

(property为css样式属性,比如 color,width等等)

2.className属性可以设置或返回元素的class 属性

Object.className = classname;

(className为元素的class属性)

遍历节点树

父子节点

可以使用childNodes对象访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList.

elementNode.childNodes

有子节点,相应的,就有父亲节点. parentNode可获取指定节点的父节点

elementNode.parentNode

(注意:父节点只能有一个)

兄弟节点

在 DOM 树形结构中,除了父子关系属性外,还有同辈关系属性. 同辈关系中,也分为两种,一种是向前的同辈关系 previousSibling,另一种是向后的同辈关系nextSibling (注:两个属性获取的是节点,所以我们可以先判断节点nodeType是否为1,如不为元素节点,跳过)

创建节点

创建元素

document.createElement(tagName);

参数说明： tagName：字符串值,这个字符串用来指明创建元素的类型.

(注意:createElement()方法只是创建元素,并不会自动出现在文档中,如果想显示在浏览器中,还需要与appendChild() 或 insertBefore()方法联合使用)

创建文本节点

document.createTextNode(str);

str,为字符串值,可规定此节点文本.

添加与删除节点

nodeObject.appendChild(newnode);

nodeObject:父节点;newnode指定追加的节点.

nodeObject.removeChild(node);

参数意义同上.

(注:把删除的子节点赋值给rm,这个子节点不在 DOM 树中,但是还存在内存中,如果要完全删除对象,需给rm赋null值)

指定位置插入字节点

fnode.insertBefore(newnode,node);

参数说明:

newnode:必需,表示需要插入的新节点
node:可选,在其之前插入新节点的子节点,默认为末尾插入
返回值:插入的节点

子节点的替换

fnode.replaceChild(newnode,oldnode);

参数说明:

newnode:用于替换的新节点
oldnode:被newnode替换的节点
返回值:被替换的节点

JavaScript学习笔记2

一.流程控制

一般选择-if 结构

1
2
3
4
5
6
7

if(表达式1){
执行1
} else if(表达式2) {
执行2
} else {
执行3
}

多重选择-switch 结构

1
2
3
4
5
6
7
8
9
10
11
12
13

switch(表达式){
case 条件1:
  执行1
  break;
case 条件2:
  执行2
  break;
case 条件n:
  执行n
  break;
default:
  ...;
}

(注:switch所依赖的参数必须赋初始值,值与每个case值匹配,满足执行改case后的所以语句,并用break语句来阻止运行下一个case.)

循环语句-for

1
2
3
4

for(初始化变量;循环条件;循环迭代)
{
  循环语句;
}

循环语句-while

1
2
3
4

while(判断条件)
{
  循环语句;
}

(break语句可用在循环语句中,跳出循环. 与其类似的有continue语句,用于跳过本次循环,而整个循环体继续执行.)

二.函数(function)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function fun(){
//函数体
}
fun();//调用函数

//带参函数
function fun2(arg1,arg2){
//函数体
}

//带参数及返回值的函数
function add(a,b){
  return a+b;
}

函数的this

函数体中的this表示当前的方法属于谁.

eg:

1
2
3
4
5

function add(a,b)
{
    return this+(a+b);
}
console.log(add(3,6));

输出结果:

[object global]9

函数的call

函数的call方法可以改变函数的this的指向.

eg:

1
2
3
4
5

function add(a,b)
{
    return this+(a+b);
}
console.log(add.call(2,3,6));

输出结果:

11

(输出结果表明:this也是一个数字,所以叫号作为运算符而非连接符处理.)

函数的apply

函数的apply方法也可以改变函数的this的指向,但不同的是,apply是将原参数作为一个数组进行传递.

eg:

1
2

ar arr = [5, 6, 3, 2, 9, 44, 6, 3, 61, 22];
console.log(Math.min.apply(null,arr));

输出结果:

2

JavaScript学习笔记1

一.第一个程序:Hello World的输出

• 控制台下的输出:

  console.log(‘Hello World!’);

• 消息框模式输出:

  alert(‘Hello World!’);

二.变量

• 必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字.

1
2
3
4
5
6

myvar;
_myvar;
$myvar; //以上均为正确的变量名
1myvar; //错误,不能用数字开头
%myvar; //开头不能用(_,$)以外的特殊字符
var; //错误,不能使用保留字和关键字

变量的声明

var 变量名;

eg: var mynum = 1;

同时声明多个变量时使用",“分割即可.

eg: var myvar,myvar2,myvar3;

(注:在JavaScript中,未赋值的变量,会自动被使用"undefined"值来初始化)

三.数据类型

JavaScript中有5种基本数据类型,分别是: 1. 字符串 2. 数字 3. 布尔值 4. 数组 5. 对象

1
2
3
4
5
6
7
8

var mychar1 = "双引号包起来的字符串"; // 这是字符串
var mychar2 = '单引号包起来的字符串'; // 这也是字符串
var mynum1 = 6; // 这是数字6
var mynum3 = 123e5; // 这是使用科学（指数）计数法来书写的12300000
var mynum4 = 123e-5; // 这是0.00123
var mybool = true; // 这是布尔值
var myarr = [1, 2, 3]; // 这是数组
var myobject = {"p": "Hello"}; // 这是对象

四.表达式及运算符

与Ruby和Python类似. (注:完整语句后面记得加上";“)

五.数组

数组变量的声明:

var arr = [‘a’,‘b’,‘c’];

(注:任意一种类型的数据,都可以放进数组里,且数组支持嵌套) eg:

1
2
3
4

var arr = [{a:1}, [1, 2, 3], function(){ return true; }];
arr[0]; //对象
arr[1]; //数组
arr[2]; //函数

• length属性:返回数组成员的数量

eg:

1
2

var arr = ['a', 'b'];
arr.length;    // => 2

(注:length 属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员会自动减少到 length 设置的长度.即,随意改写length值会造成数据丢失问题.) eg:

1
2
3
4
5
6
7

var arr = ['a', 'b', 'c'];
arr.length;    // => 3

arr.length = 2;
arr;    // => ["a", "b"]

arr.length = 0;//快速清空数组

增加新元素

1
2
3
4

var myarr = [1,2,3];
myarr[3] = 4;
console.log(myarr); // =>[1,2,3,4]
//此处特性与Ruby数组相似.

六.对象

JavaScript的对象，是指带有属性和方法的数据类型，一般由若干个“键值对”（key-value）构成

• 键名 键名加不加引号都可以，前面的代码也可以写成这样：

  var o = { “p”: “Hello” };

(注:键名如果不符合标识名的条件，也不是正整数，则必须加上引号)

生成方法

1
2
3

var obj1 = {};
var obj2 = new Object();
var obj3 = Object.create(null);

对象引用

如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量的属性，会影响到其他所有变量(此处与C类似)

内置对象

JavaScript常见的内置对象(built-in object)有: String, Number, Boolean,Date Object

有关更多JavaScript内置对象相关属性及方法可以参考JavaScript|MDN