Presentation is loading. Please wait.

Presentation is loading. Please wait.

Parameters: Parameters are another way of having something hold a value. E.g., var x = 3 Now the variable x holds 3. We can use x as if it is the number.

Published byInge Lesmana Modified over 6 years ago

Similar presentations

Presentation on theme: "Parameters: Parameters are another way of having something hold a value. E.g., var x = 3 Now the variable x holds 3. We can use x as if it is the number."— Presentation transcript:

1

2 Parameters: Parameters are another way of having something hold a value. E.g., var x = 3 Now the variable x holds 3. We can use x as if it is the number 3 var narr = new Array() narr[0] = “cat” narr[1] = “dog” Now the array narr at location 1 holds the word “dog”, and we can use narr[1] as if it is the word “dog” Parameters: <p onclick = “func(‘easy’)”> click here to call the function with the parameter ‘easy’ </p> <script> function func(easyorhard) { If (easyorhard == ‘easy’) … Now when you click on the paragraph, the word ‘easy’ is placed in the parameter easyorhard, so easyorhard can be used as if it is the word ‘easy’

3 Parameter Example: link
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function showparam(x) { if (x == 'snow') { document.getElementById("h11").innerHTML = "it's snowing!" } else if (x == 'rain') { document.getElementById("h11").innerHTML = "it's raining!" else if (x == 'sun') { document.getElementById("h11").innerHTML = "it's sunny!" </script> </head> <body> <h1 id = "h11"> Different Styles</h1> <p id = "p1" onClick = "showparam('snow')">click here for snow</p> <p id = "p2" onClick = "showparam('rain')">click here for rain</p> <p id = "p3" onClick = "showparam('sun')">click here for sun</p> </body> </html>

4 <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function changepic(x) { document.getElementById('bigpic').src = x } function changebak() { document.getElementById('bigpic').src = “frog.jpg" </script> </head> <body > <table ><tr><td colspan = "4" height = "300" width = "300"> <img src = "frog.jpg" width = "250" height = "250" id = "bigpic"> </td></tr> <tr><td > <img src = "pic1.jpg" width = "40" height = "40" id = "img1" onMouseOver = "changepic('pic1.jpg')" onMouseOut = "changebak()"> </td><td> <img src = "pic2.jpg" width = "40" height = "40" id = "img2" onMouseOver = "changepic('pic2.jpg')" onMouseOut = "changebak()"> <img src = "pic3.jpg" width = "40" height = "40" id = "img3" onMouseOver = "changepic('pic3.jpg')" onMouseOut = "changebak()"> <img src = "pic4.jpg" width = "40" height = "40" id = "img4" onMouseOver = "changepic('pic4.jpg')" onMouseOut = "changebak()"> </td></tr></table> </body> </html> link

5 Functions can have more than one parameter
link <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function myFunction(x, y) { document.getElementById('p1').innerHTML = "Welcome " + x + ", the " + y; } </script> </head> <body> <p id = "p1">Results go here.</p> <button onclick="myFunction('Harry Potter','Wizard')">Try it</button> <button onclick="myFunction('Bob','Builder')">Try it</button> </body> </html> Parameters match in order: function myFunction( x, y) onClick = myFunction( ‘Harry Potter’, ‘Wizard’) onClick = myFunction( ‘Bob’ ‘Builder’)

6 Parameter Example: link
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function showparam(x, y) { document.getElementById(x).innerHTML =y document.getElementById(x).style.fontSize = "150%"; } function goBack(x, y) document.getElementById(x).style.fontSize = "100%"; </script> </head> <body> <h1 id = "h11"> Different Styles</h1> <p id = "snow" onMouseOver = "showparam('snow', 'it is snowing!')" onMouseOut = "goBack('snow', 'weather 1')">weather 1</p> <p id = "rain" onMouseOver = "showparam('rain', 'it is raining!')" onMouseOut = "goBack('rain', 'weather 2')">weather 2</p> <p id = "sun" onMouseOver = "showparam('sun', 'it is sunny')" onMouseOut = "goBack('sun', 'weather 3')">weather 3</p> </body> </html>

7 What is this code doing? link
<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> var race_on = true var ycoord = 5; function myfunc() { if (race_on == true) { ycoord = ycoord+ Math.floor(Math.random()*50)+1 document.getElementById('img1').style.left = ycoord+"px" if (ycoord > 800) { race_on = false func2() } else { setTimeout(function(){myfunc()},100) function func2() { document.getElementById('h11').innerHTML = "Snail won!" </script> </head> <body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 270px; left: 5px"> <input type = "button" onclick = "myfunc()" value = "start" ></p> </body> </html> What is this code doing? link

8 Add another snail for a race? link
1. add another snail image in your html code 2. DON’T WRITE ANOTHER FUNCTION TO DO THE SAME THING!! Add a parameter Could be the id of the image to move Or could put all ids into an array Then the parameter would be the number of the id in the array, e.g., <script> race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = 5; function myfunc(x) { if (race_on == true) { ycoord = ycoord+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord+"px" if (ycoord > 800) { race_on = false func2(x) } else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> Add another snail for a race? link

9 Next, make both snails go at once: link
Since one click cannot call more than one function (or a single function more than once): ADD ANOTHER FUNCTION A starting function This function will ‘call’ the other function twice: And the click in the html should now call the starting function: function startit() { myfunc(0) myfunc(1) } function myfunc(x) { if (race_on == true) { ycoord = ycoord+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord+"px" if (ycoord > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" … <input type = "button" onclick = "startit()" value = "start" > Next, make both snails go at once: link

10 Problem: both snails using the same y coordinate (why is this a problem?)
Solution: an array for y coordinates as well as an array for ids: Then replace ycoord with ycoord[x]: var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x] + Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) } else { setTimeout(function(){myfunc(x)},100)

11 <!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; function startit() { myfunc(0) myfunc(1) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head> <body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 170px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 310px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> </body> </html> All Together: link

12 <!DOCTYPE html><html><head><meta charset= "utf-8" /> <script> race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; function startit() { myfunc(0) myfunc(1) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head> <body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 170px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 310px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> </body> </html> Now, how do we add another snail? (3 lines in js and 1 line in the html code)

13 Link Next: Make them go backwards?
race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; ycoord[2]= 5; function startit() { myfunc(0) myfunc(1) myfunc(2) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ Math.floor(Math.random()*50)+1 document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) } } function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head><body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 20px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 170px; left: 5px"></p> <p ><img src = "Images/snail3.png" width = "150" height = "150" id = "img3" style = "position: absolute; top: 320px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 630px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> Link Next: Make them go backwards?

14 Tougher: When a snail has a ycoord greater than 180, we want to reverse the direction. The easiest way to reverse the direction is to change the ycoordinate by a negative number instead of a positive number. To do that, we need a direction value (either 1 or negative 1) that we multiply the ycoordinate by. We need a different direction value for each snail: var direction = new Array(); direction[0] = 1 direction[1] = 1 direction[2] = 1 … function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ ((Math.floor(Math.random()*50)+1) * direction[x]) document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { direction[x] = direction[x] * -1; setTimeout(function(){myfunc(x)},100) } else if (ycoord[x] < 5) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100)

15 Add flipped pics: When snails go back towards the beginning, we want them facing the right direction: var backImage = new Array(); backImage[0] = "Images/snail1b.png" backImage[1] = "Images/snail2b.jpg" backImage[2] = "Images/snail3b.png" var direction = new Array(); direction[0] = 1 direction[1] = 1 direction[2] = 1 … function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ ((Math.floor(Math.random()*50)+1) * direction[x]) document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { document.getElementById(idArray[x]).src = backImage[x]; direction[x] = direction[x] * -1; setTimeout(function(){myfunc(x)},100) } else if (ycoord[x] < 5) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100)

16 race_on = true var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" var ycoord = new Array(); ycoord[0]= 5; ycoord[1] = 5; ycoord[2]= 5; var backImage = new Array(); backImage[0] = "Images/snail1b.png" backImage[1] = "Images/snail2b.jpg" backImage[2] = "Images/snail3b.png" var direction = new Array(); direction[0] = 1 direction[1] = 1 direction[2] = 1 function startit() { myfunc(0) myfunc(1) myfunc(2) } function myfunc(x) { if (race_on == true) { ycoord[x] = ycoord[x]+ ((Math.floor(Math.random()*50)+1) * direction[x]) document.getElementById(idArray[x]).style.left = ycoord[x]+"px" if (ycoord[x] > 800) { document.getElementById(idArray[x]).src = backImage[x]; direction[x] = direction[x] * -1; setTimeout(function(){myfunc(x)},100) else if (ycoord[x] < 5) { race_on = false func2(x) else { setTimeout(function(){myfunc(x)},100) function func2(y) { document.getElementById('h11').innerHTML = "Snail"+y+" won!" </script> </head><body> <p ><img src = "Images/snail1.png" width = "150" height = "150" id = "img1" style = "position: absolute; top: 40px; left: 5px"></p> <p ><img src = "Images/snail2.jpg" width = "150" height = "150" id = "img2" style = "position: absolute; top: 190px; left: 5px"></p> <p ><img src = "Images/snail3.png" width = "150" height = "150" id = "img3" style = "position: absolute; top: 340px; left: 5px"></p> <h1 id = "h11"> </h1> <p style = "position: absolute; top: 650px; left: 5px"> <input type = "button" onclick = "startit()" value = "start" ></p> All Together: Link:

17 Looping SetTimeout is a loop
It makes something happen again and again and again Every time the function setTimeout is executed, the function inside of it (that is called) is executed. We stop the loop by stopping setTimeout from being executed

18 Remember from lab? <script> var colorArray = new Array() colorArray[0] = "#FF3377" colorArray[1] = "#CCD234" colorArray[2] = "#33BB56" colorArray[3] = "#22BAC1" colorArray[4] = "#3432D3" colorArray[5] = "#DD45E2" function myfunc() { var x = Math.floor(Math.random() * colorArray.length) document.getElementById('h11').style.color = colorArray[x] var y = Math.floor(Math.random() * colorArray.length) if (y == x) { //What does this do? y = Math.floor(Math.random() * colorArray.length) } document.getElementById('h11').style.backgroundColor = colorArray[y] var z = Math.floor(Math.random() * colorArray.length) if ((y == z) || (x == z)) { //What does this do? z = Math.floor(Math.random() * colorArray.length) document.getElementById('h11').style.borderColor = colorArray[z] setTimeout(function(){myfunc()},1300) </script> </head><body> <h1 id = "h11" style = "padding: 40; border-style: solid; border-width: 5px; border-color:black; font-weight: bold;">Colors</h1> <input type = "button" onclick = "myfunc()" value = "start" ></p> Link

19 What if we do this? <script> var colorArray = new Array() colorArray[0] = "#FF3377" colorArray[1] = "#CCD234" colorArray[2] = "#33BB56" colorArray[3] = "#22BAC1" colorArray[4] = "#3432D3" colorArray[5] = "#DD45E2" function myfunc() { var x = Math.floor(Math.random() * colorArray.length) document.getElementById('h11').style.color = colorArray[x] var y = Math.floor(Math.random() * colorArray.length) while (y == x) { //What does this do? y = Math.floor(Math.random() * colorArray.length) } document.getElementById('h11').style.backgroundColor = colorArray[y] var z = Math.floor(Math.random() * colorArray.length) while ((y == z) || (x == z)) { //What does this do? z = Math.floor(Math.random() * colorArray.length) document.getElementById('h11').style.borderColor = colorArray[z] setTimeout(function(){myfunc()},1300) </script> </head><body> <h1 id = "h11" style = "padding: 40; border-style: solid; border-width: 5px; border-color:black; font-weight: bold;">Colors</h1> <input type = "button" onclick = "myfunc()" value = "start" ></p>

20 What does this do? <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function afunc(countvar) { while (countvar < 5) { document.write("<p> really </p>"); countvar = countvar + 1; } document.write("<p> cute </p>"); </script> </head> <body> <p id = "here" onClick = "afunc(1)">Click to see the secret message </p> </body> </html> Link

21 Remember the race? race_on = true var idArray = new Array()
idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" … function startit() { myfunc(0) myfunc(1) myfunc(2) } We can use a loop here too That way it won’t matter how many images we are racing, e.g.,

22 Using a loop: var idArray = new Array() idArray[0] = "img1" idArray[1] = "img2" idArray[2] = "img3" idArray[3] = "img4" function startit() { var index = 0; while (index < idArray.length) { //will this work no matter how many images are added to the idArray? myfunc(index) index = index+1 }

23 getElementsByTagName()
getElementById Gets one element at a time, based on id What if we want to get all elements with the same tag E.g., we want to change all the paragraphs on a web page We can use getElementsByTagName(“P”) var pArray = document.getElementsByTagName(“P”) This will make an array of all the paragraphs in a web page

24 <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function afunc() { var pArr = document.getElementsByTagName("P"); var y = Math.floor(Math.random() * pArr.length) pArr[y].innerHTML = 'random sentence' } </script> </head> <body> <p> first</p> <h2> Not p </h2> <p> second </p> <p> third </p> <p> fourth </p> <input type = "button" onClick = "afunc()" value = "click here"> </body> </html> Link

25 Get images <script> var picArr = new Array() picArr[0] = "Images/cute_puppy_02.jpg" picArr[1] = "Images/cute2.jpg" picArr[2] = "Images/cute3.jpg" picArr[3] = "Images/cute6.jpg" picArr[4] = "Images/cute7.jpg" var prev = -1; function afunc() { var iArr = document.getElementsByTagName('img') var y = Math.floor(Math.random() * iArr.length) var z = Math.floor(Math.random()*picArr.length) if (prev != -1) { iArr[prev].src = "Images/box.png" } iArr[y].src = picArr[z] prev = y; </script> </head> <body> <img src = "Images/box.png" width = "200" height = "200" alt = "a box"> <input type = "button" onClick = "afunc()" value = "click here"> Link

26 <script> function afunc() { var pArr = document
<script> function afunc() { var pArr = document.getElementsByTagName("P"); var countvar = 0; while (countvar < pArr.length) { pArr[countvar].style.backgroundColor = "red" pArr[countvar].style.color = "white" pArr[countvar].style.fontSize = "150%" pArr[countvar].style.padding = "20px" pArr[countvar].style.width = "600px" pArr[countvar].style.boxShadow = "10px 20px 30px green"; countvar = countvar + 1; } </script> </head> <body> <p> first</p> <h2> Not p </h2> <p> second </p> <p> third </p> <p> fourth </p> <input type = "button" onClick = "afunc()" value = "click here"> Using a While Loop Link

27 <script> var colorArr = new Array() colorArr[0] = "red" colorArr[1] = "orange" colorArr[2] = "yellow" colorArr[3] = "green" colorArr[4] = "blue" function afunc() { var pArr = document.getElementsByTagName("P"); var countvar = 0; while (countvar < pArr.length) { var x = Math.floor(Math.random()*colorArr.length) var y = Math.floor(Math.random()*colorArr.length) while (x == y) { y = Math.floor(Math.random()*colorArr.length) } pArr[countvar].style.backgroundColor = colorArr[x] pArr[countvar].style.boxShadow = "10px 20px 30px "+colorArr[y]; pArr[countvar].style.color = "white" pArr[countvar].style.fontSize = "150%" pArr[countvar].style.padding = "20px" pArr[countvar].style.width = "600px" countvar = countvar + 1; </script> </head> <body> <p> first</p> <p> second </p> <p> third </p> <p> fourth </p> <input type = "button" onClick = "afunc()" value = "click here"> More than one loop Link

28 Fun Stuff: You can actually update the existing innerHTML (or anything else) <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <style> td { font-size: 170%; font-family: arial; padding: 10;text-align: center;} table { width: 900px; margin: auto; } </style> <script> function func() { var x = document.getElementById('text').innerHTML; x = ">>" + x document.getElementById('text').innerHTML = x; } </script> </head> <body> <table><tr><td colspan = '2'><h1 id = 'text'> 8-) <h1> </td></tr> <tr><td onClick = "func()"> Add tail </td></tr></table> </body> </html> Link

29 Another Example: <script> function func(letter) { var x = document.getElementById('text').innerHTML; x += letter; document.getElementById('text').innerHTML = x; } </script> </head> <body> <table><tr><td colspan = '9'> <h1 id = 'text' style = "font-size: 150%; text-align: center; font-family: arial; height: 100px;"></h1> </td></tr> <tr><td onClick = func('a')>a</td><td onClick = func('b')>b</td><td onClick = func('c')>c</td><td onClick = func('d')>d</td><td onClick = func('e')>e</td> <td onClick = func('f')>f</td><td onClick = func('g')>g</td><td onClick = func('h')>h</td><td onClick = func('i')>i</td> </tr> <tr><td onClick = func('j')>j</td><td onClick = func('k')>k</td><td onClick = func('l')>l</td><td onClick = func('m')>m</td><td onClick = func('n')>n</td> <td onClick = func('o')>o</td><td onClick = func('p')>p</td><td onClick = func('q')>q</td><td onClick = func('r')>r</td> <tr><td onClick = func('s')>s</td><td onClick = func('t')>t</td><td onClick = func('u')>u</td><td onClick = func('v')>v</td><td onClick = func('w')>w</td> <td onClick = func('x')>x</td><td onClick = func('y')>y</td><td onClick = func('z')>z</td><td onClick = func('.')>.</td> </table> Link

30 Moving <script> var xcoord = 10; var ycoord = 10; function func() { var x = Math.floor(Math.random() * 700); var y = Math.floor(Math.random() * 700); var xchange = (x-xcoord)/30; var ychange = (y-ycoord) / 30; count = 0; Move(xchange,ychange) } function Move(xc, yc) { count = count + 1; if (count < 30) { ycoord = ycoord + yc; xcoord = xcoord + xc; document.getElementById('p1').style.position = "absolute" document.getElementById('p1').style.left = ycoord + "px" document.getElementById('p1').style.top = xcoord + "px" setTimeout(function() {Move(xc,yc)}, 50) else { func(); </script> Link

31 Following Mouse: <script> var xcoord = 10; var ycoord = 10; function getClicks(e) { var x = e.clientX; var y = e.clientY; var xchange = (x-xcoord)/30; var ychange = (y-ycoord) / 30; count = 0; Move(xchange,ychange) } function Move(xc, yc) { count = count + 1; if (count < 30) { ycoord = ycoord + yc; xcoord = xcoord + xc; document.getElementById('p1').style.position = "absolute" document.getElementById('p1').style.left = xcoord + "px" document.getElementById('p1').style.top = ycoord + "px" setTimeout(function() {Move(xc,yc)}, 50) else { func(); </script> Link

Download ppt "Parameters: Parameters are another way of having something hold a value. E.g., var x = 3 Now the variable x holds 3. We can use x as if it is the number."

Similar presentations

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
function coffeeinfo() { document.getElementById('p3').innerHTML = The word 'coffee' was.

function coffeeinfo() { document.getElementById('p3').innerHTML = "The word 'coffee' was.
Web Pages Week 10 This week: CSS Next week: CSS – Part 2.

Web Pages Week 10 This week: CSS Next week: CSS – Part 2.
Cascading Style Sheets

Cascading Style Sheets
Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.

Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.
Presenter: James Huang Date: Sept. 26, 2014 1.  Introduction  Basics  Lists  Links  Forms  CSS 2.

Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
document.getElementById Used to change anything in your document (web page) that has an id Then you can change different aspects of the element with that.

document.getElementById Used to change anything in your document (web page) that has an id Then you can change different aspects of the element with that.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.

Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
Start menu -> all program -> Microsoft Visual SourceSafe-> Microsoft Visual Studio 2010 Click.

Start menu -> all program -> Microsoft Visual SourceSafe-> Microsoft Visual Studio 2010 Click.
JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.

JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.
Very quick intro HTML and CSS. Sample html A Web Title.

Very quick intro HTML and CSS. Sample html A Web Title.
CHAPTER 8 ADVANCED CSS. LEARNING OBJECTIVES Assign formatting styles to a CSS class definition Use a tag’s class attribute to apply the styles defined.

CHAPTER 8 ADVANCED CSS. LEARNING OBJECTIVES Assign formatting styles to a CSS class definition Use a tag’s class attribute to apply the styles defined.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science

End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.

CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
1 Dreamweaver CS5 intermediate class by Cookie Setton Build a CSS website WITHOUT TABLES Just when you thought you were starting to understand HTML coding,

1 Dreamweaver CS5 intermediate class by Cookie Setton Build a CSS website WITHOUT TABLES Just when you thought you were starting to understand HTML coding,
Cascade Style Sheet Demo. Cascading Style Sheets Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to.

Cascade Style Sheet Demo. Cascading Style Sheets Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to.
กระบวนวิชา 25 3208 CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Unit 20 - Client Side Customisation of Web Pages

Unit 20 - Client Side Customisation of Web Pages
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.

CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.

Similar presentations

Ads by Google