Embed Size (px)
Citation preview
Lesson 5: Working With JAVA SCRIPTJavaScript is a popular object-based scripting language used for creating web pages. It helps Web page creators in making more dynamic and complex pages, easier and faster. Web creators integrate JavaScript code with HTML code to add programming features.
Javascript Code joins HTML Code for a dynamic website
JavaScript can be used to manipulate your webpages to perform a variety of functions. Some of the applications are purely functional, while others are just fun. In fact, you don't have to know any JavaScript at all, because there are numerous scripts out there that you can simply grab and paste into your HTML code.
Java Script Lesson 1.1 -Getting ready for some fun!
Open up our “pumpkin carving” website in notepad. I am going to add something really cool in java script effects to my “web carving website. Make sure to open Firefox and key in this URL: http://www.dynamicdrive.com
The DynamicDrive website is the #1 place on the net to obtain free, original DHTML and Java scripts to enhance your website.
Directions:
Step 1: On the home page of the dynamic drive website, locate the Document Effects tab and click on it.
Java Script Lesson page 1
Step 2: Locate the selection : Autumn leaves.
Step 3: Read the step by step instructions carefully
Java Script Lesson page 2
Step 4: Read the step by step instructions carefully.
Step 1: Add the below chunk of code to the <BODY> section of your page:
Step 2: Finally, save the following six images by right clicking each image, and choosing "save as". Then, upload them to your webpage directory in your network space in the “images” folder .
Note: Do NOT link directly to these images on the DynamicDrive server
Step 5: Edit the Java Script in the image code. Remember that you have your images in your “images” folder. You must edit the code to read
=”../images/al.gif:;
This code must be placed in front of all six images.
<script language="JavaScript1.2">
//Autumn leaves- by Kurt Grigg ([email protected])//Modified by Dynamic Drive for NS6 functionality//visit http://www.dynamicdrive.com for this script
//Pre-load your image below!grphcs=new Array(6)Image0=new Image();Image0.src=grphcs[0]="../images/al.gif";Image1=new Image();Image1.src=grphcs[1]="../images/bl.gif"Image2=new Image();Image2.src=grphcs[2]=" ../images/cl.gif"Image3=new Image();Image3.src=grphcs[3]=" ../images/dl.gif"Image4=new Image();Image4.src=grphcs[4]="el.gif"Image5=new Image();Image5.src=grphcs[5]="fl.gif" Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!Ypos=new Array();Xpos=new Array();Speed=new Array();Step=new Array();Cstep=new Array();ns=(document.layers)?1:0;ns6=(document.getElementById&&!document.all)?1:0;
Java Script Lesson page 3
if (ns){for (i = 0; i < Amount; i++){var P=Math.floor(Math.random()*grphcs.length);rndPic=grphcs[P];document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");}}else{document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i = 0; i < Amount; i++){var P=Math.floor(Math.random()*grphcs.length);rndPic=grphcs[P];document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');}document.write('</div></div>');}WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;for (i=0; i < Amount; i++){ Ypos[i] = Math.round(Math.random()*WinHeight); Xpos[i] = Math.round(Math.random()*WinWidth); Speed[i]= Math.random()*5+3; Cstep[i]=0; Step[i]=Math.random()*0.1+0.05;}function fall(){var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;for (i=0; i < Amount; i++){sy = Speed[i]*Math.sin(90*Math.PI/180);sx = Speed[i]*Math.cos(Cstep[i]);Ypos[i]+=sy;Xpos[i]+=sx; if (Ypos[i] > WinHeight){Ypos[i]=-60;Xpos[i]=Math.round(Math.random()*WinWidth);Speed[i]=Math.random()*5+3;}if (ns){document.layers['sn'+i].left=Xpos[i];document.layers['sn'+i].top=Ypos[i]+hscrll;}else if (ns6){document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);document.getElementById("si"+i).style.top=Ypos[i]+hscrll;}else{eval("document.all.si"+i).style.left=Xpos[i];eval("document.all.si"+i).style.top=Ypos[i]+hscrll;} Cstep[i]+=Step[i];}setTimeout('fall()',20);}window.onload=fall//--></script>
Step 6: Preview your website in Firefox to see if your coding is accurate.
Java Script Lesson page 4
Step 7: Locate a Web Design 2 student and get a signature that your Autumn Leaves java script code is working properly.
_____________________________________ __________________Name of Student (Web Design 2) Date
_____________________________________Student Signature
Step 8: Go back to Dynamic Drive.com and select another cursor code to place in your homework website.
Step 9: Locate a different Web Design 2 student and get a signature that your cursor java script code is working properly.
_____________________________________ __________________Name of Student (Web Design 2) Date
_____________________________________Student Signature
Assessment: Print page 5 only. Place the proper naming convention in the footer for grading. Just print page 5 only and place in inbox for grading.
__________ (10) Assignment Autumn Leaves – Pumpkin Carving website
__________ (10) Web Design 2 student name, date and signature
__________ (10) Assignment Cursor java script on homework assignment website
__________ (10) Web Design 2 student name, date and signature
___________ (10) Reflective question @ Stocker-Bendersky.weebly.com website.
______ (5) Professionalism
______(5) Timeliness _________(60) Total
Java Script Lesson page 5
![Index [memberfiles.freewebs.com] · Web viewJavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox,](https://img.pdfslide.net/doc/110x75/5bc9d43309d3f2aa798d53c2/index-web-viewjavascript-is-the-most-popular-scripting-language-on-the-internet.jpg)
