basic starter functions

for the following examples, we gonna use the basic in and out functions

  • alert
  • prompt

output

alert('hello world');

can also be written

window.alert('hello world');

input

var name = prompt("what is your name");
alert(name)

firebug

With firebug, we can input and output variables, directly on the console try typing

var name="bob";

then simply followed by Enter

name

While debug, you can also use

var name="jack";
console.log(name);

This may cause a bug on some users that haven't Firebug installed on their machine

Variables

  • string
  • numeral
  • float
  • booleans
  • arrays
  • dates
  • maths
  • regexp
  • other objects

strings

Let's use strings with console log

var name=prompt("what is your name?");
console.log(name);

use the + sign to concatene (to stick text things together

console.log("A"+" very"+" long"+" way.")

Make a script that writes in the console : ”Mary have a red carpet.” where emphasis elements are dynamic

Strings have properties and methods :

sample property :

var txt="Hello world!";
console.log(txt.length);

sample method :

var txt="Hello world!";
console.log(txt.toUpperCase());

numbers

var number = 6;
console.log(number*7);

parseInt

parseInt transforms a string into a number (when possible)

var number = "6 angry white bears";
console.log(parseInt(number)*7);

(parseFloat works the same way)

isNaN

isNaN detects if the variable is a numeral

var text = "hello";
var number = 6;
 
if(!isNaN(text)){
	console.log(text+"is a number");
}
if(!isNaN(nuber)){
	console.log(number+"is a number");
}

Make a script that prompts a number, add 5 then multiply by 7 (check first if the input is truely a number).

booleans

var mybool = true;
if(mybool){
	console.log(mybool);
}

You can also create a boolean by

var myBoolean=new Boolean(false);

What do those declarations return, and why ?

var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Gaspard");

arrays

Arrays can be defined easily using the Array object:

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

You can use the condensed way too

var crs=new Array("Saab","Volvo","BMW");

And if you're l33t, use the JSON style, yay !

var cars=["Saab","Volvo","BMW"]

A useful property of an array is its length

console.log(cars.length);

We mostly use loops to access to arrays, but still we can play with them by using

  • concat() to join several arrays
  • join() to join all elements of an array into a string
  • pop() to remove the last element of an array
  • shift() to remove the first element of an array
  • push() to add new elements to the end of an array
  • reverse() to reverse the order of the elements in an array
  • slice() to select elements from an array
  • sort() to sort an array (alphabetically and ascending)
  • splice() to dd an element to position 2 in an array - splice()
  • toString() to convert an array to a string
  • unshift() add new elements to the beginning of an array

Create two arrays : cars and colors having the same length of 10 elements, then write a list of 3 cars such as Red BMW, Blue Volvo, White Opel.

dates

The Date object is used to work with dates and times.

Date objects are created with the Date() constructor.

There are four ways of instantiating a date:

new Date(); // current date and time
new Date(milliseconds); //milliseconds since 1970/01/01
new Date(dateString);
new Date(year, month, day, hours, minutes, seconds, milliseconds);

Most parameters above are optional. Not specifying, causes 0 to be passed in.

Once a Date object is created, a number of methods allow you to operate on it. Most methods allow you to get and set the year, month, day, hour, minute, second, and milliseconds of the object, using either local time or UTC (universal, or GMT) time.

All dates are calculated in milliseconds from 01 January, 1970 00:00:00 Universal Time (UTC) with a day containing 86,400,000 milliseconds.

Some examples of instantiating a date:

today = new Date();
d1 = new Date("October 13, 1975 11:13:00");
d2 = new Date(79,5,24);
d3 = new Date(79,5,24,11,33,0);

We can easily manipulate the date by using the methods available for the Date object.

In the example below we set a Date object to a specific date (14th January 2010):

var myDate=new Date();
myDate.setFullYear(2010,0,14);

And in the following example we set a Date object to be 5 days into the future:

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

Note: If adding five days to a date shifts the month or year, the changes are handled automatically by the Date object itself!

The Date object is also used to compare two dates.

The following example compares today's date with the 14th January 2010:

var myDate=new Date();
myDate.setFullYear(2010,0,14);
var today = new Date();
 
if (myDate>today){
	alert("Today is before 14th January 2010");
}
else{
	alert("Today is after 14th January 2010");
}

Using getDay(); display (in french) the day of today. This can be useful :

var weekday=["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];

maths

I hate maths so let's do it quick and stick to the basics :

  • Math.floor(); rounds a number as its lower value
  • Math.ceil(); rounds a number as its upper value
  • Math.round(); rounds a number as its nearest value
  • Math.random(); picks a number by chance
Math.floor(4.3);
Math.floor(4.7);
Math.ceil(4.3);
Math.ceil(4.7);
Math.round(4.3);
Math.round(4.7);
 
Math.random();

The useful combination is

Math.floor(Math.random()*11);

regexp

go on http://www.w3schools.com/js/js_obj_regexp.asp (and come back some day)

other objects

we can use the JSON syntax to play with objects. Anonymous functions are kewl too.

var object = {
	name:"myobject",
	execute:function(){
		return this.name;
	}
}
object.name="bob";
object.execute();

DOM

DOM stands for Document Object Model, here is where the fun begins Let's go live and discuss it based on https://developer.mozilla.org/en/the_dom_and_javascript

ressources/javascript/basics.txt · Last modified: 2013/06/16 22:51 (external edit)
 
 
Creative Commons License Powered by PHP Valid XHTML 1.0 April