Viva le Blog!

Thursday 10 December 2015

Cisco: Kak bagaimana sih cara supaya user 'dalem' bisa internetan?

Gampang. Pertama, kita pasti menggunakan ip nat inside. Trus kedua, kita harus tahu address/alamat IP publik kita, kalau gak tahu, bisa menggunakan interface,

Contoh:
Config# ip nat inside source list 101

Kak bagaimana sih cara supaya nilai select bisa diambil?

Pertama, define select-option nya dan id bagi select-nya.
<select id="myselect"> <option value="BMW">BMW</option> <option value="Toyota">Toyota</option> </select>

Kemudian, define script javascriptnya, dan deklarasi/define variabel penampungnya.Di bawah ini:
<script> var mycar; mycar = document.getElementById("myselect").value
</script>

Kak bagaimana sih cara mena

Cara yang gua tau sih harus ditampung dulu ke suatu variabel, baru kemudian di terapkan ke suatu paragraph.

Kayak gini:
var text=""; for (i=0; i <= hh ; i ++) { text = text + "<p>Hello</p>" ; alert(text); } document.getElementById("myparagraph").innerHTML = text;

Wednesday 9 December 2015

1. Change a text to strong
Answer: <strong>Text goes here </strong>

2. Put basic 3 lines into blank html
Answer:
<!DOCTYPE html>
<head>
This my text like.
</head>

3. Between the <head> tags, add in an opening <title> tag and closing </title> tag and Between the <title> tags, write in a title for your page. For example, "My Webpage."
Answer:

<!DOCTYPE html>
<head>
<title>This my title</title>
</head>

4. Underneath the closing </head> tag, put an opening <body> tag and a closing </body> tag, like in the example above.
Answer:
<!DOCTYPE html>
<head>
<title>This my title</title>
</head>
<body>
</body>

5. Inside the body, create two paragraphs. Each paragraph starts with an opening <p> tag and ends with a closing </p> tag. We can write content in between the tags.
Answer:
<!DOCTYPE html>
<head>
<title>This my title</title>
</head>
<body>
<p>Hello World!</p>
</body>

6. In the body section, create a heading. To do this, create an <h1> tag. Close the element with a closing tag </h1>. (Your content should now be between <h1> and </h1>.)
Answer:

7. Underneath the heading tags, create two paragraphs using <p> tags with whatever content you like.

HTML & CSS: Hey whats the difference between width using % and using pixel?

Hey whats the difference between width using % and using pixel?
Answer:

HTML & CSS: There are 2 types making link/Navigation

1. Using list
<ul>
<li><a href="http://www.facebook.com">News</a></li>
<li><a href="http://www.google.com">Sport</a></li>
</ul>

2. or not using list a.k.a directly
<a href="http://www.facebook.com">News</a>
<a href="http://www.google.com">Sport</a>

This one can be easily modified.

Three things you need to do with link

1. Text-decoration
2. When visited
3. When not-visited
4. When expired
5.

Great Personality

Great personality is not like Samson. Samson is defeated by Delilah.

Tuesday 8 December 2015

Algorithm to web design

1. Adding Divs

Switchable steps:
2. Adding border
div {
border: 1px solid hotpink;
}
3. Adding background color
4. Adding paragraph example
5. Adding width
6. Adding height
7. Adding float
8. Adding clear
9. Adding position
10. Adding margin to div except div footer

/* Remember that you already have 4 div: header div, left, right and footer. */
/* CSS code begin here */
/* Hey, please global first */
div {
border-radius: 1px;
background-color: hotpink;
}
/* <selector> { <style-style-style> } */
/* id is kress(#). Class is dot(.) */
#header {
border: 1px solid green;
height:10%;
position: relative;
}
.left {
border: 1px solid blue;
position: relative;
width: 10%;
height: 80%;
float:left;
margin-top:10px;
margin-bottom:10px;
}
.right {
border: 1px solid yellow;
position:relative;
width:89%;
height:80%;
float:right;
margin-top:10px;
margin-bottom:10px;
}
#footer {
border: 1px solid red;
position:relative;
width:100%;
height:10%;
clear:both;
}

<head>
<link type="text/css" href="mystylesheet.css" rel="stylesheet" />
</head>
<body>

<div id="header"><p>This is header</p></div>
<div class="left"><p>This is left</p></div>
<div class="right">This is right</div>
<div id="footer">This is footer</div>
</body>

11. Adding content to each div. I mean replace the point (4) result.

Dealing with link
12. Adding list using external javascript
Method/Type 1:


document.getElementById("links").innerHTML = "<ul id='menu'>" +
"<li><a href='http://www.google.com'>News</a></li>"+
"<li><a href='http://www.yahoo.com'>Sports</a></li>"+
"</ul>";

Type 2:

13.
14. Manipulate the link styles point (12)
- text-decoration
- when not visited
- when visited
- when hover
14.

CSS positioning: Static, Absolute, Relative and Fixed

Static If you don't specify an element's positioning type, it defaults to static. This just means "where the element would normally go." If you don't tell an element how to position itself, it just plunks itself down in the document.

Absolute If the parent not go static, then the absolute position div is according to left.
The first type of positioning is absolute positioning. When an element is set to position: absolute, it's then positioned in relation to the first parent element it has that doesn't have position: static. If there's no such element, the element with position: absolute gets positioned relative to <html>.

To show you how this works, we've set the #outer div to have absolute positioning. This means that when you position the #inner div, it will be relative to #outer. (If #outer had the default positioning of static, then #inner would get positioned relative to the entire HTML document.)

Relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default static positioning.

Finally, fixed positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.

Static positioning tergantung normally flow.
Absolute positioning tergantung parent.
Relative tergantung static positioning.
Fixed positioning tergantung posisi awal, scroll ke bawah tetap sama.

Seneng banget kalau menuruti perintah kita.

Monday 7 December 2015

1. Selectors
2. Classes/IDs
3. Margins
4. Paddings
5. Border
6. Position

1. Create 4 divs. One for the header, one for the left column, one for the right column, and one for the footer. So, create 4 divs:
Answer:
<body>
<div id="header"></div>
     <div class="left"></div>
     <div class="right"></div>
     <div id="footer"></div>
</div>
</body>

2. Create border-radius each of div
Answer:
div {
border-radius: 5px;
}

3. Give your divs a height, weight and background-color. Add dimension and color to our divs.
header
{
weight: ;
height: ;

}

Saturday 5 December 2015

By default

Margin-top is:
Margin-bottom is:
Padding-top is:
Padding-bottom is:
width:
height:

Natrium can live harmony with Clorine.

Targetting
Styling
Positioning

Hard to remember Word and Number?

Word?
Try this for instances Nemesis
Backward it: sisemeN

Try this for instances Nefarious
Backward it: souirafeN

Number?
Two digit number:
29
Try to convert it to word, for i.e: 29 is RG or ZG

Three digit number:
781
Try to covert it to word, for i.e: 781 is TBI

Friday 4 December 2015

Linux/Unix Command Line

Go/navigate filesystem

1. Print all working directory
$ pwd
/home/ccuser/workspace

2. Lists all files & folder in the current working directory

$ ls

2014 2015 hardware.txt

By default ls list all files & folder in the current working directory alphabetically.

3. Switches into any directory that you specify, in this case directory "2015".

$ cd 2015

4. Move up one directory from current working dir

$ cd ..

5. Create one directory, in the current working dir, in this case directory "media"

$ mkdir media

6. Create "empty" file in current working directory

$ touch keyboard.txt

Copy, moves and delete files

1. Listing files that hidden

$ ls -a

2. Listing files & folder in tables / long format.

$ ls -l

3. Listing files $ folders in time manner

$ ls -t

4. Copying a file or files

$ cp * superman/

$ cp superman

5. Delete a file

$ rm waterboy.txt

delete a folder (recursive)

$ rm -r slapstick

Redirection

Redirect an input

Redirect an output

$ echo "Hello"

Redirect an output to text file (>)
$ echo "Hello" > hello.txt
and then:
$ cat hello.txt

example(2):
$ cat oceans.txt > continents.txt
Warning: > will overwrite all original content inside continents.txt

example(3) append:
$ cat glaciers.txt >> rivers.txt
>> will take the standard output of the command on the left and appends (adds) it to the file on the right.

Here, the the output data of rivers.txt will contain the original contents of rivers.txt with the content of glaciers.txt appended to it.

example(4)
$

Codecademy.CSS.Session2

1. Make the <h3> color #cc6666 and the <h2> color #8a2be2
Answer:
h3 {
color: #cc6666;
}
h2{
color: #8a2be2;
}
2. Use emphasize (em) or font-size
3. Set the font-family of the <h1> header to serif, <h2> to sans-serif, <h3> to cursive.
Answer:
h1 {
font-family: Serif;
}
h2 {
font-family: Sans-serif;
}
h3 {
font-family: Cursive;
}
4. Set backup value of h1 times as an option before serif, set backup value of h2 verdana as an option before sans-serif,
h1 {
font-family: Times, Serif;
}
h2 {
font-family: Verdana, Sans-serif;
}

5. Set div's background-color to #cc0000
Set height's to 100px
Set width to 100px
Answer:
div {
background-color: #cc0000;
height: 100px;
width: 100px;
}
6. Table: set tds's height to 50px. Give your tds a border of 1 px dashed blue. Give your table a border of 1px solid black.
Answer:
td {
height: 50px;
border: 1px dashed blue;
}
table {
border: 1px solid black;
}
7. Give your a selector a color of #cc0000 and a text-decoration of none.
Answer:
a {
color: #cc0000;
text-decoration: none;
}
8. Add a pair of <h1></h1> tags inside the body of our HTML page. Your h1 header can say anything you want!
Then, on the CSS tab, make its font-family to Verdana and its color to #576D94.
Add a pair of <p></p> tags below your h1 header and set the font-size to 18px and its color to #4a4943
Answer:
h1 {

font-family:Verdana;

color:#576D94;
}
p {

font-size: 18px;

color: #4a4943;
}

9. Set the p font-family to Garamond and set a backup font of Serif. Give h1 a backup font of sans-serif.
Answer:
p {
font-family: Garamond,Serif;
}
h1 {
font-family: Verdana, Sans-serif;
}

10. Add an image and set its width and height to 300px and 100px and give your image of 1px solid #4682b4
Answer:
In index.html
<img src="http://bit.ly/NnVbxt">
In stylesheet.css
img
{
width: 300px;
height: 100px;
border: 1px solid #4682b4;
}
11. Add a link using <a href="url">Link text</a> into your HTML page and set link's text-decoration to none and its color
to #cc0000.
<a href="http://www.codecademy.com"></a>
Add this in the stylesheet.css
a {
text-decoration:none;
color:#cc0000;
}

Codecademy.CSS.Session1

1. make the text inside <span></span> tags blue.
answer:
span { color: blue; }
2. Tell the span selector that you want the font-family to be cursive.
answer:
span{ font-family: cursive; }
3. Insert a <link> to stylesheet.css in index.html between/inside your <head></head> tags.
answer:
<link type="text/css" rel="stylesheet" href="stylesheet.css">
4. Most tags are not self-closing
5. Make the font color of the p selector green.
answer:
p {
color: green;
}
6. One selctor many properties
Underneath your color:green property-value pair (but befor the final }!), set the font-family to Garamond and the font-size to 24px.
Answer:
p{
color: green;
font-family: Garamond;
font-size: 24px;
7. Make all the h3 headings red.
Set all the paragraphs to the Courier font-family.
The second paragraph text between
<span></span>tags. Set teh background-color of that <span> to 'yellow'
Answer:
h3 {
color: red
}
p {
font-family: Courier;
/* Remember to capitalize first character of your color */
}
span
{
background-color:yellow;
}
8. Put semicolon!
9. Commented out p selector
Answer:
/*
p {
color:red;
}
*/

Wednesday 2 December 2015

Semua orang mempunyai otak, tapi tidak semua orang mampu menggunakannya.

Semua tag-HTML bisa menggunakan semua style CSS. Tapi lebih spesifik, biasanya tag:
1. <a> selalu dipakaikan style:
text-decoration
2. Footer selalu dipakaikan copyright

Tuesday 1 December 2015

CSS: CSS Border

Algoritmanya:
1. Menentukan style/gaya bordernya
2. Menentukan besar
3. Menentukan warna

CSS: CSS selector

Untuk CSS selector terdiri dari:
1. CSS selector jenis element
2. CSS selector jenis id
3. CSS selector jenis class

So you want to make an Operating System ?

First thing we need to do is creating Disk Operating System. The most common.
So, how?

So what are the components?
1. Hardware
2. Application program
3. User
4. Operating system

What are the operating sytem in this world?
1. UNIX
2. MS-DOS

So, what are hardware in this world?
A lot-lot

How to run a DOS?
You can use VMWare Player to run it.

Jadi apa saja yang dilakukan oleh DOS?
1. Nomor interupt hardware
2.

Jika dulu elemen adalah air, api, tanah dan udara.
Sekarang elemen adalah cahaya, suara dan cuaca/temperatur. Siapa yang bisa mengontrol ini yang menang.

Apa itu cahaya? (defenition)
Cahaya adalah gelombang elektromagnetik.

Apa yang bisa kita lakukan pada cahaya? (method)
Dibengkokkan, dibelokkan(reflect), dihentikan?, dikurangi (reduce?),

Apa saja properti cahaya? (properti)
Sudut cahaya

Javascript

Javascript is a computer code that can do these thing to your webpage:
1

1. HTML
- add an home page
- add an about page
2. CSS
- add site.css
- edit index.html add script link href & add div id main in the body
- edit about.html add link href to site.css

3. Javascript
- add script.js --> script hanya menampilkan tanggal
- edit homepage: add footer, include script.js (script that you just created)

4. Edit stylesheet
- add table, etc
- add customer.html: add data table dan footer.

5. Adding Navigation
- edit script.js --> add something on behalf of something.
- stylesheet
- edit index.html --> add <nav id="nav01">
- edit about.html ---> add <nav id="nav01"> below body tag
- edit customers.html --> add <nav id="nav01"> below body tag

6. Fetching data
1. AppML
2. JSON

CSS

Fundamental of CSS are:
# targetting id

CSS are code that can modify these upon your html tag:
1. background-color (keyword: background-color)
2. text-color (keyword: color)
3. padding
4.
5.

CSS box model
Keyword: text, padding, border, and margin (Te,Pad,Bor,Mar)

Monday 30 November 2015

Javascript: Outputting text

I want to output a text into/inside a local paragraf instead of using canvas. How can I do that?

There are 5 steps you need to do:
1. First thing you need to define the paragraph where you want to the text to showed up. Like this:
<p></p>

2. Second thing, you need to insert a span tag into that paragraph tag. Like this below:
<p><span></span></p>

3. Third, you need to give an id to that span tag; just the opening tag, not the closing tag. Like this below:
<p><span id="here"></span></p>

4. Last you need to define below inside your script tag:
<script>
document.getElemenytById("here").innerHTML="<your text>"

</script>

5. Last, finish, run the code.

Warning: Remember to use .innerHTML not .value.

For complete code:

<body>
<p><span id="here"></span></p>

<script>
document.getElementById("here").innerHTML = "<your text>"
</script>
</body>

Javascript: Converting hexadecimal to decimal

I want to convert hexadecimal value (for i.e. "0xff") to a decimal value, how can I do this?

1. Put your hexadecimal-value into a string and then into a variable, like this below:
var a = "0xff" //don't forget the double-quotes

2. then use a function like this:

I usually dealing hexadecimal value with color.

Test

Javascript: Operating on a string

What can we do upon a string?
1. Looking its length
2. Searching index of a string from it
3. Extracting a string from it
4. Inserting a string into it.

Looking for how long / length

a.length

Searching for index
indexOf()
lastIndexOf()

Powerful search using RegEx.

Extracting parts
slice(firstindex, lastindex)

You want to convert a string that contain hex value to a decimal?

You want to convert a string that contains hex value to a decimal? How can you do that?

For example:
var x="#fffffa"
You can't convert this type of string into decimal-number. Reason: because there is a pound (#) sign inside that string. Solution: remove the pound sign first.

This case is retrieving value from <input type="color">

JavaScript Data Types

In JavaScript there are 5 different data types that can contain values:

string
number
boolean
object
function

There are 3 types of objects:

Object
Date
Array

And 2 data types that cannot contain values:

null
undefined

Bagaimana cara menggunakan google spreadsheet sbg database kamu

It looks like you must build your own API tools.

What is API?
An API is a set of methods and tools that can be used for building software applications.

So how?
Learn to use Youtube API, learn to use googlespreadsheet API, twitter API, learn to use google map API.

Where?
www.codecademy.com
or

For i.e.:
1. Create an object; learn object oriented programming
2.

Sunday 29 November 2015

WLAN Security: WEP mode

WEP 64-bits :		For each key, please enter either (1) 5 characters excluding symbols, or (2) 10 characters ranging from 0~9, a, b, c, d, e, f.
		WEP 128-bits :		For each key, please enter either (1) 13 characters excluding symbols, or (2) 26 characters ranging from 0~9, a, b, c, d, e, f.

Friday 27 November 2015

Jadi, apa saja yg diberikan ISP kepada kamu? Selain bandwidth link?

What ISP should offer you:
4 Mbps down / 1 Mbps up
10 email accounts
1 GB Web Server Space

Time to load = bandwidth x size of website
For i.e.:
To load a 2MB website = 4 MB/s

What ISP should offer you:
4 Mbps down / 1 Mbps up
10 email accounts
1 GB Web Server Space

Thursday 26 November 2015

1. define canvas tag
2. define width
3. define height
4. define id
5. define style: style="border:1px solid blue;"

1. define button
2. define onclick
3. define value = Load

1. define script
2. define function: showpictures()
3. define canvas
4. define ctx
5. define img

Template to experiment with string

<input type="text" id="text1" value="I learn new thing now">

<script>
var mydata=document.getElementById("text1").value

alert(typeof(mydata))
mydata.

</script>

Punctuation

" " = seperate word.
"." = end a sentences.
", " = seperate 2 sentences.
"! " = put it in the end of sentence of instruction or order.
"? " = put it in the end of sentence of question.
"-" = connecting 2 words.
"--" =

Example:
Open the door! not Open the door?

Name
" " = "space"
"." = "dot"
"," = "comma"
"!" = "exclamation mark"
"?" = "question mark"
"-" = "hypen"
"--" = "double hypen"

Font

Here is the list that I compile myself

Tipe font: Tahoma

Width:

Alfabet:
A = 7 pixels
a = 6 pixels
B = 7 pixels

b = 6 pixels

Reading sign (punctuation):

" " = 3 pixels

, = 3 pixels

. = 3 pixels

- = 3 pixels

-- = 6 pixels
? = 6 pixels
! = 3 pixels

Numba:
1 = 6 pixels
2 = 6 pixels
21 = 12 pixels
Conclusion:
The width are vary. Dataset: {3, 6, 7}.

For depth about punctuation: http://perjuangan9.blogspot.co.id/2015/11/punctuation.html

Divide into:
1. Body
2. Head

Addtional:
1. Tell me what have you done after reading the vacancy?

Write one paragraph after one paragraph.

Dear Ms. Jobhunt,

I am writing to express my interest in the Retail Management Trainee position you listed recently on the MOC Job Network. I have reviewed Enterprise Rent-a-Car's web page and am very impressed with your company's commitment to excellent customer service and your employee development trainning program. I will be graduating from Mount Olive College in August and am actively seeking a retail management position.

As you will note in the enclosed resume. I have had meaningful practical experience in both retail sales and customer service.

Wednesday 25 November 2015

1. Register site: www.tokoris.com
2. Create adcode unit and paste code to your site's (1) widget.
3. Restart your modem
4. Clear your browser's cookies
5. Receive email permit or not permit

Application Letter Project

Update 25/11/2015:
<canvas width="800" height="600" id="canvas1"

style="border:1px solid blue";>
</canvas>

<form style="border:1px">
1. Address/location of submitter:<input type="text"

id="location_submitter" value="Wreck"><br />
2. Name of submitter: <input type="text"

id="name_submitter"><br />
3. Name of company: <input type="text"

id="name_company"><br />
4. Field of job that you will submit to submitter:

<input type="text" id="field_job"><br />
5. Date of graduation: <input type="text"

id="date_graduation"><br />
6. Your relevant experiences: <input type="text"

id="relevant_experiences"><br />
7. Your cerfication : <input type="text"

id="relevant_certification"><br />
8. Your contact number: <input type="text"

id="contact_number"><br />
9. Date you want to assign the application letter:

<input type="text" id="date_assign">
<input type="button" value="Load" onclick="writecan

()">
</form>

<script>
var canvas=document.getElementById("canvas1");
var ctx=canvas.getContext("2d");
var loc_submitter;
var name_submitter;
var name_company;
var field_job;
var date_graduation;
var

function ambildata()
{
loc_submitter = document.getElementById

("location_submitter").value;

name_submitter = document.getElementById

("name_submitter").value;

name_company = document.getElementById

("name_company").value;

field_job = document.getElementById

("field_job").value;

date_graduation = document.getElementById

("date_graduation").value;

relevant_experiences = document.getElementById

("relevant_experiences").value;

relevant_certification=document.getElementById

("relevant_certification").value;

contact_number = document.getElementById

("contact_number").value;

date_assign = document.getElementById

("date_assign").value;

}

function writecan()
{
ambildata();

alert("location: " + typeof(loc_submitter));
ctx.fillText("To: " + name_submitter ,10, 50);
ctx.fillText("To: " + name_submitter ,10, 50);
}

</script>

Idiom

Idiom ada beberapa macam/kategori misalnya:
1. Idiom tentang Cinta
1.1 Bagai pungguk merindukan bulan
1.2 Cintaku bertepuk sebelah tangan
1.3 Kasih tak sampai
1.4 Nelangsa
1.5 Bagai Hujan tanpa awan

<canvas width="800" height="600" id="canvas1"

style="border:1px solid blue";

onmouseenter=drawtext() >

</canvas>
<input type="button" onclick="showpictures()"

value="Load">

<script>
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
function showpictures()
{

var img = new Image();
img.src = "Cisco";
ctx.drawImage(img, 10, 10);
}

function drawtext()
{
ctx.fillText("Hello World",10,50);
}

</script>

Blogger can only inline

Blogger can only inline
Inline javascript
Inline stylesheet

3 IFRAME by Totardo
Iframe 1:	Iframe 2:	Iframe 3:
Link for Iframe 1:	Link for Iframe 2:	Link for Iframe 3:
Copyright Totardo
History:

<body style="background-color:blue">

<table border="1px" align="center" style="background-color:yellow">
<tr style="background-color:red">
<td colspan="3" style="text-align:center"><h1>3 IFRAME by Totardo</h1></td>
</tr>
<tr>
<td><h2>Iframe 1:</h2><iframe id="iframe1"></iframe></td>
<td><h2>Iframe 2:</h2><iframe id="iframe2"></iframe></td>
<td><h2>Iframe 3:</h2><iframe id="iframe3"></iframe></td>
</tr>
<tr>
<td>Link for Iframe 1: <input type="text" id="text1"><input type="button" Value="Load" onclick="loadbutton1()"></td>
<td>Link for Iframe 2: <input type="text" id="text2"><input type="button" value="Load" onclick="loadbutton2()"></td>
<td>Link for Iframe 3: <input type="text" id="text3"><input type="button" value="Load" onclick="loadbutton3()"></td>
</tr>
<tr>
<td colspan="3" style="text-align:center">Copyright Totardo</td>
</tr>
<tr><td colspan="3">
<p>History: <br/>
<span id="demo"></p></td></tr>
</table>

<script>
var myhistory = [];
var tempvar=0;
var mysentence="";

function loadbutton1()
{
x = document.getElementById("text1").value;
document.getElementById("iframe1").src = x;
loopz(x);
}

function loadbutton2()
{
y = document.getElementById("text2").value;
document.getElementById("iframe2").src = y;
loopz(y);
}

function loadbutton3()
{
z = document.getElementById("text3").value;
document.getElementById("iframe3").src = z;
loopz(z);
}

function loopz(i)
{
for (m==0;m==tempvar;m++)
{
if(myhistory[m]==myhistory[tempvar])
{
alert("will be breaked");
break;
}
myhistory[tempvar]=i;
}

if (tempvar==0)
{
mysentence = myhistory[tempvar];
}
mysentence = mysentence + ", "+ myhistory[tempvar];
tempvar = tempvar + 1;
document.getElementById("demo").innerHTML=mysentence;
}
</script>

Tuesday 24 November 2015

HOW-TO Draw Canvas on HTML

Javascript commands are case sensitive. Like below:
You can't write docuement.
Better use notepad++.

1. Mouse object properties

2. Accessing html input properties
Suppose you created:
<input type="text" id="text1">
</input>
http://www.w3schools.com/jsref/prop_text_value.asp

3. Accessing mouse events-list