HTML+CSS

Website consists of three components: structure(HTML), representation(CSS), action(Javascript). XHTML is a strict version of HTML. The structure of webpage is previously done based on table, but currently via CSS.
Escape character in HTML source code: <:<, >:>,  :space
<p>:paragraph, <br>:break, <blockquote>:indented paragraph, <b>:bold, <i>:italic, <u>:underline, <s>:deleteline, <strong>:emphasize, <ul><li>:unordered list, <ol><li>:ordered list.
<a href="" target="_blank"></a>:hyperlink. <a href="mailto:ustcnewly@gmail.com"></a>. An area on the image can also be used to establish hyperlink based on <map> and <ared>.
Use <frameset> and <frame> to split webpage. Note <frameset> and <frame> belong to the the same level as <body>. <frameset cols="30%, 30%, *"><frame src=left.html>. <frame> is obsolete in HTML5.
<table border="1" cellpadding="4" cellspacing="6" ><tr><td></td><tr></tr></table>. Don’t miss any <tr> or <td>, otherwise the table will be messy. Use <colspan> or <rowspan> to merge cells. For professional table, we can use <caption>, <thead>, <tbody>, and <tfoot>. <table> is now rarely used for layout design.
Insert multimedia elements:
- image: <img src="a.jpg" height="200" width="200" alt="desc"/>
- flash: <embed src="a.swf" width="490" height="400" wmode="transparent" ></embed>
- bgmusic: <audio src="a.mp3" hidden="true" autoplay="true" loop="true"></audio>
- bgtile: <body background="a.png"></body>

Css: object, attribute, and value. Refer to official website for details.

h1{
    font-family:Calibri;
}

.myclass{
    font-family:Calibri;
}
&lt;p class="myclass">&lt;/p>

#myid{
    font-family:Calibri;
}
&lt;p id="myid">&lt;/p>
# one id name should be used only once in one html file.

Methods to use Css.
- a. Directly insert contents into <style></style>.
- b. <link href="mycss.css" type="text/css" rel="stylesheet">
- c. <style type="text/css">@import "mycss.css"</style>. One html file can import more than one Css files. A Css file can also import other Css files.
  
  The priority of a is higher than b/c. The more special, the higher priority. For the methods with equal priority, override principle is applied. The difference between b and c is that c loads all the Css codes while b only loads the corresponding Css code when necessary.
Some special usage of Css.
- class for specific tag: p.special{}
- union of multiple tags: h1,h2,p{}
- embeded tags: p span{} for descendents and p>span{} for child. complex embedding mixing tags, classes, and ids: td.out .inside strong{}. The easiest way to recognize this kind of embedding is “(tag)(.class) (tag)(#id)”
- consecutive tags: th+td+td+td{}, the style is applied to the third td.

Css formats for some commonly used tags.

body:

body{
    background-image:a.jpg;
    background-repeat:no-repeat;
    background-position:200px 100px;
	background-attachment:fixed;
	background-size: 20% 100%;
	cursor:pointer;
}

text:

p{	    
    float:left;
    font-family:Calibri;
    font-size:15px;
    font-style:italic;
    font-weight:bold;
    color:red;
    text-indent:2em;
    text-decoration:underline;
    text-transform:lowercase; #capitalize
    text-align:justify; 
    margin:5px 0px #top/down margin left/right margin
}

image:

img{
	float:left;
	border:1px #9999CC dashed;
	margin:5px; #margin-left/right/top/bottom
}

<div> box layout from inside to outside: content, padding, border, margin. Note width and height are for content instead of the whole box. margin can be assigned negative values. Assigning attribute values in clock-wise order. Missing values are equal to the values of opposite side. We should first understand the standard flow without the constraints of boxes.
- block-level (vertical arrangement): <ul>, <li>, <div>
- inline (horizontal arrangement): <strong>,<a>, <span>
  
  <div> and <span> are both blocks. <div> is vertial while <span> is horizontal. <span> can be used where no other proper tags can be used,s for instance, <span><img src="a.jpg"></span>.
  
  when using <div>, the margin between the top block and bottom block is max(top_block.bottom_margin,bottom_block.top_margin). when using <span>, the margin between the top block and bottom block is top_block.bottom_margin+bottom_block.top_margin.
floating box: Arrange the non-floating boxes first and then float the floating box to the left or right in the father content. The stuff in the non-floating boxes surrounds the floating box. For floating box: float:left. For non-floating box: clear:left.
box location: static(default), relative, absolute
- relative: position:relative; left:30px; top:30px. Relative shift from original position. Relative has no impact on father box and sibling box.
- absolute: position:absolute; top:0px; right:0px. Absolute coordinate in the nearest non-static ancestor. Other boxes treat this absolute box as non-existence.
<div style="display:inline"></div>, <span style="display:block"></span>, use display to modifiy the vertical or horizontal order. Set as none to make it invisible.

For hyperlink, a has pseudo classes:link, visited, hover, for example:

#navigation li a:link, #navigation li a:visited
{
	background-color:#1136c1;
	color:#FFFFFF;
}

Use div to split columns
- absolute method: left column uses absolute position (Note to change the position of father div to relative) and right column use left margin. The drawback is that bottom row will ignore the left column.
- float method: float left and float right. It is easy for fixed width or fixed ratio. For the mixed width such as 100%-30px, use the wrapper trick (negative margin).

JavaScript

<script>
var name ="newly"
document.write("my name is: "+name)
</script>

variable types

null: empty variable
string: parseFloat(string), parseInt(string), str.substring(0,3), str.slice(3,5), str.charAt(0), str.bold(), str.fontcolor("red"), str.length
number: Math.PI, Math.max, isNaN(value),
bool: true or false
Array: can be a mixture of numbers and strings, var a = new Array(10, 20, "newly")
1
2
3
4
for(n in actorAry)
{
document.write("<li>"+actorAry[n]);
}
myarr.toString(), myarr.join('-'), myarr.concat(tailarr), myarr.reverse(), myarr.sort(cmpfunc), slice, splice

stack&&queue operations: myarr.push("newstr"), myarr.pop(), myarr.shift()(dequeue), myarr.unshift()(pushfront)

Structure: There is no concept: class. Use function to construct an object. var mycard = Card("newly", 20), showCardInof.call(mycard,arg1,arg2) or mycard.showCardInfo(arg1,arg2), mycard=null

function showCardInfo(arg1,arg2)
{
    document.write(this.owner);
}
function Card(owner, rate)
{
    this.owner = owner;
    this.rate = rate;
    this.showCardInfo=function(arg1,arg2)
    {
        document.write(this.owner);
    }
}

type related: nameList instanceof Array, typeof("newly")

commonly used built-in functions or classes
- alert dialogue: alert("msg")
- input diaglogue: var age=prompt("Input your age", "0")
- confirm dialogue: confirm("Are you sure?")
- Date and time:
  1
  2
  3
  var cur = new Date();
  cur.setYear(2016);
  var seconds = cur.getSeconds();
- Error:
  1
  2
  var e = new Error();
  document.write(e.number&0xFFFF+e.description);

operate on the html elements

<img src="./images/web_fig.jpg" width=500px>

The whole HTML page is a DOM tree.

Visit the DOM elements

document.myform.elements[0].value  //myform is the form name
document.getElementById("myid").childNodes[0].nodeName/nodeValue/nodeType
document.getElementById("myid").childNodes[0].getAttribute("attr")/setAttribute("attr","attval")	
document.getElementsByTagName("tag")	
document.getElementsByName("name")

Since id is unique, we use single form element for Id, but plural form elements for Name and TagName.

Change the DOM elements

var docBody = document.getElementById("DocBody");
var imgObj = document.createElement("<img>");
var newTextNode = document.createElement("content");
imgObj.src = url;
docBody.appendChild(imgObj);

use Javascript to modify the CSS style, document.vlinkColor, document.linkColor, document.alinkColor, document.bgColor, document.fgColor, document.body.text, name1.vspace, name1.hspace.
event handling: we can set event triggering function for certain element or a class of elements.
- commonly used events (case insensitive): onblur, onchange, onclick, onfocus, onload, onmouseover, onmouseout, onmousedown, onmouseup, onselect, onsubmit, onunload. Form-related events: myform.onReset, myform.onSubmit, myform.action="mailto:ustcnewly@gmail.com"
- three approaches to trigger event function
  a) directly embed function scripts: onlick="javascript:alert("msg")" //javascript: can be eliminated
  b) call the event function: onkeyup = "OnKeyUp()"
  1
  2
  3
  4
  5
  6
  7
  8
  function OnKeyUp(_e)
  {
  var e = _e?_e:window.event;
  if (event.keyCode==13)
  {
  alert("Your input is "+Text1.value);
  }
  }
  c) set the event attribute for certain elements:
```
   <script for="document" event="oncontextmenu"> 
   window.event.returnValue = false;
   document.oncontextmenu = hideContextMenu2;
   </script>;
```
time control:to=window.setTimeout("func()",3000), clearTimeout(to), tm=setInterval("func()",1000), clearInterval(tm)
redirect href location or set anchor point:window.location.href="www.baidu.com", <a name="anchor1"></a>
history: history.back(), history.forward(), history.go(n), n>0 means go back n pages, otherwise go forward n pages.
cookie contains key-value pairs: document.cookie="user=newly;passwd=hehe;"