External References - University of North Carolina Wilmington



JavascriptEnhancing your websites with javascript and jqueryAll developers should understand HTML, CSS, JavaScript and JQueryWebsites used today:JavaScript&JQueryToday’s Class:Introduction to JavaScriptImplementing JavaScript into webpagesJQueryGetting scripts from online resourcesWe will not be coding scripts in this class. Too much to learn in a short period of time. Instead, I will show you how to go out and leverage existing JavaScript and JQueryJavascriptGeneral Notes on JavaScriptWeb browser will actually execute the JavaScript from the server using the browser’s JavaScript engine.JavaScript can modify the contents of a web page when the page is loaded or based on a user actionCan have more than one script per pageIf you have a script included in the head section or the body Head - traditionally the placeBody – include at the end of the body of your webpage. This will help with loading the webpage (script can slow compilation)Options:Include the entire scriptInclude in a separate fileExternal scripts are practical when the same code is used in many different web pages.JavaScript files have the file extension?.js.To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:<script?src="myScript.js"></script>External JavaScript AdvantagesPlacing scripts in external files has some advantages:It separates HTML and codeIt makes HTML and JavaScript easier to read and maintainCached JavaScript files can speed up page loadsExternal ReferencesExternal scripts can be referenced with a full URL or with a path relative to the current web page.Google ChromeClick the Chrome menu icon??on the browser toolbar.Select?Settings.On the "Settings" page, click the?Show advanced settings...?link.In the "Privacy" section, click?Content settings...Select?Allow all sites to run JavaScript (recommended)?in the "JavaScript" section.Click?Done.Script ElementSimilar to stylesExternal JavaScript file - <script src=”image_swap.js”></script>Script in the head sectionEmbed in the bodyExecuted in order that they appearAttributesSrc – location and name of external fileType (omitted with HTML5)Open up the website and show SimpleExample.htmlExample of JavaScript: <p> <script> var today = new Date(); document.write("Current date: "); document.write(today.toDateString()); </script></p><p> <script> var today = new Date(); document.write("&copy;&nbsp;"); document.write(today.getFullYear()); document.write(", San Joaquin Valley Town Hall") </script></p>Document Object ModelHierarchical collection of nodes in the web browser’s memory that represents the current page (internal representation of the HTML elements)Built as the page is loaded by the web browser.As you run JavaScript, you are DOM scriptingAnother JavaScript ExampleFirst: JavaScript alone in EmailList_javascript.htmlWalk through htmlFormCssPoint out id and how this relates to scriptPoint out at a high level what the script is doingWe will not cover how to write script but how to reuse existing scriptsJQueryFrom the jQuery web site: "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."Okay, but what does that mean to me? Put simply, jQuery will help you write JavaScript faster using a simpler syntax. Instead of writing extra lines of code or the writing the same code over and over, you can use jQuery to consolidate the code. jQuery will do the heavy lifting while you can concentrate on the more important stuff.jQuery also supports the idea of plugins. Plugins allow people to create mini-libraries that complement jQuery. The plugins can be anything from form validation to picture slide shows. We will look at plugins in future articles.Free, opensource JavaScript libraryFunctions for common web featuresTested for cross platform compatibilityGo to site and search for what you wantHow to use JQuery filesInclude the files from a content delivery network Common CDNsGoogle<script src=""></script>Which version?Uncompressed – contains comments to help with development (easier to debug)Minified – compressed version with no comments (harder to debug) Download and deploy on your web server.WE focus on content delivery networkDon’t have to download JQuery and UI filesThey are automatically updated as the source is updatedHow to code JQuery selectorsBy element type - $(“h2”)By id $(“#email_address”)By class attribute $(“.warning”)$ is used to refer to the JQuery library and then you use css syntaxTo call a method , you code a selectorNow: Use JQuery for EmailList_jquery.htmlLet’s see a few more examplesNOTE: We will not be creating JavaScript but copying a few of the more commonly used scriptsImage RolloverDescribe how I got the images and that I am using two for each rolloverCss is used for my list to display inlinePoint out script tagsCDN from google for JQueryScript runningWalk through some of the script so they understand how the script worksCarouselA little more complicatedWe are using <div> Added buttons (left and right)Walk through the css for this pageRemember, we need to point to CDN and script in headPanel-inner is the script reference in htmlWalk through script and point out that panel inner is a classSlide show uncwScripts!Show how to change the speed of the slide show.Go out to dynamic drive and show how to get scriptsOpen up SimpleExample.htmlAdd a live clock from the javascript library ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download