Introduction to JavaScript Lesson

 What is JavaScript and why is it useful?
  • Static versus dynamic HTML
  • Static – always the same
  • Dynamic – can change depending on user actions and input, create games
  • JS runs in the browser – is interpreted
  • Full programming language but not Java
  • Learning goal – learn programming to add dynamic content to web sites
42 full examples at
Here’s one as a demo.
3 simple examples to get started
Example 1 – Alerts and event handlers
———————————————–
<html>
<head>
<script type=”text/javascript”>
function functionOne() { alert(‘You clicked the top text’); }
function functionTwo() { alert(‘You clicked the bottom text’); }
</script>
</head>
<body>
<p><a href=”#” onClick=”functionOne();”>Top Text</a></p>
<p><a href=”javascript:functionTwo();”>Bottom Text</a></p>
</body>
</html>
———————————————–
The next 2 examples are from
Example 2 – Pop Up Window
———————————————–
<html>
<head>
<title>Pop up example </title>
<script type=”text/javascript”>
// Popup window code
function newPopup(url) {
    popupWindow = window.open(
 url,’popUpWindow’,’height=700,width=800,left=10,top=10,resizable=yes,
scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes’)
}
</script>
<p>Popup Window:</p>
<p><a href=”JavaScript:newPopup(‘http://www.quackit.com/html/codes/’);”>Get your HTML codes in a popup!</a></p>
<div class=”more-info”>
<p>More info: <a href=”http://www.quackit.com/javascript/popup_windows.cfm”>Popup Windows</a></p>
</div>
———————————————–
Example 3 – Jump Menu
———————————————–
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Jump Menu</title>
<script language=”javascript” type=”text/javascript” >
<!– hide
function jumpto(x){ if (document.form1.jumpmenu.value != “null”) {  document.location.href = x  } }
// end hide –>
</script>
</head>
<body>
<p>Jump Menu:</p>
<form name=”form1″> <select name=”jumpmenu”
onChange=”jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)”>
<option>Jump to…</option>
<option value=http://www.quackit.com>Quackit Homepage</option>
<option value=http://www.quackit.com/javascript/>JavaScript</option>
<option value=http://www.quackit.com/html/>HTML</option>
<option value=http://www.quackit.com/css/>CSS</option>
<option value=http://www.quackit.com/sql/tutorial/>SQL</option>
<option value=http://www.quackit.com/database/tutorial/>Database Tutorial</option>
<option value=http://www.quackit.com/web_hosting/>Web Hosting Tutorial</option>
</select>
</form>
<div class=”more-info”>
<p>More info:
<a href=”http://www.quackit.com/javascript/javascript_dropdown_menu.cfm”>Jump Menu</a>
</p>
</div>
</body>
</html>
———————————————–
Choose at least one and incorporate into your web site
If finished, choose and modify other examples below.
Example 4 – Description
———————————————–
<HTML>
<head>
<title>Factorial</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<BODY>
<SCRIPT type=”text/JavaScript”>
document.write(“<h2>Factorials</h2>”) ;
for (i=1, fact=1;  i!=11;  i++, fact *= i)  {
   document.write ( i + “! =” + fact  ) ;
   document.write(“<br/>”); }
</SCRIPT>
</BODY>
</HTML>
———————————————–
Example 5 – Description
———————————————–
<HTML>
<head>
<title>Color Changer</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>

 

<BODY>

<SCRIPT LANGUAGE= “javascript”>

setTimeout(“document.bgColor=’white'”, 1000)

setTimeout(“document.bgColor=’lightpink'”, 1500)
setTimeout(“document.bgColor = ‘pink'”, 2000)
setTimeout(“document.bgColor =  ‘deeppink'”, 2500)
setTimeout(“document.bgColor = ‘red'”, 3000)
setTimeout(“document.bgColor = ‘tomato'”, 3500)
setTimeout(“document.bgColor = ‘darkred'”, 4000)

</SCRIPT>
</BODY>
</HTML>
———————————————–
JavaScript color names
———————————————–
Challenges:
  • take the factorial example, instead of doing the first 10 factorial
  • prompt the user to the number to calculate
  • validate the user input for an additional challenge
  • program other functions such as the square numbers, cubic numbers, Fibonacci numbers
For more examples:
Posted in Teaching, Technology | Leave a comment

WeDo Getting Started for First Grade

I have been using the LEGO Education supplied getting started activities for many years with my first grade students.  We do them together usually in circle.  Week one is the motor, week 2 most of the gears, and week 3 the pulleys.  We culminate with Dancing Birds.  After we go through each Getting Started and talk about motors, gears, or pulleys and what each does, I let them add on to their model.  This latter part is very exciting for first graders and builds on what they just learned.  They will also add all kinds of programming.  Here’s a few photos from yesterday.

IMG_2553 IMG_2554 IMG_2555 IMG_2559 IMG_2562

Posted in Robotics, Teaching | Leave a comment

EV3 iPad App

LEGO Education has released a free iPad app for EV3. I was fortunate to be able to do some curriculum consulting work on this project.

https://itunes.apple.com/us/app/lego-education-mindstorms/id959374369?mt=8

 

ev3iPad

Posted in Robotics, Technology | Leave a comment

Review of Elementary Robotics

My book got a nice review on LegoEngineering.com

http://www.legoengineering.com/elementary-robotics-book-review/

Posted in Robotics, Teaching, Technology | Leave a comment

The Power of Wireless Projector Connection

This is a real incident from a  study I just completed that compared teacher use of technology with and without wireless projection systems.  I found that these systems changed the spatial arrangements in the classroom as well as the reach and frequency of technology use.

Thanks to Sally Galman, who took my very crude cartoon and made it into something fabulous.  See http://blogs.umass.edu/sallyg/ for more information on Sally and her wonderful work including her research methodology books (in cartoon format).

techComicPage1 techComicPage2

Posted in Research, Teaching, Technology | Leave a comment

New Burglar Alarm Posters

Here are some nice example of grade 4 burglar alarm ad posters from this year.  Students have an open-ended engineering challenge of building a prototype burglar alarm.  Next, they design an ad poster and make a pitch at a simulated sales event.

 

BurglarAd18 BurglarAd19 BurglarAd20 BurglarAd21

Posted in Robotics, Teaching | Leave a comment

Burglar Alarm Fair Business Card

A couple of students made their own business cards for our grade 4 Burglar Alarm Fair totally on their own.  I was happy to see such investment and initiative!

Business Card

Posted in Uncategorized | Leave a comment

Space Challenge Ready To Go

My enrichment students have finished building all the LEGO EV3 Space Challenge pieces and are ready to take on the challenge missions!

Space Challenge

Posted in Robotics, Teaching, Technology | 3 Comments

Dragsters 2014

I teach robotics one afternoon a week in a sister school in our district.  This is my third year there.  It is interesting to see the changes each year as students get more experience.  The classroom teacher and I were very pleased with the engineering results this year. All teams completed a dragster and got at least one time.  This year’s faster dragster was made by Kennan.  The car went 6.7 feet/second.  Second fastest was Jerry and Kaylie.  Their car went 5.9 feet/second.

Dragsters 2 Dragsters 1

Posted in Uncategorized | Leave a comment

Found This Note on a Robot Kit Today

World Record Note

 

 

We found this note from two of last year’s sixth graders on one of the robotics kits.  It was very satisfying to find this note.  The two boys were so proud of their accomplishments.

“This kit was the one used to break the world record of 7.7 feet per second.  Use this kit wisely.  Kyle and Mark”

 

Posted in Robotics, Teaching | Leave a comment