Introduction to JavaScript for Python Programmers - PowerPoint PPT Presentation

About This Presentation
Title:

Introduction to JavaScript for Python Programmers

Description:

Introduction to JavaScript for Python Programmers Lecture Outline How Python & JavaScript are similar How Python & Javascript are different JavaScript fundamentals ... – PowerPoint PPT presentation

Number of Views:157
Avg rating:3.0/5.0
Slides: 25
Provided by: ccGatechE2
Category:

less

Transcript and Presenter's Notes

Title: Introduction to JavaScript for Python Programmers


1
Introduction to JavaScript for Python Programmers
2
Lecture Outline
  • How Python JavaScript are similar
  • How Python Javascript are different
  • JavaScript fundamentals
  • JavaScript Examples

3
Python Javascript Similarities
  • Both are programming languages
  • Used by programmers to tell the computer what to
    do.
  • Both are interpreted languages
  • JavaScript is interpreted by the web browser,
    Python is interpreted by IDLE or the python
    interpreter.
  • Both used to implement algorithms
  • Series of actions and calculations, that use
    decisions and loops to control the flow of
    execution.
  • Both are imperative languages

4
Python Javascript Differences
  • Different web browsers support different
    JavaScript code.
  • The basic syntax works on all browsers, but some
    browsers support non-standard extensions that are
    not supported on other browsers.
  • The source code can be stored inside of a web
    page, sometimes intermixed with HTML.
  • Web browsers typically do not provide good
    debugging information about why a JavaScript
    fails, so debugging a non-working script can be
    difficult.
  • The Syntax of Python Javascript are different
  • Statements can be terminated with semi-colons.
  • Brackets must be used to indicate blocks.

5
Javascript in a Web Page
  • JavaScript is separated from HTML by putting it
    inside of special script tagsltscript
    laguagejavascriptgt JAVASCRIPT JAVASCRIPTlt/sc
    riptgt
  • Some javascript is actually part of HTML, for
    example, a function call on a button press
    onClickcwCalc()
  • Output from a JavaScript program usually is shown
    to the user as HTML that is rendered by the web
    browser.

6
Javascript Syntax Differences
  • Indentation does NOT indicate blocks. Instead,
    curly brackets are used to indicate blocks. (Like
    C and C)?
  • Pythondef myFunc(aVar) if (aVar
    test) return( 0) else
    return(-1)
  • JavaScriptfunction myFunc(aVar) if (aVar
    'test') return(0) else
    return (-1)

7
Javascript Indentation does NOT matter!
  • Thisfunction myFunc(aVar) if (aVar
    'test') return(0) else
    return (-1)
  • functions the same as thisfunction myFunc(aVar)
    if (aVar 'test') return(0) else return
    (-1)

8
But please use good indentation!
  • Improves readability and understandabilityfunct
    ion myFunc(aVar) if (aVar 'test')
    return(0) else
    return (-1)

9
Calling Functions, Returning Values
  • The previous example should make it clear that
    calling functions and returning values works
    basically the same in JavaScript as it does in
    Python.function myFunc(aVar) if (aVar
    'test') return(0)
    else return (-1)
    myfunc(aString)?

10
Declaring Variables and Arrays
  • Variables must be declared before being usedvar
    VARIABLENAME VALUEvar myName Jay
  • The VAR keyword tells the JavaScript
    interpreter that you are making a variable.
  • Arrays must have their size declared at time of
    creationvar ARRAYNAME new Array(SIZE)var
    myArray new Array(50)
  • You index elements in an array using bracket
    notationvar oneElement myArray1

11
Conditional (IF) Statements
  • Very similar in Python JavaScript.
  • IF and IF/ELSE are the same (except for
    brackets). No ELIF statement.
  • Weird Conditionals I won't talk about them, if
    you run into them, do a quick web search to
    figure out how they work.
  • Switch/case/break
  • ?

12
Looping (while) statement
  • Very similar in Python JavaScript.while
    (BOOLEAN EXPRESSION) STATEMENTSTATEMENT
  • New do/while statement. Test is performed at the
    end of the loop instead of the beginningdo
    STATEMENT STATEMENT while (BOOLEAN
    EXPRESSION)

13
Looping (for) statement
  • FOR loops in JavaScript are based on C and C
    syntax, and are usually quite different than in
    Python.for( INITIALIZE BOOLEAN EXPRESSION
    ACTION) STATEMENT STATEMENT
  • for (var j 0 j lt 5 j j1)
    document.write(j is j)

14
Looping (for) statement
  • FOR loops in JavaScript are based on C and C
    syntax, and are usually quite different than in
    Python.for( INITIALIZE BOOLEAN EXPRESSION
    ACTION) STATEMENT
  • Code before the first semicolon (the
    initialization code) is executed once at the
    beginning of the loop.
  • The boolean expression (in the middle) is
    evaluated every time the loop repeats, and the
    statements in the loop are only executed if the
    result is TRUE.
  • The action code is executed after the loop
    executes, and is typically used to increment a
    counter.

15
Looping (for) Statement Example
  • for (var j 0 j lt 5 j j1)
    document.write(j is j)
  • The document.write statement executes 5 times,
    with j equalling 0,1,2,3, and 4. After the 5th
    execution, the jj1 action executes, and then
    the j lt 5 test evaluates to FALSE, so
    document.write() does not execute when j 5.

16
Looping (for) Statement Iteration over
Properties
  • JavaScript does have a FOR/IN version of the for
    loop, but it doesn't work exactly as you'd expect
    from your experience with Python's FOR loops.
  • for (VARNAME in OBJECT) document.write(
    VARNAME ) document.write( OBJECTVARNAME )
  • Note that it iterates through the property names
    of an object, and you have to use bracket
    notation to get the property values.

17
Input / Output with JavaScript
  • As most JavaScript runs inside of a web browser,
    most of the input and output to and from a
    JavaScript program goes through the web-browser.
  • Input comes from the user via web forms, button
    and link clicks.
  • Output is typically is displayed as a webpage or
    part of a webpage as HTML rendered by the web
    browser.

18
Webpage Output with JavaScript
  • A script can use the document.write( a string)
    function to add content to a web page as it is
    loaded.
  • lthtmlgtltbodygtlth1gtExamplelt/h1gtltscript
    languagejavascriptgtdocument.write(lth2gtHere is
    my website!lt/h2gt)lt/scriptgtlt/bodygt
  • lt/htmlgt
  • Note that this javascript code will be executed
    when it is encountered, and it outputs HTML that
    is rendered by the web browser.

19
Webpage Output with JavaScript
  • A script can output calculated and dynamic
    information
  • lthtmlgtltbodygtlth1gtClock Examplelt/h1gtltscript
    languagejavascriptgtvar date new Date()var
    hours date.getHours()var min
    date.getMinutes()document.write(Time ltbgt
    hoursminlt/bgt)lt/scriptgt
  • lt/bodygt
  • lt/htmlgt

20
Dialog Output with JavaScript
  • A script can use the alert( a string) function
    to pop up an Alert Dialog box.
  • lthtmlgtltbodygtlth1gtExamplelt/h1gtltscript
    languagejavascriptgtalert(Here is an annoying
    pop-up!)lt/scriptgt
  • lt/bodygt
  • lt/htmlgt
  • This javascript code will be executed when it is
    encountered, and causes an alert-box to appear.

21
Input Running a function when the user clicks
  • Define a functionltscript languagejavascriptgtfu
    nction myFunc() alert(You clicked it!)
    lt/scriptgt
  • You can use an onClickFUNCTIONNAME()
    parameter on a button to call the
    functionltinput typebutton valueDo It!
    onClickmyFunc() gt
  • Clicking on the button will cause the alert box
    to appear.

22
Input Running a function when the user clicks
lthtmlgt ltbodygt ltscript languagejavascriptgt functi
on myFunc() alert("You clicked it!")?
lt/scriptgt ltinput typebutton value"Do It!"
onClick"myFunc()" gt lt/bodygt lt/htmlgt
23
Output Modifying an already loaded webpage
  • document.write() can be used to add text to a
    webpage as it is being loaded.
  • To modify text in a webpage AFTER it is loaded,
    you can use a named area (DIV) and replace the
    HTML content with javascript.
  • ltdiv id"txt"gtPlain Textlt/divgtis HTML that
    creates a DIV named txt.
  • You can then change the HTML content of this DIV
    (currently Plain Text) with javascript as
    followsvar myDIV document.getElementById('txt
    ')myDIV.innerHTMLltbgtNew Text!lt/bgt

24
Putting it all together An example program
lthtmlgt ltbodygt ltscript type"text/javascript"gt var
num 0 function startTime() num num
1 var myDiv document.getElementById('txt')?
myDiv.innerHTML"ltbgtClicked " num "
Timeslt/bgt" lt/scriptgt ltdiv id"txt"gtPlain
Textlt/divgt ltinput typebutton value"click it!"
onClick"startTime()"gt lt/bodygt lt/htmlgt
Write a Comment
User Comments (0)
About PowerShow.com