Javascript intro
This presentation is the property of its rightful owner.
Sponsored Links
1 / 23

javascript intro PowerPoint PPT Presentation


  • 92 Views
  • Uploaded on
  • Presentation posted in: General

javascript intro. doug turnbull Topic 14a cs205 advanced web programming. server. client. request. web server. server-side program. JavaScript. response. client-side program. database. JavaScript. Not Java! Interpreted Scripting Language (like PHP) Object-Oriented (like C++, Java)

Download Presentation

javascript intro

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Javascript intro

javascriptintro

doug turnbull

Topic 14a

cs205

advanced web programming

Turnbull - CS205 - Topic 14a


Javascript intro

server

client

request

web server

server-side program

JavaScript

response

client-side program

database

Turnbull - CS205 – Topic 14a


Javascript

JavaScript

Not Java!

Interpreted Scripting Language (like PHP)

Object-Oriented (like C++, Java)

Syntax like C, C++, & Java

Lightweight (unlike Java)

Turnbull - CS205 - Topic 14a


Purposes

Purposes

Dynamic webpages - fewer page reloads

  • modify text

  • react to events

    • mouse, keyboard actions from user

  • validate data on forms

  • create cookies

  • adapt page to specific web browser

    Fewer page reloads = faster (better) user experience!

Turnbull - CS205 - Topic 14a


Hello world

Hello World

<html><body>

<script type="text/javascript">

document.write("Hello World!");

</script>

</body>

</html>

Turnbull - CS205 - Topic 14a


Embedding code

Embedding Code

  • Create a <script></script> block in HTML

  • Add external file

    • <script src=“myCode.js”> </script>

      Can have multiple blocks or files

      Code executed from top to bottom

    • variables & functions can be shared across blocks

    • Place common functions in <head>

Turnbull - CS205 - Topic 14a


Environment

Environment

Access to browser

  • navigator,window,location,history objects

  • browser, version, OS, cookies enabled, url, etc.

  • try_nav_all example

    • http://www.w3schools.com/js/tryit.asp?filename=try_nav_all

      Access to document

  • document object

  • Document Object Model (DOM)

  • set/get cookies, form validation, button animation, image map, timed events

Turnbull - CS205 - Topic 14a


Basics

Basics

Case sensitive

Statements end with semi-colon;

Variables and functions names

  • Declare with var

    • var firstname = “alex”;

  • start with letter, _ or $

  • can use digits but not as first character

    Comments

  • //single line comment

  • /* multi-line comment */

Turnbull - CS205 - Topic 14a


Numbers

Numbers

Everything is a floating point number

  • var x = 1/4; //equals 0.25;

    Operation: +, -, *, /, %, ++, --

    Assignment: =, +=, -=, *=, /=, %=,

  • var x = 5;

  • x *= 3; //x now equals 15

    Comparison: ==, !=, >, >=, <, <=, ===

  • === //identity for value and type

    Print number

  • x.toString();

Turnbull - CS205 - Topic 14a


Strings

Strings

Unicode Characters

Single or Double Quote

Special Characters: \n \t \& \\ \” \’

Concatenate with +

  • var myName = “Jane” + ” “ + ”Doe”;

    Length Property: myName.length

    charAt(pos) & substring(sPos, ePos) functions

  • “Lunch”.charAt(2); // “n” is the character

Turnbull - CS205 - Topic 14a


Boolean

Boolean

  • true & false

  • used for conditional statements

  • not much more to say,

  • really.

Turnbull - CS205 - Topic 14a


Control statements

Control Statements

Conditionals:

if (condition){}

else if (condition){}

else {}

switch/case

Loops:

while(condition){}

for(start; condition; increment){}

break & continue

Turnbull - CS205 - Topic 14a


Functions

Functions

Define function

function foo (var1, var2, …){

//my code here

return someValue;

}

Use function

<script>

foo(3.2, “Bobby”);

</script>

Turnbull - CS205 - Topic 14a


Example demo

ExampleDemo

<html>

<head>

<script type="text/javascript">

function displaymessage()

{

alert("Hello World!");

}

</script>

</head>

<body>

<form>

<input type="button" value="Click me!" onclick="displaymessage()" />

</form>

</body>

</html>

Turnbull - CS205 - Topic 14a


Objects

objects

New operator creates new objects

  • var a = new Object();// generic object

  • var b = new Date(); // built-in objects

  • var c = new MyObject();// custom objects

    Built in objects

  • Array, Boolean, Date, Math, Number, String, RegExp, Global

  • see w3school JavaScript Reference for details

Turnbull - CS205 - Topic 14a


Custom objects

Custom Objects

function Point (xVal,yVal) {

this.x = xVal;

this.y = yVal;

this.len = function() {

return Math.sqrt(this.x * this.x + this.y*this.y);

};}

var p = new Point(2,3);

Document.write(p.len());

Turnbull - CS205 - Topic 14a


Exercise 1

Exercise 1

Add a second function to the point class that prints out all the info about a point.

  • Use the Chrome JavaScript Console

  • view -> developer -> JavaScript Console

Turnbull - CS205 - Topic 14a


Arrays

Arrays

JavaScript Object

Elements do NOT have to be the same type

var a = new Array();

a[0] = “pizza”;

a[1] = 2.718;

a[2] = false;

Length Property

  • var b = a.length;

    Methods:

  • reverse(), sort(), slice(), push(), pop()

Turnbull - CS205 - Topic 14a


Exercise 2

Exercise 2

Try to write a email validator!

Turnbull - CS205 - Topic 14a


Exercise 2 demo

Exercise 2Demo

<form action="submit.php" onsubmit="return validate_form(this);" method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

  • function validate_form(thisform)

  • {

  • //thisform.email.value is string to check

  • /*if bad email address

  • alert(“Bad Email Address”);

  • return false

  • else return true; */

  • }

Turnbull - CS205 - Topic 14a


Exercise 2 demo1

Exercise 2Demo

function validateForm()

{

varx = document.forms["myForm"]["email"].value;

varatpos = x.indexOf("@");

vardotpos = x.lastIndexOf(".");

if(atpos < 1 || dotpos < atpos+2 || dotpos+2 >= x.length)

{

alert("Not a valid e-mail address");

return false;

}

return true;

}

Turnbull - CS205 - Topic 14a


Debugging js on chrome

Debugging JS on Chrome

View > Developer > JavaScript Console

Turnbull - CS205 - Topic 14a


Reading w3schools js tutorial

Reading – w3schools JS Tutorial

Turnbull - CS205 - Topic 14a


  • Login