tag, add a call to the external JavaScript file you just created:
The form
Next, we'll create a form so the user can choose the preferred style.
Notice the onclick and onkeypress matches the link rel title.
functions
------------------------------------
function funky() { .... } <--creates a function
------------------------------------
screen pop up
function funky() {
alert("this creates a popup on the screen");
}
funky(); <--calls a function with no params, runs by default
------------------------------------
using a button for a function
------------------------------------
Call a function with another function
function first(){
document.write("Hello from first");
}
function second(){
document.write("Hello from second");
}
function start(){
first();
second();
}
start();
Will print: Hello from firstHello from second
parameters
function meatball(anything inside parenthesis is the "parameter' of a function){
}
------------------------------------
function myfunction(X){
document.write("I like " + X);
}
myfunction("Y") Will Print," I like Y" Since Y was given as the parameter
myfunction("Q") Will Print, "I like Q" Since Q was given as the parameter
------------------------------------
multiple parameters with line break
------------------------------------
function myfunction(one, two, three){
document.write(one + " comes before " + two + " which is before " + three + "
");
}
myfunction("1","2","3"); Will Print," 1 comes before 2 which is before 3"
------------------------------------
You can reuse function on multiple lines
myfunction("1","2","3");
myfunction("6","7","8");
Will print
1 comes before 2 which is before 3
6 comes before 7 which is before 8
------------------------------------
Return statements
function myfunction(){
return "This is the return text";
}
document.write(myfunction());
will write: This is the return text
------------------------------------
function myfunction(a,b){
var c = a+b;
return c;
}
document.write(myfunction(2,3));
Will print 5
------------------------------------
Math
var X = 4 + 6;
document.write(X);
Will print 10
var X = 4 + 6 + 8 + 2;
document.write(X);
Will print 20
var X = 4 - 6;
document.write(X);
Will print -2
var X = 10 * 2;
document.write(X);
will print 20
var X = 25 / 7;
document.write(X);
Will print 3.5714285714285716
Mod=%
var X = 25 % 7;
document.write(X);
Will print 4
Increment counter
var X = 7;
X = X + 1;
document.write(X);
Will print 8
var X = 7;
X++;
document.write(X);
Will print 8
var X = 7;
X--;
document.write(X);
Will print 6
Assignment Operator
var X = 7;
X += 3;
document.write(X);
will print 10
var X = 7;
X -= 3;
document.write(X);
will print 4
var X = 7;
X *= 3;
document.write(X);
will print 21
var X = 7;
X /= 3;
document.write(X);
will print 2.3333333333333335
var X = 7;
X %= 3;
document.write(X);
Will print 1 var X = 7;
X += 3;
X -= 3;
X *= 3;
X /= 3;
document.write(X);
Will print 7
Convert a string to a number
var y = Number(document.forms[0].elements[1].value);
If Statements
var X = 10;
var Y = 10;
if(X == Y){
document.write("It's equal");
}
prints it's equal
can use:
if(X != Y) not equal
if(X > Y) greater than
if(X < Y) less than
if(X <= Y) less than or equal
if(X == Y) equal
if(10 != 20)
If else
reads if 10 is not equal to...
if(10 != 20){
document.write("true");
}
else {
document.write("false");
}
Prints true
Nesting
reads if 10 is equal to...
if(10 == 10){
if(10 > 5){
document.write("true");
}
}
else {
document.write("false");
}
Prints true
Complex Conditions
reads if first AND last...
var first = "Grace";
var last = "Bowden";
if ((first=="Grace")&&(last=="Bowden")){
document.write(" Hello " + first + last);
}
else{
document.write("Who are you?")
}
OR
reads first OR last...
var first = "Grace";
var last = "Bowen";
if((first=="Grace") || (last=="Bowden") ){
document.write("Hello" + first)
}
Switch (case) statements
Will continue down the list until a matching case is found or break; is seen
var X = "Bowden";
switch(X){
case "Grace":
document.write("Grace");
break;
case "Bowden":
document.write("Bowden");
break;
}
Prints Bowden
break tells it to stop once it finds the first match
Default Case
var X = "Blah";
switch(X){
case "Grace":
document.write("Grace");
break;
case "Bowden":
document.write("Bowden");
break;
default:
document.write("Nothing found")
}
Prints nothing found
no need to break; default:
Loops
need a variable, and starting point. var can be made in the ()
Basic loop
reads: for(x=0;x<10;x++) = starting at 0, and as long as x is less than 10, increment counter 1 time each loop.
for(x=0;x<10;x+=3){
document.write("Grace
")
}
Will print Grace 4X
for(x=0;x<10;x++){
document.write("Grace
")
}
Will print Grace 10X
While loop
first need a counter!!
var x = 1;
while (x<10){
document.write(x + " Grace");
x++
}
Will print 1 Grace
1 Grace2 Grace3 Grace4 Grace5 Grace6 Grace7 Grace8 Grace9 Grace
-------------------------------------------------
var x = 1;
while (x<=10){
document.write(x + " Grace");
x++
}
Will print 1 Grace2 Grace3 Grace4 Grace5 Grace6 Grace7 Grace8 Grace9 Grace10 Grace
Do While
while loop does: while(test)run code.
do while loop does: do(code)while something is true
code runs at least once
var x = 5;
do{
document.write(x + " Grace");
x++
}while(x<10);
Will print 5 Grace6 Grace7 Grace8 Grace9 Grace
var x = 5;
do{
document.write(x + " Grace");
x++
}while(x>10);
Will print 5 Grace
Event Handlers
can be outside script tags
onClick
onMouseOver
Google
onMouseOut
Google
onLoad
onUnload
not working?
Objects
object.method
object.properties
Properties
variables are objects and have built in properties:
var X = "Hi"
document.write(X.length);
Will print 2
Methods
document.write === write is a method of what the document object can do
Create your own Object
1.uses a constructor function
2.script goes in the head, printing goes in the body
3.function X(prop1,prop2){ --- creates the blueprint for the new object
4.this.prop1/this.prop2 ---creates the properties of the new object
5.var ObjectName = new FunctionName("property", "property") creates the object itself
.......
Will print Grace Bowden31
Accessing forms
JS automatically treats each form element like an array would be document.form[ 0] etc...
This would be form 0, with 3 elements in it....
Will print 3
-------------------------------------------
Access the form using --- document.form[f#].element[e#].attribute
could have used " document.forms[0].elements[1].name;"
Examples
Example 1
takes form data, compares two values, prints to .innerHTML by ID, converts string to number
Which is bigger?
Example 2
Add's a number a user input to all numbers up to that number and shows result. Verify's number is not negative.
enter a positive number in A?
Notes from the book:
Sun Microsystems made java in 1990’s
Javascript made by Brendan eich at netscape, originally called livescript. Netscape collaborated with sun and it was named javascript.
Is case sensitive
DOM = document object model, winow, web page, and any HTML lelements are objects
Parenthesis go around conditions, brackets encapsulate blocks of commands
Popup Prompt
Change BG color
Var userColor;
userColor = prompt (“Enter a color”);
document.bgColor = userColor;
JQuery
The basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() // hides the current element
$("p").hide() // hides all elements
$(".test").hide() // hides all elements with class="test"
$("#test").hide() // hides the element with id="test"
Access outside (google) CDN
Google CDN:
// version 1
// version 2
Microsoft CDN:
Make available to the webpage
Ready event
To prevent code from running before the document has been loaded, we use the document ready event:
$(document).ready(function(){
// jQuery methods go here...
});
Notes from Les WebProgII
window.document.title is a property of the document object
window.document.write() is a method of the document object
DOM names are case-sensitive (as is Javascript).
Browser Detection
https://www.netwebdev.net/webclass/common/javascript/BrowserSniffer2.htm
a cookie has 6 parameters that can be passed to it:
The name of the cookie,
The value of the cookie,
The expiration date of the cookie,
The path the cookie is valid for,
The domain the cookie is valid for,
The need for a secure connection to exist to use the cookie.
End tags