javascript is very very case sensitive Reserved words List by category Alphabetical list under resources javascript console Shows errors Lets you write messages and intermediate results ID: 756441
Download Presentation The PPT/PDF document "Javascript tips Remember" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
JavascripttipsSlide2
Remember
javascript
is
very, very
case sensitiveSlide3
Reserved words
List by category
Alphabetical list under resourcesSlide4
javascript console
Shows errors
Lets you write messages and intermediate results
console.log (
whatever helps
);Slide5
Using jsfiddle
Validation
Testing
Cut and paste
Add HTML and CSS if you are having problemsSlide6
Key concepts: variables and functionsSlide7
variables
A place to hold a value
Mailbox: know where to pick up my mail; don’t know what’s in it
How to define?
v
ar
name
;
v
ar
name
=
initial-value
;Slide8
FUNCTION: collection of instructions
HTML
<head>
<script
src
=“
function.js
”></script>
</head>
<body>
<button type=“button”
onclick
=“
doit
();”></body>
JAVASCRIPT (function.js)
f
unction
doit
() {
alert(“Hi!”);
}Slide9
What we want to doSlide10
Form with input, button, output
HTML
JavaScriptSlide11
Add data
HTML
JavaScriptSlide12
Push button and input data sent to
javascript
HTML
JavaScriptSlide13
parameters
Just a special type of variable
Something that you hand to the function
Q: Many users: how do you name?
A: Give it its OWN names to use locally
Q: How do you match up?
A: By POSITIONSlide14
FUNCTION with parameters
HTML
<head>
<script
src
=“
function.js
”></script>
</head>
<body>
<button type=“button”
onclick
=“
doit
(3,5);”></body>
JAVASCRIPT (function.js)
f
unction
doit
(
a,b
) {
var
c = a*b);
alert(“product is ”+c);}Slide15
Javascript
uses the data to create a new result
HTML
JavaScriptSlide16
And moves it to the output location
HTML
JavaScriptSlide17
Return value
return (value);
Want to get information BACK to HTML
With a return, the function has a VALUE
Can be used anywhere you can use a constant or variable
Alert
Assignment
statement
Can only change one thing with a returnSlide18
FUNCTION with return
HTML
<head>
<script
src
=“
function.js
”></script>
</head>
<body>
<button type=“button”
onclick
=“alert(
doit
(3,5));”></body>
JAVASCRIPT (function.js)
f
unction
doit
(
a,b
) {
var
c =
a*b; return(c);}Slide19
Changing more than one thing
If you have two things that you want to change
Can change them in the function
Usually do NOT return
value
Can only use such a function in one placeSlide20
Doing interesting things with javascriptSlide21
Assignment statements
target
=
new-value
;
CHANGE the value of the
target
variable TO the
new-value
n
ew-value
can be a constant, a variable, or an expression
x = 3;
x = y;
x = x+ 5;Slide22
Arrays
Collection of related information
Easy way to choose between items
var
array
= [
“A",
"
B", “F",
"
G"
];
array[index
]
Example: user enters number, you return that monthSlide23
Random Selection
Choose
between
options randomly
var
n =
Math.random
();
[Math is a collection of functions]
If you use it twice, you get two different values. Need to save it to reuse!Slide24
Converting Random to Integer
Often useful to convert that random number to an
integer
Index into array!
0->1 needs to be changed to 0->3 (or any other
number)
v
ar
biggerNumber
= n*4; gets the range correct
But only want
integer:
Math.floor returns the largest integer less than the valuevar
biggerInteger = Math.floor(n*4); Slide25
Putting Content within Tags
General form:
context.element.attribute
So far we have
form-
name
.
input
-
id
.value
form-name
.img-id.src