Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Intro To Dreamweaver and Javascript

    Hochgeladen von

    api-218675166
    55 Ansichten27 Seiten
    WYSIWYG: what you see is what you get Fast development Ability to tweak code utilizing the Code View Therefore, you give up nothing. Dreamweaver is not a panacea it does not include all HTML code / options; therefore, manual intervention is often required.

    Originalbeschreibung:

    Originaltitel

    intro to dreamweaver and javascript

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PPT, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    WYSIWYG: what you see is what you get Fast development Ability to tweak code utilizing the Code View Therefore, you give up nothing. Dreamweaver is not a panacea it does not include all HTML code / options; therefore, manual intervention is often required.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    55 Ansichten27 Seiten

    Intro To Dreamweaver and Javascript

    Hochgeladen von

    api-218675166
    WYSIWYG: what you see is what you get Fast development Ability to tweak code utilizing the Code View Therefore, you give up nothing. Dreamweaver is not a panacea it does not include all HTML code / options; therefore, manual intervention is often required.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 27

    Intro to Dreamweaver

    Why Dreamweaver?
    WYSIWYG: What you see is what you get Fast development Ability to tweak code utilizing the code

    view. Therefore, you give up nothing. W3C Compliant In addition to HTML, it can help you write code for server side technologies such as JSP and ASP.NET

    Dreamweaver is not a panacea


    It is not free It does not include all HTML code/options;
    therefore, manual intervention is often required. You should know HTML to get the most out of the product The current version is not XHTML compliant

    Dreamweaver Views
    Design View
    WYSIWYG Like a word processing tool or other IDE such as MS Visual Studio

    Code View
    Shows the actual HTML code that will be created

    Dreamweaver Tools
    Property Inspector
    Tag Selector
    When you click on a given element, the property inspector shows its attributes and allows you to modify them Enables the designer to view the tags used for a particular block of text, and to edit a tag and its contents Shows a hierarchy of tags starting with the top-left tag

    Dreamweaver Tools
    DTD validation allows you to validate code
    File Check Page validate markup

    Tag chooser
    Enables you to choose from all tags available to HTML Arranged in categories Includes entries for server-side languages

    Dreamweaver tools
    Document window
    Allows you to view your document in various resolutions Allows you to see estimated download times

    Help function
    Dont be afraid to use it when you get stuck!

    Folder Structure
    Planning is important! Especially when you
    are building a large site! Standards
    Images folder js folder css folder Object or functional groupings

    The anatomy of a URL


    http://www.yoursite.com/yourfolder/yourfile.html

    Identify
    Protocol Domain Name Folder File

    Domain Names
    The top level domains include .com
    (commercial), .net, .org, .mil, .gov, .edu, country codes (.us, .uk, .ca), .bix, .info, .museum, .name, .xxx A domain name server (DNS) translates the domain name into an IP address.

    System Development Life Cycle


    Systems Analysis
    What are the functions the system will perform? Buy goods, view schedule, register, etc

    Design
    Storyboards, folder structure, development technology and patterns, naming conventions

    Development Testing Production

    Using Dreamweaver
    Go for it
    Build Headers, Images, <br />, <p> Demonstrate Split Screen views (refresh required) Text insert Bar Formatting, linebreaks, and special characters Blockquote and cite attribute Ordered, unordered, definition lists HTML Insert <hr> and using css on <hr>

    Intro to JavaScript

    Javascript
    Javascript is the most popular scripting language

    on the web It allows you to improve design, validate forms, write cookies, detect browsers, create dynamic content, and more Javascript is NOT Java, though the syntax is simliar Like HTML, Javascript is a client-side language (though there are server-side implementations) Unlike HTML, it is a real programming language

    What is Javascript?
    It was designed to add interactivity to
    HTML pages It is a scripting language (lightweight) It is an interpreted language (it is executed without preliminary compilation) Everyone can use it without purchasing a license

    Your first Javascript


    alert(Hello World!);

    This will create a popup box that says


    Hello World

    Places to put Javascript


    Like CSS, scripts can be put in one of
    three places:
    Inline: a script that is part of an HTML element and is launched when an event occurs to that element Embedded: code and functions declared in the <head> of the document. External: functions declared in a separate document and referred to in the <head>

    Javascript is event-driven
    In order for a script or function to be
    executed, something has to happen to trigger it Examples

    <body onload=alert(Hello World!); /> <input type=button onclick=alert(Hello World!); /> <select onchange=alert(Hello World!); >

    Javascript is object oriented


    Every element on a web page is an object that

    can be referred to using Javascript. Use the object hierarchy Example

    Other objects include cookies and items such as

    document.form1.firstName.focus(); This code will find a field called firstName on the form called form1 and put the cursor there.

    XML documents document.getElementById(firstName) will return a reference to a given element that has the id attribute set to firstName

    Javascript Syntax
    To declare variables, use the var keyword
    var firstName = Russell;

    Semi colons are optional, but should be used as


    a good practice. Functions are written like Java
    function sayHi(firstName) { alert(Hi, + firstName); }

    When calling functions, dont forget to use the


    parentesis: onclick=initForm();

    Inline Javascript
    Use the event attributes of a given element

    (onclick, onmouseover, onfocus, onchanged, etc) You can write the code right there, or simply call a function within the inline code Most pages will always have inline scripts because these are the events that drive the execution of the code

    Embedded Javascript
    <head> <script type="text/javascript"> //invoked on page load document.write("Hello World!"); //invoked when called function sayHi() { alert(hello again!); } /* this is another comment */ </script> </head> You can also put scripts in the <body> element!

    External Javascript
    Must go in the <head>
    <script type="text/javascript src=myscript.js />

    Do NOT write HTML in your .js file; only


    javascript is to go there!

    Javascript Syntax Operator


    Javascript is case

    = sensitive (including variable names!) Variables declared in a function are only accessible in that function. Variables declared outside are available to all functions.

    Meaning Assignment

    ==
    != &&

    Comparison (equals) Comparison (not equals) And Or


    Not concatenator

    ||
    ! +

    Javascript If statement
    if (x==y) { doSomething(); } elseif (x==v) { doSomethingElse(); } else { quit(); }

    Popup Boxes
    Alert: Includes OK button
    alert(Hello World);

    Confirm: includes OK and Cancel button


    if (confirm(Are you sure?)) {

    Prompt: includes input box


    alert(Hi + prompt(Enter your name));

    Functions
    Without inputs
    function hiThere() {

    With inputs
    function hiThere(firstName) {

    With return value


    function returnValue() { return document.getElementById(firstName); }

    Das könnte Ihnen auch gefallen