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

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

LWD: week 11

By shadow4611