is unobtrusively called from the onclick event Also enter this code to open a

Is unobtrusively called from the onclick event also

This preview shows page 29 - 36 out of 38 pages.

is unobtrusively called from the onclick event Also enter this code to open a popup window: function popUp(winURL) { window.open(winURL,”popup”,”width=320,height=480”); } n/
Image of page 29
30 Backwards Compatibility Although most browsers fully support the DOM, some do not support it completely. Browser sniffing is too convoluted, so best to check for specific features Put this line of code at the beginning of a function if (!document.getElementsByTagName) return false; So, if the browser does not support this method the function will stop n/
Image of page 30
31 Tidying Up Hands On To follow through the principle of completely separating the three layers, we need to put all our Javascript in a separate file Open JavascriptDOM4.html Put the Javascript code into a new file called javascriptdom4.js Put a link into the head: <script type=“text/javascript” language=“javascript” src=“javascriptdom4.js” /> Put checks into the code to ensure that your page gracefully degrades if the user’s browser does not have sufficient level of support for Javascript n/
Image of page 31
32 innerHTML Hands On In the body of a blank HTML page insert a div tag: <div id=“test”>This will be replaced</div> In the head of the page place this code: window.onload = function() { var testdiv = document.getElementBy Id(“testdiv”); testdiv.innerHTML = “<p>Now we have inserted <em>this</em> instead!</p>”; } n/
Image of page 32
33 Using innerHTML All the HTML in the tag is replaced when the innerHTML method is used innerHTML is not part of the DOM – so it may one day disappear – though it is universally recognised by browsers Tags within the innerHTML are not part of the DOM tree so they cannot be manipulated n/
Image of page 33
34 Recap Hands On Now let us use the DOM to insert the same HTML into the div tag 1. Create an element node “p” assigned to the variable para 2. Create a text node assigned to the variable txt1 (‘Now we have inserted’) 3. Append txt1 to para 4. Create an element node em assigned to the variable emphasis 5. Append emphasis to para 6. Create a text node assigned to the variable txt2 (‘this’) 7. Append txt2 to emaphasis 8. Append emphasis to para 9. Create a text node assigned to the variable txt3 (‘instead!’) 10.Append txt3 to para 11.Append para to the element testdiv in the document n/
Image of page 34
35 Javascript and CSS Hands On Open file JavascriptDOM6.html and examine the code Now try out each of the 3 user events What do you notice about the difference between appendChild and insertBefore?
Image of page 35
Image of page 36

You've reached the end of your free preview.

Want to read all 38 pages?

  • Fall '19
  • Document Object Model

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes