Kids

Can

JavaScript

<-----Back        Next --->

Intro HTML & JavaScript

Java script is ALive!!

This Tutorial is about Java Script and HTML. HTML is the language that creates the internet pages.
It is a more STATIC(still) language. JavaScript works with HTML to make it DYNAMIC (moving) Or you can also say : in the HTML document.


Look at how alive these examples are.

example1:

Come on , click here

example2 :

Take a close look at this button

The above examples move because javascript changed its attributes.
Learn about attributes with attribute man.

This is Attribute Man. Attributes are like characteristics. You can change the value of Attribute Man's attributes

expression

relaxed
frustrated
surprised

action

relax
play maracas
peace out

legs

middle-sized
short
long

Tags and Attributes

HTML consist of a lot of tags that have a begin-tag and end- tag: <h1></h1> <button> </button>

<body>..</body>..............every thing that goes between the beginning-tag and end-tag will end up in the body.

<h1 >some text </h1> .................................The text in the header tag has a larger font-size.

<p>..</p>........................................................ a whole paragraph can go here

<button> click </button> .............................This will create a button with text 'click'.

<img src="smiley.gif" /> ....................................Image tags dont have end tags

<input type="pasword" />.....................Inputs can have many types: text, date, checkbox, color(colorpicker) and more.

<textarea> here goes some text </textarea> ...........textareas are editable or non-editable squares for text

<div> paragraphs, images, buttons,tables </div>........A div creates a division. Handy to create separate blocks.

<table> <tr> and <td> tags make up the table </table>.....creates table

All tags have attributes. For example : style="color:red" id="button1"

id="paragraph1".......to identify the tag-object

name="someName0".......any string of letters and numbers

title="this is a button"......pops up an explanation or instruction

style="color:blue;.......foreground color

style="text-align:center" ........aligns the content of the element

style="background-color:green" .......background color

style="font-size:30px".......size of letters in pixels

style="display:none".....if value = none content is hidden, if block it shows

style="border:thick solid #0000FF".........creates border

this.innerHTML='a new text'......changes text

<h1>text between beginning and end tags =innerHTML</h1>

 <h1 
 style 
 = 
 " 
 color 
 : 
 red 
 " 
 > 
 Hello, How are you? 
 </h1> 

Attributes go inside the begin-tag: roll over the code to see the components


Tags and Attributes ......... .... "TryoutPanel1"
<h1 style="color:red" >some text</h1> <h2 title="this is a title">this is an innerHTML</h2> <button style="background-color:pink">button</button>





Event Attributes

Event Attributes like onclick , onmouseover, onmouseout. fire an event when the user takes that action.

 <button  
 onclick 
 = 
 ' 
 this.innerHTML 
 = 
 " 
 Bye 
 " 
 ' 
 > 
 Hi 
 </button> 

In the Event Attribute Value , you can specify what Attributes need to change, when that event fires.


onclick ....fires when mouse is clicked on object

onmouseover....fires when mouse is rolling over object

onmouseout ....fires when mousepointer is moving out of object

ondblclick ....fires when object is double-clicked

onmousemove....fires when mousepointer moves over object

ondrag....fires when element is dragged

onmouseup....fires when mousebutton is released over object

onmousedown....fires when mousebutton is pressed down on object

onload....fires when element loads

window.onload = function(){...}....use this to carry out some tasks firsly when window loads

onresize....fires when element is resized



Event Attributes......... .... "TryoutPanel2"
<h1 onclick="this.innerHTML='different text'" > this text can be changed when you click it</h1>





example3 :

These buttons can change each other




getElementById()

Tags can set each other's attributes.

 <h1 
 onclick=' 
 document 
 .getElementById( 
 "myP" 
 ) 
 .innerHTML 
 ='new text' 
 ' 
 > 
 click 
 </h1> 


 <p 
 id=' 
 myP 
 ' 
 > 
 old text 
 </p> 

The document.getElementById() method can find all other elements on the page that have an id eg:<p id="myP" >.




getElementById() ......... .... "TryoutPanel3"
<button onclick="document.getElementById('myHeader').innerHTML= 'Can you make the Header change the button?'" > click me </button> <h1 id="myHeader" >To change the text, click the button</h1> <ul> <li>give the button an <b>id</b> inside the begin tag(id='someId')(1)</li> <li>put an <b>onclick</b> handler into the h1-begin tag(7)</li> <li>inside the onclick use <b>document.getElementById</b> to get the button and change its <b>innerHTML</b></li></ul>

<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email