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
JQUERY
A popular javascript library that you can use to help add additional functionality to your site
Introduction to javascript An Intro
LWD: week 11
By shadow4611
LWD: week 11
- 905