Scribd Logo
Upload

Welcome to Scribd!

  • Lect 74 Up

    Uploaded by

    postscript
    21 views8 pages
    Javascript allows functions or actions to be performed on the fly. HTML is static, that is you can't change or execute commands in real-time. Javascript is an extremely useful tool, but some older browsers don't support it.

    Original Description:

    Original Title

    lect74up

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PS, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Javascript allows functions or actions to be performed on the fly. HTML is static, that is you can't change or execute commands in real-time. Javascript is an extremely useful tool, but some older browsers don't support it.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PS, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    21 views8 pages

    Lect 74 Up

    Uploaded by

    postscript
    Javascript allows functions or actions to be performed on the fly. HTML is static, that is you can't change or execute commands in real-time. Javascript is an extremely useful tool, but some older browsers don't support it.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PS, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    Javascript

    • HTML is static, that is you can’t change or execute commands


    in real-time.
    • Javascript allows functions or actions to be performed on the
    Javascript
    fly.
    • Javascript is a scripting language.
    • Embed Javascript into HTML to add dynamic features and
    runtime execution to the web page.

    1 2

    Your first piece of Javascript


    Be careful !
    <HTML>
    • Javascript is an extremely useful tool, but some older browsers <HEAD>
    don’t support Javascript ! <SCRIPT language="JavaScript">
    • When using Javascript it is a good idea to hide your Javascript <!-- hide
    from older browsers ! alert("Hello World");
    -->
    • This will ensure that the browsers that support Javascript will </SCRIPT>
    execute the code, whilst those that don’t will just ignore it and </HEAD>
    carry on a usual !! <BODY BGCOLOR="lightblue">
    • A good online resource for Javascript is the following web page Congratulations you’ve just seen your
    http://hotwired.lycos.com/webmonkey/programming/ first piece of Javascript !
    javascript/tutorials/tutorial1.html </BODY>
    </HTML>

    3 4
    Explanation
    • Ok, so we can see that the Javascript is contained in the
    HEAD section and is enclosed within the hSCRIP T i and Variables
    h/SCRIP T i tags. This tells the browser to expect some • Javascript is a programming language and as such we have all
    Javascript and makes sure that it is interpreted correctly. the usual programming language essentials such as variables,
    • Note how the actual Javascript code is placed within a loops, arrays, functions etc.
    comment. This ensures that the older browsers will just ignore • Lets take a look at a piece of Javascript that uses variables to
    it but that newer browsers will be able to execute it. calculate some things for the user.
    • The actual Javascript will make a pop up alert box appear • We can then move on to some more interesting scripts
    with the message “Hello World !” in it. involving loops, arrays and functions !
    • This is a very simple example, there are much more powerful
    things that can be done using Javascript !

    5 6

    How many seconds in a year ?


    <HTML> </HEAD>
    <HEAD> <BODY BGCOLOR="lightblue">
    <SCRIPT language="JavaScript"> <P>
    <!-- Hide There are <SCRIPT language="Javascript"> <!-- hide
    var secs_per_min=60; document.writeln(secs_norm_year);
    var mins_per_hour=60; -->
    var hours_per_day=24; </SCRIPT> seconds in a normal year ! </P>
    var days_norm_year=365; <P> There are <SCRIPT language="JavaScript"> <!-- hide
    var days_leap_year=366;
    document.writeln(secs_leap_year);
    var secs_norm_year = secs_per_min * mins_per_hour *
    -->
    hours_per_day * days_norm_year;
    </SCRIPT> in a leap year. </P>
    var secs_leap_year = secs_per_min * mins_per_hour *
    </BODY>
    hours_per_day * days_leap_year;
    </HTML>
    -->
    </SCRIPT>

    7 8
    Defining Variables
    • In Javascript a variable is introduced using the var keyword Strings
    e.g. var secs per min
    • In the previous example we saw the use of variables to store
    • Variables should begin with a lowercase letter or an underscore numeric information, we can also use variables to store strings.
    and can contain characters or numbers.
    • In the last example we also saw the use of document.writln()
    • Variable names are case sensitive i.e. SECS PER MIN is not the which allows Javascript to write its output to the web page !
    same as secs per min - be very careful !
    • Let’s look at a small example that uses some strings.
    • Variable declarations, just like Javascript commands, must be
    terminated with a semicolon !

    9 10

    <HTML>
    <HEAD>
    <SCRIPT language="JavaScript">
    <!-- Hide
    var my_string="Hi Students this is the Conditionals
    Internet Systems course !"; • Just as in other programming languages such as Java, C, Visual
    --> Basic etc. Javascript allows the uses of choices (if-then-else) !
    </SCRIPT>
    • We can make a choice based on some input from the user.
    </HEAD>
    <BODY BGCOLOR="lightblue"> • Depending on the users choice we can execute different
    <SCRIPT language="JavaScript"> <!-- Hide commands/actions
    document.writeln(my_string); • Let’s look at a simple example !
    -->
    </SCRIPT>
    </BODY>
    </HTML>

    11 12
    <HTML> if(decision == "yes")
    <HEAD> {
    <SCRIPT language="Javascript"> document.writeln(name + " likes Mathematics !");
    <!-- Hide }
    var name = prompt("What is your name ?","Your name"); else
    var decision = prompt("Do you like like Mathematics?" {
    ,"Type yes or no"); document.writeln(name + " doesn’t like
    --> Mathematics !");
    </SCRIPT> }
    </HEAD> -->
    <BODY BGCOLOR="lightblue"> </SCRIPT>
    <SCRIPT language="JavaScript"> </BODY>
    <!-- Hide </HTML>

    13 14

    Link Events
    • Have you ever noticed “strange” things happening when you
    Explanation click or move over a URL ?
    • This simple example illustrates that we can get input from the • Whenever you move/click a URL a link event occurs.
    user and based on this perform some action.
    • Javascript can detect these link events !
    • Conditionals can be useful, such as identifying what browser
    • We can make use of this to perform actions using Javascript
    someone has and then acting accordingly !
    • Most well known link events are OnMouseOver and OnClick
    • You should take a look at Thau’s Javascript tutorial to get a
    feel for what can be done using conditionals. • Can catch these events within a hAHREF =i tag.
    • No need to use hSCRIP T i h/SCRIP T i tags as Javascript can
    detect the link events !

    15 16
    <HTML> Image Swapping
    <HEAD> <TITLE> Link events </TITLE> </HEAD>
    • Have you ever wonder how when you move over an image and
    <BODY BGCOLOR="lightblue">
    it changes, how this is done ?
    See what happens when you move over this <A
    HREF="http://www.dcs.kcl.ac.uk", onMouseOver=" • The answer is we use the link events in combination with
    alert(’Are you sure you want to leave ?’);"> images to make the changes !
    link </A>.
    • This allows us to swap images on the fly !
    </BODY>
    </HTML> • Let’s see exactly how this is done !

    17 18

    Loops

    <HTML> • Sometimes we may want to repeat things over and over - We


    <HEAD> <TITLE> Swapping images ! </TITLE> </HEAD> can use Javascript to help us !
    <BODY BGCOLOR="lightblue">
    • Just like in Java we can use loops !
    <A HREF="#", onMouseOver="document.the_bike.src=
    ’duc_pit2.jpg’;"> <IMG SRC="./images/Superbikes • We could use a for loop if we want to perform something a
    /duc_pit1.jpg" NAME="the_bike"> </A> certain number of times.
    </BODY> • More often we want to repeat the loop until some condition is
    </HTML> met.
    • Let’s take a look at both constructs.

    19 20
    <HTML>
    <HTML>
    <HEAD> <TITLE> Let’s count ! </TITLE>
    <HEAD> <TITLE> While.... ! </TITLE>
    <SCRIPT language="Javascript">
    <SCRIPT language="Javascript">
    <!--
    <!-- var counter=0; -->
    var counter=0;
    </SCRIPT>
    -->
    </HEAD>
    </SCRIPT>
    <BODY BGCOLOR="lightblue">
    </HEAD>
    <SCRIPT language="JavaScript"> <!--
    <BODY BGCOLOR="lightblue">
    while(counter !=10) {
    <SCRIPT language="JavaScript"> <!--
    counter= prompt("What is the magic number ?",
    for(counter=0;counter<100;counter++) {
    "hint: priministers residence");}
    document.writeln(counter + "<BR>");}
    -->
    -->
    </SCRIPT>
    </SCRIPT>
    </BODY>
    </BODY>
    </HTML>
    </HTML>

    21 22

    <HTML>
    <HEAD> <TITLE> Arrays </TITLE> </HEAD>
    <BODY BGCOLOR="lightblue">
    <SCRIPT language="JavaScript"> <!--
    Arrays var fruits = new Array("Apples","Pears","Oranges",
    • Sometimes we may want to store more than one value. "Bananas","Grapes","Peaches");
    var counter=0;
    • We could do this by declaring a number of related variables,
    while(counter < 6){
    but it’s much easier to declare an array !
    counter=prompt("Which index do you want",
    • Javascript can use arrays and combine these with loops and "< 6 is good");
    other constructs to perform useful functions. document.writeln("You chose " +
    • Let’s take a look at some examples. ! fruits[counter] + "<BR>" ); }
    -->
    </SCRIPT>
    </BODY>
    </HTML>

    23 24
    <HTML>
    <HEAD> <TITLE> Javascript functions </TITLE>
    <SCRIPT language="JavaScript">
    <!-- Hide
    Functions function hello() {
    • We’ve seen how to use variables, conditionals, link events and document.writeln("Hello World ! <BR>");}
    arrays, let’s combine these and start to write some functions. -->
    </SCRIPT>
    • It is often useful to include some functions in our we page if we </HEAD>
    plan to pass some dynamic information to the person viewing <BODY BGCOLOR="lightblue">
    the page ! <SCRIPT language="JavaScript"> <!--
    • Enough talk, let’s see a simple function. hello();
    -->
    </SCRIPT>
    </BODY>
    </HTML>

    25 26

    <HTML>
    <HEAD> <TITLE> Javascript functions </TITLE> <HTML>
    <SCRIPT language="JavaScript"> <HEAD> <TITLE> Javascript functions </TITLE>
    <!-- var name; <SCRIPT language="JavaScript">
    function hello(name) { <!-- Hide
    document.writeln("Hello " + name + " ! <BR>"); } var name;
    --> var age;
    </SCRIPT> function calc(name,age)
    </HEAD> {
    <BODY BGCOLOR="lightblue"> document.writeln("Hello " + name + "you are " + age
    <SCRIPT language="JavaScript"> <!-- " years old ! <BR>");
    name = prompt("What is your name ?",""); }
    hello(name); --> -->
    </SCRIPT> </SCRIPT>
    </BODY> </HEAD>
    </HTML>

    27 28
    <BODY BGCOLOR="lightblue"> Conclusions
    <SCRIPT language="JavaScript"> <!--
    • Javascript is an extremely useful tool.
    name = prompt("What is your name ?","");
    age = prompt("How old are you ?",""); • Javascript allows functions and commands to be executed in
    calc(name,age); real-time within a web page without the need for CGI.
    -->
    • The best way to understand Javascript is to have a look at
    </SCRIPT>
    some documentation and play around yourself !
    </BODY>
    </HTML> • Go and have a play !

    29 30

    You might also like