yellow tutorial

Yellow és un motor per fer webs amb pàgines enllaçades per botons "endavant" i "enrere".

Una web és un programa en javascript que defineix la construcció i l'ordre de les pàgines.

El llenguatge dels programes és ECMAScript (ECMA-262 3a edició) més DOM level 3 Core per representar documents.

construcció de documents

Per exemple:
			function setTitle(d, name){
				var e=d.getElementsByTagName("title").item(0)
				e.setTextContent(name)
				e=d.getElementsByTagName("h1").item(0)
				e.setTextContent(name)
			}
	
			var d=new Document()
			setTitle(d, "laia")
			d.show()
	
			setTitle(d, "gaby")
			d.show()
	
			setTitle(d, "mae")
			d.show()
	
			setTitle(d, "aldo")
			d.show()
		
El nou document comença així:
			<!DOCTYPE html>
			<html>
				<head>
					<meta http-equiv='Content-type' content='text/html; charset=UTF-8'/>
					<title>Title</title>
				</head>
				<body>
					<h1>Title</h1>
					<button id='back'><</button>
					<button id='next'>></button>
				</body>
			</html>	
		

Amb la línia

d.show()
para l'execució i envia el document al navegador. L'usuari pot clicar el botó "<" per reprendre l'execució del programa fins al proper document. L'usuari pot clicar el botó ">" per tornar al document anterior.

documents de plantilles

llegir una plantilla

Podem fer un nou document des d'una plantilla:
			var name="Alex"
			var d=new Document("template.html")
			d.show()
		
La plantilla ha de ser a la mateixa carpeta com el programa. Ha de ser HTML vàlid. En els elements o en els valors dels atributs podem posar expressions de javascript. Per exemple, template.html pot incloure name.
			<!DOCTYPE html>
			<html>
				<head>
					<meta http-equiv='Content-type' content='text/html; charset=UTF-8'/>
					<title>${name}</title>
				</head>
				<body>
					<h1>${name}
					<button id='back'><</button>
					<button id='next'>></button>
				</body>
			</html>	
		

data-if

Podem condicionar la inclusió d'un element per l'atribute data-if. El valor és una expressió javascript. Si és true, l'element serà inclós, sense l'atribut. Altrement, l'element no serà inclós. Per exemple, en el programa
			var d=new Document("page.html")
			var name="laia"
			d.show()
	
			name="gaby"
			d.show()
	
			name="mae"
			d.show()
	
			name="aldo"
			d.show()
		
amb la plantilla page.html
			<!DOCTYPE html>
			<html>
				<head>
					<meta http-equiv='Content-type' content='text/html; charset=UTF-8'/>
					<title>${name}</title>
				</head>
				<body>
					<h1>${name}</h1>
					<img src="http://${name}.haurie.cat" width="300px"/>
			
					<a href="https://www.google.cat/search?q=${name}+haurie">${name} on Google</a>
			
					<button data-if="name!='laia'" id='back'><</button>
					<button data-if="name!='aldo'" id='next'>></button>
				</body>
			</html>
	    
Aquí el botó d'"enrere" no apareix al primer document i el botó d'"endavant" no apareix a l'últim document.

data-for-

Podem repetir un element per l'atribute data-for-. El valor és una expressió javascript que ha de donar un array. L'element serà inclós una vegada per cada element de l'array, que serà assignat a una variable que té com a nom la última part de l'atribut. Per exemple, en el programa
			var x="Alex"
			var xs=[0,1,2,3,4,5,6,7,8,9]
			var d=new Document('t14.html');
			d.show()
		
amb la plantilla t14.html
			<html>
				<head>
					<title>${x}</title>
				</head>
				<body>
					<ul>
						<li data-for-x='xs' data-if="x % 2 == 0" id='i${x}'>Item ${x}</li>
						<li>${x}</li>
					</ul>
				</body>
			</html>
	    
Aquí, primer l'evaluació del data-for-x='xs' Repetim l'element per cada element de l'array xs, assignat a la variable x. Llavors s'evalua data-if en cada element repetit. Al final ${x} tornarà al seu valor original.

data-var-

Podem posar una variable local per l'evaluació d'un sol element. Per exemple,
			<span data-var-x="nom + ' ' + cognom">
				${x}
			</span>
		
donarà, si en javascript tenim variables nom i cognom amb valors "Alex" i "Bunkenburg",
			<span>
				Alex Bunkenburg
			</span>
		
Després x tindrà el mateix valor que tenia abans.

data-substitute

Podem incloure una plantilla dins d'una altra. Per exemple, si al peu d'un document tenim
			<div data-substitute="peu.html">
				No apareix.
			</div>
		
llavors el motor busca el fitxer peu.html en el mateix directori on és el programa, i substitueix l'element amb el contingut del fitxer. Els atributs data- o $-expressions a dins del fitxer seran resolts com si haguession aparagut a dins del document incloent. Hi ha redundància: quin element porta aquest atribut (a l'exemple és un <div>) i el seu contingut és irrellevant, perquè desapareix.

input

A rendered document can contain HTML input elements that display the values of javascript variables and by which the user can assign values to these variables.

boolean input

For a boolean, use a checkbox. Its name-attribute is a javascript variable or left-hand-side expression, that is, an assignable expression like an object property or an array element. It must be the only input element with that name on the document. It must not have a value attribute.
						<input type="checkbox" name="flag"/>
						<input type="checkbox" name="person.accepted"/>
						<input type="checkbox" name="accepted[12]"/>
					
It will be rendered checked or unchecked depending on the value of the name-variable. If there is no such variable, the variable will be created and initialised with true if the html has a checked-attribute, with false if it does not. When the user checks or unchecks the checkbox, the javascript variable will be set to true or false.

text input

For a string, use an input of type text. Its name-attribute is a javascript variable or left-hand-side expression.
						<input type="text" name="surname" value="Smith"/>
						<input type="text" name="person.surname" value="Smith"/>
						<input type="text" name="names[2]" value="Smith"/>
					
It will be rendered with the value of the javascript variable. If there is no such variable, it will be initialised with the value attribute of the input element, or "" if there is none. When the user edits the text in the input, the javascript variable will the set to the new value as soon as the focus leaves the input element.

password input

input works the same as text input, except that the string is rendered by blobs.
						<input type="password" name="pw" />
					

textarea

works the same as text input, except that the string is rendered as the text content of the element.
						<textarea name="description"></textarea>
					

select

						<select name="choice">
							<option value="A">The A choice</option>
							<option value="B">The B choice</option>
							<option value="C">The C choice</option>
						</select>
					
The name-attribute has to be a left-hand-side expression in the javascript program, for example just a variable. When the select element is rendered, the LHS-expression determines which option should be rendered as selected. When the user selects a different option, the LHS-expression is assigned the value of that option.