<?xml version="1.0" encoding="UTF-8"?>
<?xml-model href="../../../_utils/schema/yaps.rnc" type="application/relax-ng-compact-syntax"?>
<?xml-model href="../../../_utils/schema/yaps.isosch" type="application/xml" schematypens="http://purl.oclc.org/dsdl/schematron"?>
<?xml-stylesheet type="text/css" href="../../stylesheets/yaps-tei.css"?>
<!-- $Id: mdh_javascript-for-xhtml-intro.xml 51709 2026-05-28 23:29:13Z syd $ -->
<TEI xmlns="http://www.wwp.northeastern.edu/ns/yaps" version="5.0">
  <teiHeader>
    <fileDesc>
      <titleStmt>
        <title>Using JavaScript with XHTML</title>
        <author>Martin Holmes</author>
      </titleStmt>
      <editionStmt>
        <edition>DHSI 2011, University of Victoria</edition>
      </editionStmt>
      <publicationStmt>
        <distributor>Women Writers Project (via website)</distributor>
        <address>
          <addrLine>url:mailto:wwp@northeastern.edu</addrLine>
        </address>
        <date when="2011-06-03"/>
      </publicationStmt>
      <sourceDesc>
	<p>Born digital</p>
      </sourceDesc>
    </fileDesc>
    <revisionDesc>
      <change when="2011-06-03" who="sdb">Minor tweaks, including
      removing amusing ambiguity about what makes a geek
      sneer</change>
      <change when="2011-06-03" who="mdh">Began writing this file.</change>
    </revisionDesc>
  </teiHeader>
  <text>
    <presentation>

      <section>
        <head>Using JavaScript with XHTML</head>
        <slide>
          <list>
            <item>You know how to write XSLT stylesheets to transform XML into XHTML.</item>
            <item>You know how to style XHTML using CSS.</item>
            <item>But how do you make it DO STUFF?</item>
            <item>JavaScript (or ECMAScript) is the answer.</item>
          </list>
        </slide>
      </section>
      
      <section>
        <head>What is JavaScript?</head>
        <slide>
          <list>
            <item>Simple scripting language that looks a bit like C++ or Java.</item>
            <item>But it's <emph>not Java</emph>! Geeks will sneer and
            spit at you if you confuse the two languages.</item>
            <item>Ubiquitous, and supported well by all desktop browsers.</item>
            <item>Standardized by the ECMA (ECMA-262, 5th edition 2009).</item>
          </list>
        </slide>
      </section>
      
      <section>
        <head>Getting started: how to link your XHTML file to a JS file</head>
        <slide>
          <figure><graphic url="../../../_utils/gfx/link_xhtml_to_js.png" width="800px" height="569px"/></figure>
        </slide>
      </section>
      
      <section>
        <head>The <gi>script</gi> element</head>
        <slide>
          <egMarkup scheme="HTML" type="valid">
	    <script
		type="text/javascript"
		src="myScript.js">
	    </script>
	  </egMarkup>
          <p>Note: You <emph>cannot</emph> use a self-closing <tag type="empty">script</tag> tag; some browsers will choke on it.</p>
        </slide>
      </section>
      
      <section>
        <head>An example: adding some JavaScript interactivity</head>
        <slide>
          <list>
            <item>Open <title>Places</title> XML (<ref target="../../demos/xslt_intro/places.xml">places.xml</ref>)</item>
            <item>Open XSLT (<ref target="../../demos/xslt_intro/mdh_places_javascript.xsl">mdh_places_javascript.xsl</ref>)</item>
            <item>Open JavaScript to see what it looks like (<ref target="../../demos/xslt_intro/places.js">places.js</ref>)</item>
            <item>Set up a transformation scenario which outputs HTML into the same folder, and <ref target="../../demos/xslt_intro/mdh_places_javascript.htm">view the result</ref> in your browser.</item>
          </list>
        </slide>
      </section>
      
      <section>
        <head>JavaScript functions</head>
        <slide>
          <figure><graphic url="../../../_utils/gfx/javascript_function_01.png" width="780px" height="600px"/></figure>
        </slide>
      </section>
     
      <section>
        <head>JavaScript Functions (2)</head>
        <slide>
          <figure><graphic url="../../../_utils/gfx/javascript_function_02.png" width="780px" height="600px"/></figure>
        </slide>
      </section>
      
      <section>
        <head>JavaScript Functions (3)</head>
        <slide>
          <figure><graphic url="../../../_utils/gfx/javascript_function_03.png" width="780px" height="600px"/></figure>
        </slide>
      </section>
      
      <section>
        <head>JavaScript Functions (4)</head>
        <slide>
          <figure><graphic url="../../../_utils/gfx/javascript_function_04.png" width="780px" height="600px"/></figure>
        </slide>
      </section>
      
      <section>
        <head>JavaScript Functions (5)</head>
        <slide>
          <figure><graphic url="../../../_utils/gfx/javascript_function_05.png" width="780px" height="600px"/></figure>
        </slide>
      </section>
      
      <section>
        <head>JavaScript Functions (6)</head>
        <slide>
          <figure><graphic url="../../../_utils/gfx/javascript_function_06.png" width="780px" height="600px"/></figure>
        </slide>
      </section>
      
      <section>
        <head>JavaScript Functions (7): Summary</head>
        <slide>
          <figure><graphic url="../../../_utils/gfx/javascript_function_07.png" width="780px" height="600px"/></figure>
        </slide>
      </section>
      
      <section>
        <head>Where to go for more information</head>
        <slide>
          <list>
            <item><ref target="http://www.w3schools.com/js/">http://www.w3schools.com/js/</ref></item>
            <item><ref target="http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery">http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery</ref></item>
            <item><ref target="http://www.youtube.com/watch?v=yQaAGmHNn9s">http://www.youtube.com/watch?v=yQaAGmHNn9s</ref><lb/>
              (Search YouTube for <mentioned>thenewboston.com javascript</mentioned>.)</item>
          </list>
        </slide>
      </section>
      
    </presentation>
  </text>
</TEI>
