Introduction to javascript

An Intro

What is Javascript?


A client-side scripting language used to create advanced functionality & interactivity on web sites.

  • used to create simple animation and slide shows
  • used to validate forms
  • used in conjunction with server-side programming language to create "search" functionality
  • show/hide content
  • light boxes

adding javascript to a page


  • in between <head></head> tag, in the footer or external .js fileyou can embed Javascript 

<script type ="text/javascript">
     JavaScript goes here
</script>


Link out to a JavaScript file
<script src="linktofile.js"></script>


 

Javascript syntax


  • is case sensitive
  • is like most programming languages out there

Statements


  • A command that tells the browser what to do

alert("Your form has been submitted");

Comments


  • Like HTML & CSS comments, JavaScript comments will not be read by the browser.
  • Good for leaving yourself notes on what is happening with the script

//single line comment

/*multi line comment*/
 

variables


  • stores information
  • give it a name and assign it a value
  • values can be numbers, a text string, an element in the DOM or a function

var age=10;

naming variables


  • must start with a letter or an underscore
  • may contain numbers, letters and underscores
  • cannot contain spaces or special characters

Data types FOR VARIABLES


  • values that we can assign variables to
  • Undefined
  • Null
  • Numbers
  • Strings
  • Booleans

undefined

  • When you create a variable name but don't assign it a value, the data type is undefined

var age;
alert(age);

The above will open an alert with the value "undefined"

null

  • You defined a variable but give it no inherit value

var age="null";
alert (age);

The above will open in alert box with the value null

Numbers

  • You can assign variables to numeric values

var age=10;
alert(age);

The above will open an alert box containing the number 10

alert(age + age);

strings

  • A line of text set as a variable value

var street="Madison Ave";
alert(street);

The above will open an alert box with the value Madison Ave

alert (street + street);
alert (age + street);

boolean

  • assigns a "true" or "false" value to a variable;
  • don't have to use quotation marks around the value because they are keywords in JavaScript

var sleep=true;

The above assigns the variable sleep to true

Comparison Operators

  • used to compare 2 or more values

== is equal to
!= is not equal to
=== is identical to
!== is not identical to
> greater than
< less than
>= is greater than or equal to
< = is less than or equal to

comparison operators

alert (5==5);
alert (5<1);

mathematical operators

  • performs math functions on numeric values

+= Adds the value to itself
++ Increase the value of a number by 1
-- Decreases the value of a number by 1

functions

  • JavaScript code that doesn't run until called

functionname(argument, argument){
  code to execute
}


functionname(){
  code to execute
}

native functions in javascript

Built in functions
  • alert(), confirm(), and prompt(); - trigger dialog boxes
  • Date(); - returns the current date and time
  • parseInt("123")- will take a string containing numbers and turn it into a number data type. The string is then passed to a function
  • setTimeout(functionname, 5000)- will execute the function after a timed delay

custom functions

function name(){
    function code goes here
}

function testme(){
  alert("Testme just ran!");
}

testme();

the browser object

  • JavaScript allows you to control certain elements of the browser

event - represents the state of an event
status- set or returns the text in a status bar
alert - displays an alert box
close - closes the current window
confirm - displays a dialogue box with a message and an ok and cancel button

javascript events

  • Events that JavaScript can "listen" or watch for
  • Common methods are as an HTML attribute, method attached to the element, and using AddEvent Listener


as a method

window.onclick=myFunction; 

myFunction will run when the user clicks on anything in the browser window

Can only bind one event at a time to this method
  • window.onclick=onefunction;
  • window.onclick=anotherfunction;

 

addeventlistener

  • Best way to add an event
  • Can bind multiple object and easy to maintain

window.addEventListener("click", myfunction);

POLYFILLS

Help normalize behaviors across all browsers using Javascript

Used to help create HTML 5 functionality that a browser may not support
  • HTML 5 shiv (shim)
  • Modernizr
  • Repond.js

  • JQUERY

    A popular javascript library that you can use to help add additional functionality to your site
    Made with Slides.com