Class 8 Notes for Web Scripting 

Learning Objectives:

You will be able to identify how JavaScript uses Libraries

You will be able to identify at least two different JavaScript Libraries

You will be able to use JQuery Library on a Webpage

Homework:

Read: Chapters 7

Create: A Mobile App using Dreamweaver and JQuery

Review: Libraries at W3schools and Javascripting Websites

Read: 10 Interview Questions Every JavaScript Developer Should Know

Topics Covered:

We Reviewed the Quiz

jQuery is a library of JavaScript Functions

jQuery is a lightweight, "write less, do more", JavaScript library.

JQuery Foundation has a few tutorials and videos on how to use its open source product

W3schools has a good tutorial on JQuery

Basic syntax is: $(selector).action()

jQuery Selectors - $(CSS selectors) - to identify the elements to be manipulated

$("*") selects all elements.

$("li") selects all <li> elements.

$("h1.main") selects all <h1> elements with class="main".

$("h1#menu") selects the first <h1> elements with id="menu".

$(":animated") selects all elements that are currently animated.

$(":button") selects all <button> elements and <input> elements of type="button".

$(":even") selects even elements.

$(":odd") selects odd elements.

The Document Ready Event:

Some jQuery methods are inside a document ready event to prevent them from running before the document is finished loading (is ready):

$(document).ready(function()

{

// jQuery methods go here...

}

);

 

Video tutorials on how to make a mobile app from Adobe!

JQuerry Mobile is a JavaScript library designed for mobile devices

Quick Start Guide to creating an App

Dreamweaver CS6 customization of the APP

The Basic structure of our Mobile app Page.

<div data-role="page">    	   
 <div data-role="header">  		  	
	<h1>Page Title</h1>  	  
  </div><!-- /header -->    	   
  <div data-role="content">	  		   
	<p>Page content goes here.</p>		    
  </div><!-- /content -->    	    
<div data-role="footer">  		  		
<h4>Page Footer</h4>  	 
   </div><!-- /footer -->     </div>
Modifications to the page:

Add a theme: <div data-role="page" data-theme="a" data-content-theme="a">

Add a Button: <a href="index.html" data-role="button">Link button</a>

Add a back button to a div tag : <div data-role="page" id="page2" data-add-back-btn="true" data-back-btn-theme="b">

Add a Transition: <a href="index.html" data-transition="pop">I'll pop</a>

Configuring your app for Phonegap:

Config.xml (created when you first use phonegap)

<?xml version="1.0" encoding="UTF-8" ?>        
<widget xmlns = "http://www.w3.org/ns/widgets"   
xmlns:gap = "http://phonegap.com/ns/1.0"           
 id = "edu.maricopa.pvc.cis233.yourname"  
 versionCode="10"   version   = "1.0.0">         

 <name>Yourname cis233</name>          
<description> Explain the website</description>            
<author href="https://www.paradisevalley.edu/cis233" email="youremail@maricopa.edu"> Hardeep Shoker  </author>      
<icon src="url-graphic" gap:platform="android"  />   
 </widget>

Terms:

CSS at w3schools, Other Students Projects

 

HTML Valid