docJavaScript: Foundations
download 
Report Transcription
JavaScript: Foundations
JavaScript: Foundations
Trainer Name
Trainer/Consultant
PowerSchool University
2012
JavaScript
Foundations
Before taking this course, you should:
• Be comfortable with customizing PowerSchool using HTML and
CSS
• Know the basic structure of HTML such as head, body, and
table tags
• Have a text editor used for coding installed (such as PS Pad or
Text Wrangler)
• Be familiar with the structure of PowerSchool (the database
and user interface)
Objectives
After this course you will be able to:
• Explain what JavaScript is and how it is used in PowerSchool
• Use Developer tools to explore the use of JavaScript
• Write basic JavaScript code
• Identify existing JavaScript and explain its function
• Take the next course, JavaScript: Introduction, with
confidence in your base knowledge
Additional
Resources
This class is not a complete JavaScript course. The goal of this
class is to get you started using JavaScript in PowerSchool.
For additional resources, try:
• Web resources such as www.w3schools.com
• Books such as “HeadFirst into JavaScript”
• Existing PowerSchool scripts such as copyAddress.js
Your First Script
Browser Developer Tools
Firefox: http://getfirebug.com/enable
Chrome: http://code.google.com/chrome/devtools/...
Internet Explorer: http://msdn.microsoft.com/...
Safari: https://developer.apple.com/library/...
Now It’s
Your Turn
Complete hands-on
activity 1:
Use Browser Developer
Tools
Creating a Change Alert
If a change is made to a
student’s ethnicity...
generate an alert
Now It’s
Your Turn
Complete hands-on
activity 2:
Confirm Ethnicity
Change
onchange Attribute
Scheduling/Reporting Ethnicity
<td>
<select id="primaryethnicity" name="[01]ethnicity"
special="lists.ethnicity" onchange="alert('Ethnicity changed');”>
<option>
</select>
</td>
Tells browser to listen for a
change to the element
onchange Attribute
Scheduling/Reporting Ethnicity
<td>
<select id="primaryethnicity" name="[01]ethnicity"
special="lists.ethnicity" onchange="alert('Ethnicity changed');”>
<option>
</select>
</td>
When a user changes the value, run the
JavaScript code between the quotes
Copying Values
Do I have to type the same thing twice?
Frequently, the mother’s and/or father’s
home phone number is the same as the
student’s.
Why type it twice when you can make
PowerSchool do the work for you?
Copying a Value
Copy the value of the father’s or mother’s home
phone number to student’s home phone number.
Your First Method
getElementById-Uses the DOM to find an
element on the page with the given ID
getElementById is a method
on the document object
value refers to the value of
the input field
document.getElementById('home_phone').value
home_phone is the ID that is being
requested
Creating a Hook
JavaScript
document.getElementById('home_phone')
HTML/DOM
<tr class="~[evenoddrow]">
<td class="bold">~
[text:psx.html.admin_students.generaldemographics.home
_phone]</td>
<td><input type="text" id="[01]home_phone"
name="[01]home_phone" value="" size="17"></td>
</tr>
Giving an element an ID makes it
easier to refer to in JavaScript.
Now It’s
Your Turn
Complete hands-on
activity 3:
Change Parent Phone
Numbers
Using Existing PowerSchool ID’s
Some objects have an ID assigned already. For example, look
at the code for the home address fields:
<input type="text" name="[01]city" value=""
size="30" id="pcity">
<input type="text" name="[01]state" value=""
size="2" id="pstate">
<input type="text" name="[01]zip" value=""
size="10" id="pzip">
What might you use these ID’s for?
Using Existing PowerSchool ID’s
Using what you have learned, the code below, and your
browser development tool (Firebug), create an alert that
shows the home street address.
<input type="text" name="[01]city" value=""
size="30" id="pcity">
Answer:
alert(document.getElementById('pstreet').value);
Everything Is an Object!
1st Rule of JavaScript: Everything on an HTML document is an object.
To use JavaScript effectively requires a clear understanding of the
Document Object Model (DOM).
DOM
<html>
<head>
</head>
<body>
</body>
</html>
The Body Object Model
<self>
<head>
!
<eyes>Blue</eyes>
<ears>Big</ears>
<hair>Brown</hair>
</head>
<body>
!
<height>72</height>
!
<weight>180</weight>
</body>
</self>
The Body Object Model
<self>
<head>
!
<eyes>Blue</eyes>
<ears>Big</ears>
<hair>Brown</hair>
</head>
<body>
!
<height>72</height>
!
<weight>180</weight>
</body>
</self>
self.head.eyes
The Body Object Model
<self>
<head>
!
<eyes>Blue</eyes>
<ears>Big</ears>
<hair>Brown</hair>
</head>
<body>
!
<height>72</height>
!
<weight>180</weight>
</body>
</self>
self.head.hair
The Body Object Model
<self>
<head>
!
<eyes>Blue</eyes>
<ears>Big</ears>
<hair>Brown</hair>
</head>
<body>
!
<height>72</height>
!
<weight>180</weight>
</body>
</self>
self.body.height
Now It’s
Your Turn
Complete hands-on
activity 4:
Access Elements
Making Functions
Not Quite What We Want
If you do something more than once, it’s better to create a function to do it.
onchange=”document.getElementById('father_home_phone').value =
document.getElementById('home_phone').value;
document.getElementById(‘mother_home_phone').value =
document.getElementById('home_phone').value;”
Two similar
statements
What if the parents’ phone numbers don’t match the student's?
Create a Function
create a
function()
that
Copy from Student Home Phone
Copy from Student Home Phone
Passing Values/Arguments to Functions
var increment = function (num) {
! return num + 1;
};
increment(2);
num acts as a variable representing
whatever value will be passed to
the function
Will command this function
to execute
Adding JavaScript to Pages: 3 Ways
<html>
<head>
<script type="text/javascript" src="scripts/
JavaScriptFileName.js"></script>
</head>
<body>
<div>
<input onchange=”JavaScriptCode”/>
</div>
<script> //JavaScript code goes here <script>
</body>
</html>
Now It’s
Your Turn
Complete hands-on
activity 5:
Create a Function
Question and Answer
Don’t Forget!!
Navigate to
http://powerschooluniversity.com
and tell us what you think!
Copyright © 2012 Pearson Education, Inc., or its affiliates. All rights reserved.
Similar documents
![SF]ELF F1 ELP](http://s1.doczz.net/store/data/001752859_1-2617d07a4f196d95d1ef8c6a9ecd2eef-70x70.png "SF]ELF F1 ELP")
Fast and Precise Hybrid Type Inference for JavaScript Brian Hackett Shu-yu Guo Abstract
Practical Static Analysis of JavaScript Applications Magnus Madsen Benjamin Livshits
