Functions

  • Functions
    • Functions are bits of codes that you can reuse
    • Functions have a special syntax
      function functionName(parameters){
         code you want to run
      }
      
  • Function Delclaration
    function welcomeMsg() {
       alert("Welcome to Javascript!");
    }
    
    function welcomeMsg(msg) {
       alert(msg);
    }
    
  • Function call
    • Declaring a function doesn’t actual do anything
    • You need to call the function
    • Calling a function changes the program flow
      var x = "Hello"
      welcomeMsg(x);
      x = "Goodybye";
      welcomeMsg(x);
      
      function welcomeMsg(msg) {
         alert(msg);
      }
      
  • Parameters
    • Sometimes functions need some information in order to perform its “function”
    • The names of the parameters are not important, aslong as you are consistent
  • Return values
    • Some function return values
    • These values can be used in assignment statements or conditional expressions
      function welcomeMsg(msg) {
         alert(msg);
         var name = prompt("What is your name?");
         return name;
      }
      
      var firstName = welcomeMsg("Hi");
      
  • Review
    • Whenever possible, use built in functions
    • When you need to write your own function, try not be too specific
    • Function parameters can have any name

Code Placement

  • Where to Place the Code
    • Now that you are going to start to write your own functions, it is easier to separate code from content
    • Javascript code can be placed in the body, head, or in an external file
  • In the head
    • When Javascript functions are declared in the head section they are separate from the content
    • Use the script tag
    • Have access to all of the document information (ids, classes, etc.)
  • Code can be placed in the <head>
    <head>
       <script>
       function message() {
          alert("This alert box was called with the onload event");
       }
       </script>
    </head>
    <body>
       <h1>Functions</h1>
       <script>
          message();
       </script>
    </body>
    
  • In an External File
    <head>
       <script src="js/two-external.js"></script>
    </head>
    <body>
       <h1>Functions</h1>
       <script>
           message();
       </script>
    </body>
    
  • Debugging Your Code
    • As hyour code become more complex, make sure that you are using your debugger
    • The console is your friend!!
  • CodePen
    • If you work on your code on an online editor (e.g. CodePen) the software lets you separate HTML, CSS and Javascript without any links
  • Review
    • javascript can appear in the head or body of your code
    • Code can also be placed in an external js file
    • personally, development done in head and moved to external after testing

Folder Structure/Organizing You Code

  • Folder Structure
    • Web Developers tend to organize their code into Separate parts
      • HTML
      • CSS
      • Images
      • Javascript
  • Conventions
    • Organizing your code is a convention, not a rule

      未命名_2016-12-31_16-55-54.png

  • Linking from an HTML file
    • <link rel="stylesheet" href="css/style.css">
    • <script "js/javaFunctions.js"> </script>
    • <img src="images/myPicture.jpg" />
  • Linking from a CSS file
    • background: url("../images/holiday.png");
  • Debugging
    • If a link isn’t working you want to check a few things:
      • Did you spell the file names correctly? (case matters!!)
      • Are files in the correct folder?
      • Are you working on the correct file?

Events

  • Adding the interactivity!!
    • It has been up to us to decide when the functions should execute
    • It would be better if the functions were called based on special “events”
    • The Javascript API let us add dynamic function calls!!
  • Events
    • onclick
      • User clicks on an HTML element
    • onmouseover
      • user moves the mouse over an HTML element
    • onresize
      • browser window is resized
    • onload
      • browser finishes loading the page
  • How it works
    • Any element can react an event
    • You need to add the event to the tag and include what you want to happen
    • <div onclick="message()">clicking on this Div will invoke a javascript function</div>
  • Using Quotes
    • You can use single quotes or double quotes for the event result
    • Double quotes make it easier if you want to pass String parameters
    • <div onclick="message('Hi')">
    • Be careful of copying and pasting quotes!
  • Example
    • Events – Basic Example
    • Events – Basic Date Example
  • Events Change the program Flow
    • Some programs ran in a linear order (step-by-step)
    • Events cause the program to “run continuously” since the DOM is always listening for events
  • More Events
    • Mouse Events
      • onclick, ondblclick, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout,…
    • keyboard Events
      • onkeydown, onkeypress, onkeyup
    • Frame Events
      • onload, onresize, onscroll, onerror, …
    • Comprehensive list
  • Review
    • Without the events, Javascript would be limited in ability to interact with the DOM
    • Events are cool…they are also annoying
    • Don’t worry about memorizing the different events. As the need arises, look them up

Code with Me – Events

  • Coding in Javascript Takes Practice
    • Watching these videos isn’t enough
    • Dive into the code!
    • Modify the code!
    • Break the code!
  • Examples
    • Events – Modify the DOM
    • Events – Change Style
  • Review
    • Stop and Code!

“this”

  • Referring to Elements
    • A key to smart programming is using functions
    • A common roadblock is figuring out how to set up functions for reuse
      • How do I avoid writting a different function for every different element?
      • How can the function know which one I want to use?
  • “this”
    • “this” is a keyword that allows an element to reference itself
      • Every object in the DOM has an automatically generated “this”
    • Allows you to access an element’s info
      • Without “this” it would be difficult for the functions to know what data to use
    • “this” is also used outside functions
  • Example
    • “this” Example – Simple
    • “this” Example – Complex
  • Review
    • “this” is a tricky concept to grasp
    • Repeated practice helps
    • If you get stuck, work backward from where you see the keyword find the last element that was started

Photo Gallery

  • Putting It Into Practice
    • Given the HTML code and the CSS code, can you:
      • change the background-image of an element?
      • change the content of an element?
  • Example
    • Gallery Homework
  • background-image
    • The background-image is an option for including graphics without using the img tag
    • You should set a background-color as well in case the url isn’t valid
    • background-image: url("mypPic.jpg")
    • background-color: #CCEECC;
  • Element text
    • We have discussed two different ways to change the content
      • document.write()
      • innerHTML
  • Tips
    • The code should actually be quite short
    • You will need to think about how to incorporate the quotes
    • Remember, you use + to concatenate Strings
Notice: compact(): Undefined variable: limits in /var/www/html/wp-includes/class-wp-comment-query.php on line 853 Notice: compact(): Undefined variable: groupby in /var/www/html/wp-includes/class-wp-comment-query.php on line 853

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *