Intro to Javascript

CSIT570 10/3/2013
cool.


About JavaScript

  • Developed at Netscape by Brendan Eich
  • Not Java!
  • Client-side script
  • Interpreted by the browser
  • used to access and modify the DOM


DOM

Document Object Model

  • convention for markup object interaction
  • language independent
  • cross-platform


Javascript vs. java

why even ask this?

  • Java is an object-oriented programming language
  • JavaScript is an object-based scripting language

Embedding Javascript in htmL


externally

  <script type="text/javascript" src="my-script.js"></script>

internally

<script type="text/javascript">
   
    // our statements go in here

</script>


statements & variables

  • each instruction is a statement
  • we use variables to store values


Primitive types

  • Number - whole or float
  • String - immutable string of characters
  • Boolean - true or false
  • Undefined - not defined yet
  • Null - explicitly empty


Declaring variables


var myNumber,
    myString,
    anotherNumber = 12,
    anotherString = 'Hello world!'; 
var myNumber;var myString;var anothernumber = 12;var anotherString = 'Hello world!';
myString = 'Hello everyone!';


Variables

  • begin: letters, $, _
  • contain only: letters, numbers, $, _
  • case sensitive
  • naming conventions - stick to them!
    • (I prefer camel case)
  • can store values & expressions
  • use typeof to find out the types

TO THE CONSOLE!


COMMENTS


/* a multi-line
   comment
   oh yeah */

// a single line comment 
x = 3;y = x * 3; // a single line comment after a statement!


Operators


++
--
-
+
*
/
%

FUnctions

they're a collection of statements, and there are multiple ways to declare them (we'll get into why next time)

function myFunction() {
  // my statements run here
  console.log('my first function!');
}

myFunction(); 

var myFunction = function(){
    // my statements run here
    console.log('my first function!'); 
};

myFunction();

Functions


  • arguments
  • return values
  • function scope
  • you can declare functions within functions 


    whaaaaaat


write, alert, prompt


document.write('this will be written to screen');

alert('this will pop up an alert');

prompt('this will ask the user for a prompt and return the value'); 


some useful functions for today's upcoming exercise


var myElement = getElementByID('my-element-id');
myElement.innerHTML = "whatever HTML I want to assign";

An exercise in prompts


1. Create an HTML document
* title
* your name
* content: a poem

2. Style your HTML document
* external style.css document

3. Wrap different words of the poem in span tags with different IDs

AN EXERCISE IN PROMPTS

pt. 2

4. Internal JavaScript
* prompt user to enter word for each span tag
* replace HTML within span tag with the user's response
Made with Slides.com