var year;

var customerEmail;

var todaysDate;

var year = 2011;

if ( condition ) {

  // code goes here

  //

}

if ( condition ) {

  // code goes here

  //

} else {

  // code goes here

  //

}

If (somethingIsTrue){

// code block

}

If (somethingIsTrue)

{

// code block

}

If (somethingIsTrue){ // code block }

=

+ - * /

+= -= *= /=

++    

--

a++

b--

--a

--b

var a = 5;

alert(++a)

var a = 5;

alert(a++)

var result = condition ? true : false

var player12 = 500;

var player2 = 600;

var highScore;

highScore = (playerOne > playerTwo) ? playerOne : playerTwo;

%

* /

+ -

(( 1 + 1 ) / 2)

== <= >= !=

&& AND

|| OR

= assignment

==     equality

===    strict equality

a=1;

while (condition){

a++;

}

do{

a==

} while (condition);

for(var a=1; a<100; a++){

  //runs 99 times

}

for (var a=1; a<100; a++){

  if( imNotDone ){

       // go back to the iteration

       // without doing remaining code for iteration

       continue;

}

  if( imDone ){

       break; // out of loop

}

}

function createMessage(parameters){

  // code to run

return mySomethingVar;

}

var globalVar;

function tempVars(){

  var localVar;

}

var myArray = [];

var myArray = [1,2,3,”mouse”,:tree”,6]

var myArray = new Array(); //object oriented version

var myArray = Array(); //object oriented version

var myArray = Array(5); // 5 slots in the array

var myTwoDimensionalArray = [,];

var foo = 5;

var bar = 5;

console.log(foo+bar); //10

var foo = "5";

var bar = "5";

console.log(foo+bar); //55

var foo = 5;

var bar = "5";

console.log(foo+bar); //55 - one is a string

var foo = 5;

var bar = "5";

console.log(foo*bar); // NaN - not a number

var foo = "55";

var mytest = Number(foo); // make it a Number, NaN if it can't

if (!isNaN(mytest)){

  // do something

}

‘Don’t mix your quotes’ BAD

“Don’t mix your quotes” GOOD

“He said,”Bye” and left”     BAD

“He said,\”Bye\” and left”   GOOD

.length

.toUpperCase()

.toLowerCase()

.split(“,“) // slit at comma

var player1 = {name: "Fred", score: 100000, rank:1};
var player2 = {name: "Sam", score: 19999, rank:2};

function playerDetails(){
    // display info on the players
   
    // if we know this function will be associated with an object..
    console.log(this.name + " has a rank of: " + this.rank +
                            " and a score of " + this.score);

}
 

…

…

player1.logDetails = playerDetails;
player2.logDetails = playerDetails;

player1.logDetails();
player2.logDetails();

Fred has a rank of: 1 and a score of 100000

Sam has a rank of: 2 and a score of 19999

var myElement = document.getElementByID("abc");

document.getElementsByTagName("a");

var mainTitle = document.getElementById("mainTitle");

console.log("This is an element of type: ", mainTitle.nodeType );

console.log("the Inner HTML is ", mainTitle.innerHTML);

console.log("Child nodes: ", mainTitle.childNodes);

var myLinks = document.getElementsByTagName("a");

console.log("Links: ", myLinks.length);

var mainContent = document.getElementById("mainContent");

mainContent.setAttribute("align","right");

var mainTitle = document.getElementById("mainTitle");

console.log(mainTitle.innerHTML);

var sidebar = document.getElementById("sidebar");

console.log(sidebar.innerHTML);

var newHeading = document.createElement("h1");
var newParagraph = document.createElement("p");

newHeading.innerHTML = "Did you know?";
newParagraph.innerHTML = "Califormia produces over 17million gallons of wine each year!";

document.getElementById("trivia").appendChild(newHeading);
document.getElementById("trivia").appendChild(newParagraph);

// create new elements

var newHeading = document.createElement("h1");

var newParagraph = document.createElement("p");

// create associated text nodes....

var h1Text = document.createTextNode("Did you know?");

var paraText = document.createTextNode("Califormia produces over 17million gallons of wine each year!");

// append, instead of create...

newHeading.appendChild(h1Text);

newParagraph.appendChild(paraText);

// append to page DOM..

document.getElementById("trivia").appendChild(newHeading);

document.getElementById("trivia").appendChild(newParagraph);

//Alternatives to APPENDCHILD

// create new element BEFORE THE END

parent.insertBefore(newElement, existingElement);

var myNewElement = docueme.createElement("li");

var secondItem = myElement.getElementsByTagName("li")[1];

myElement.insertBefore(myNewElement, secondItem);

// #1 INLINE scripting

<button onclick="alert('Hello, world');" >

  Run Some JavaScript

</button>

element.event = function();

// #2 ANONYMOUS FUNCTION

myElement.onclick = function(){

  // event handler code ... 

  // ...

  // ...

};

// #3 using DOM addEventListener...

// (event sans 'on', functionname, false)

document.addEventListener('click', myFunction, false);

document.addEventListener('click', anotherFunction, false);

document.removeEventListener('click', anotherFunction, false);

//Browsers incosistent..IE8 and previous

document.attachEvent('onclick', myFunction);

document.onclick = function() {
  alert("You clicked somewhere in the document");
}

document.onclick = function() {
  alert("You clicked somewhere in the document");
}
var myImage = document.getElementById("mainImage");
myImage.onclick = function(){
  alert("You clicked the image");
}

function prepareEventHandlers(){

  var myImage = document.getElementById("mainImage");

  myImage.onclick = function(){

       alert("You clicked the image");

  }

}

window.onload = function(){

  //prep anything we need to

  prepareEventHandlers();   

}

// Two methods for timers - setTimeout and SetInterval (single / repeating)

function simpleMessage() {

  alert("This is just an alert box");

}

// settimeout is in milliseconds

//setTimeout(simpleMessage,5000);

var myImage = document.getElementById("mainImage");

var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",

                    "_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];

var imageIndex = 0;

function changeImage() {

  myImage.setAttribute("src",imageArray[imageIndex]);

  imageIndex++;

  if (imageIndex >= imageArray.length) {

       imageIndex = 0;

  }

}

// setInterval is also in milliseconds

var intervalHandle = setInterval(changeImage,5000);

myImage.onclick =  function() {

  clearInterval(intervalHandle);

};

// handle the form submit event

function prepareEventHandlers() {

  document.getElementById("frmContact").onsubmit = function() {

       // prevent a form from submitting if no email.

       if (document.getElementById("email").value == "") {

             document.getElementById("errorMessage").innerHTML = "Please provide at least an email address!";

             // to STOP the form from submitting

             return false;

       } else {

             // reset and allow the form to submit

             document.getElementById("errorMessage").innerHTML = "";

             return true;

       }

  };

}

// when the document loads

window.onload =  function() {

  prepareEventHandlers();

};

// show and hide sections of a form

function preparePage() {

  document.getElementById("brochures").onclick = function() {

       if (document.getElementById("brochures").checked) {

             // use CSS style to show it

             document.getElementById("tourSelection").style.display = "block";

       } else {

             // hide the div

             document.getElementById("tourSelection").style.display = "none";

       }

  };

  // only hide the form element IF JAVASCRIPT is ENABLED…

  // now hide it on the initial page load.

  document.getElementById("tourSelection").style.display = "none";

}

window.onload =  function() {

  preparePage();

};

myElement.style.color = “#FF000”;

myElement.style.left = “40px”;

myElement.style.backgroundRepeat = “repeat-x”;

myElement.class

myElement.className = “someCSSclass”;

myElement.className= “”;

// prevent a form from submitting

function preparePage() {

  document.getElementById("mainContent").onclick = function() {

        if ( document.getElementById("mainContent").className == "example") {

             document.getElementById("mainContent").className = "";

        } else {

           document.getElementById("mainContent").className = "example";

        }

  };

}

window.onload = function() {

  preparePage();

};

var currentPos = 0;

var intervalHandle;

function beginAnimate() {

  document.getElementById("join").style.position = "absolute";

  document.getElementById("join").style.left = "0px";

    document.getElementById("join").style.top = "100px";

    // cause the animateBox function to be called

    intervalHandle = setInterval(animateBox,50);

}

function animateBox() {

    // set new position

    currentPos+=5;

    document.getElementById("join").style.left = currentPos + "px";

    //

    if ( currentPos > 900) {

        // clear interval

        clearInterval(intervalHandle);

        // reset custom inline styles

        document.getElementById("join").style.position = "";

        document.getElementById("join").style.left = "";

        document.getElementById("join").style.top = "";

    }

}

window.onload =  function() {

  setTimeout(beginAnimate,5000);

};

var score;

var highScore;

var evenHigherScore;

function calculate(){...

function calculateDistance(){...

funtion checkFormFields(){...

var myDate = new Date();

if (x) {

  //...

  //...

} else {

  //...

  //...

}

function animateBox() {

    // set new position

    if ( currentPos > 900) {

        // clear interval

        // reset custom inline styles

    }

}

window.onload =  function() {

  setTimeout(beginAnimate,5000);

};

<!-- loading jQuery BEFORE using it -->

<script src="jquery-1.6.1.min.js"></script>

<script src="script.js"></script>

document.getElementById("myDiv").className = "highlight";

jQuery("#myDiv").addClass("highlight");

jQuery(".someClass")

jQuery("p");

jQuery("a");

jQuery("li");

// able to drill down css selectors

jQuery("p.description");

// use jQuery - basic

//jQuery("#mainArticle").addClass("highlight");

// find all elements with a particular class

//jQuery(".tourDescription").addClass("highlight");

// find all elements with a particular tag

//jQuery("li").addClass("highlight");

// find the last li

//jQuery("li:last").addClass("highlight");

// find any paragraph that contain the word "packages"

//jQuery("p:contains('packages')").addClass("highlight");

document.getElementById("myDiv").classname = "highlight":

jQuery("#myDiv").addClass("highlight");

                  .removeClass("highlight");

                  .toggleClass("highlight");

$("#myDiv").addClass("highlight");

$("what to find").someAction(any params);

// basic

document.getElementById("mainArticle").className = "highlight";

// use jQuery - basic

//jQuery("#mainArticle").addClass("highlight");

// find all elements with a particular class

//jQuery(".tourDescription").addClass("highlight");

// find all elements with a particular tag

//jQuery("li").addClass("highlight");

// find the last li

//jQuery("li:last").addClass("highlight");

// find any paragraph that contain the word "packages"

//jQuery("p:contains('packages')").addClass("highlight");

// EFFECTS

// hide all paragraphs.

//$("p").hide(4000);

//$("p").fadeOut(4000);

// EVENTS

// simple click

// avoid xpath/dom with jQuery.....

//$("#pageID").click(function() {

//   $("#pageID").text("You clicked me!");

//});

// add $(this) to refer to current element

//$("h2").click(function() {

//   $(this).text("You clicked me!");

//});

// add effects - this makes each paragraph fade out when clicked.

//$("p").click(function() {

//  $(this).fadeOut(2000);

//});

// Page load events - instead of window.onload()

//$(document).ready(function () {

//  $("#pageID").text("The DOM is fully loaded.");

//});

// you don't have to worry about accidentally calling it multiple times.

//$(document).ready(function () {

//   $("h1").css("color","red");

//});

var a = document.getElementById("mainTitle");

var b = document.getElementsByTagName("li");

var c = document.getElementsByClassName("myclass");

var d = document.getElementsByClassName("first second");

if (document.getElementsByClassName ) {

  // it exsists, we can us it

  // ...    

} else {

  // it doesn't exists on this browser

}

var myRE = /hello/;

//or

var myRE = new RegExp("hello");

var myString = 'Does thes sentence have the work hello in it?";

if ( myRE.test(myString) ) {

  alert("Yes");  

}

// Prepare the Request

var myRequest;

//feature check!

if (window.XMLHttpRequest){ //firefox, safari

  myRequest = new XMLHttpReuqest();   

} else if (window.ActiveXObject){   //ie

  myRequest = new ActiveXObject("Microsoft.XMLHTTP");

}

// Prepare to accept the Response

myRequest.onreadystatechange = function(){

  console.log("We were called!");

}

// THEN configure and send

myRequest.open("GET","http://mysite.com/somedata.php",true);

myRequest.send(null);

function Player(n) {

//  don't use specific data within the constructor

//  use a parameter to do get the assignment value

//     this.name = "fred";

  this.name = n;

}

// calls the contructor function

// var fred = new Player(); <-- no

var fred = new Player("fred");

var fred = new Player("jeff");

// Simple prototype example

// creating object properties

function Player(n,s,r) {

  this.name = n;

  this.score = s;

  this.rank = r;

}

// creating object method1

Player.prototype.logInfo = function() {

  console.log("I am:" , this.name);

}

// creating object method2

Player.prototype.promote = function() {

  this.rank++;

  console.log("My new rank is: " , this.rank);

}

var fred =  new Player("Fred",10000,5);

fred.logInfo();

fred.promote();

var bob = new Player("Bob",50,1);

bob.logInfo();

bob.promote();

var jane = new Player("Jane",50000,10);

jane.logInfo();

jane.promote();

// two global variables

var secondsRemaining;

var intervalHandle;

function resetPage() {

    document.getElementById("inputArea").style.display = "block";

}

function tick() {

    // grab the h1

    var timeDisplay = document.getElementById("time");

    // turn seconds into mm:ss

    var min = Math.floor(secondsRemaining / 60);

    var sec = secondsRemaining - (min * 60);

    // add a leading zero (as a string value) if seconds less than 10

    if (sec < 10) {

        sec = "0" + sec;

    }

    // concatenate with colon

    var message = min + ":" + sec;

    // now change the display

    timeDisplay.innerHTML = message;

    // stop if down to zero

    if (secondsRemaining === 0) {

        alert("Done!");

        clearInterval(intervalHandle);

        resetPage();

    }

    // subtract from seconds remaining

    secondsRemaining--;

}

function startCountdown() {

    // get contents of the "minutes" text box

    var minutes = document.getElementById("minutes").value;

    // check if not a number

    if (isNaN(minutes)) {

        alert("Please enter a number!");

        return;

    }

    // how many seconds?

    secondsRemaining =  minutes * 60;

    // every second, call the "tick" function

    intervalHandle = setInterval(tick, 1000);

    // hide the form

    document.getElementById("inputArea").style.display = "none";

}

// as soon as the page is loaded...

window.onload =  function () {

    // create input text box and give it an id of "minutes"

    var inputMinutes = document.createElement("input");

    inputMinutes.setAttribute("id", "minutes");

    inputMinutes.setAttribute("type", "text");

    // create a button

    var startButton = document.createElement("input");

    startButton.setAttribute("type", "button");

    startButton.setAttribute("value", "Start Countdown");

    startButton.onclick = function () {

        startCountdown();

    };

    // add to the DOM, to the div called "inputArea"

    document.getElementById("inputArea").appendChild(inputMinutes);

    document.getElementById("inputArea").appendChild(startButton);

};

function adjustStyle() {

    var width = 0;

    // get the width.. more cross-browser issues

    if (window.innerHeight) {

        width = window.innerWidth;

    } else if (document.documentElement && document.documentElement.clientHeight) {

        width = document.documentElement.clientWidth;

    } else if (document.body) {

        width = document.body.clientWidth;

    }

    // now we should have it

    if (width < 600) {

        document.getElementById("myCSS").setAttribute("href", "_css/narrow.css");

    } else {

        document.getElementById("myCSS").setAttribute("href", "_css/main.css");

    }

}

// now call it when the window is resized.

window.onresize = function () {

    adjustStyle();

};

img {

    display: none;

}

      <div id="accordion">

        <h3><a href="#">Customer notifications</a></h3>

        <div>

          <p>When you book a tour with Explore California, you should receive two notifications via email. The first will be a <strong>tour confirmation</strong>, which states that your tour is booked, gives you the dates of your tour, and lists all amenities included in your package. The second notification should arrive two weeks prior to the start of your tour. This will be a <strong>reminder notification</strong> and will contain your tour dates and current tour conditions, if applicable. <em>If you do not receive a confirmation within 24 hours, or the reminder notification two weeks out, contact us immediately</em>. We’ll make sure there are no problems in the system and confirm your tour.</p>

        </div>

        <h3><a href="#">Tour vouchers</a></h3>

        <div>

          <p>Some tour packages include tour vouchers. These tour vouchers allow you to participate in optional activities during a tour and are usually scheduled for downtime or as an optional choice to replace the day’s featured activity. The vouchers are only good during the tour and have no cash value, and cannot be redeemed if the tour is not taken. The tour vouchers are negotiated with 3rd party vendors. Although Explore California monitors these vendors closely, we cannot guarantee that scheduled activities will take place.</p>

        </div>

        <h3><a href="#">Trip planning</a></h3>

        <div>

          <p>After registration, you will be sent a PDF trip planning document specific to your tour. In the Trip Planner we offer packing advice, places of interest along the tour route, a historical and environmental overview of the tour, a list of any required equipment for the tour that is <em>not</em> provided by Explore California, and additional resources for researching the surrounding area and points of interest included in your tour. Additional information about specific tours can be found in our FAQ section.</p>

        </div>

        <h3><a href="#">Tour checklist</a></h3>

        <div>

          <p>As you prepare for your tour, we want to make sure that you have everything you need to fully enjoy your time in California. Having everything in place when you arrive makes it easy to sit back and enjoy all that your tour has to offer. With that in mind, we’ve prepared a small checklist to help you make sure you’re ready to go!</p>

          <ul>

            <li>Have you arranged for your mail/paper deliver?</li>

            <li>Are friends/family aware of your itinerary?</li>

          </ul>

        </div>

      </div>

…

…

…

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

<script src="script.js"></script>

</body>

</html>

window.onload = function () {

   $("#accordion").accordion();

};