AirJD 焦点
  • 本月热门
AirJD

没有录音文件
00:00/00:00
加收藏

JavaScript 快速入门培训PPT教程【英】

发布者 kernal
发布于 1492610952339  浏览 1207 关键词 JavaScript, 前端 
分享到

第1页

Introduction to JavaScript
This talk introduces the JavaScript language.

© Netskills, University of Newcastle 
Copyright in the whole and every part of this Courseware whether in the form of a written manual,document, software program, service or otherwise belongs to the University of Newcastle upon Tyne ("the Owner") and may not be used, sold, licensed, transferred, copied or reproduced in whole or in part in any manner or form or in or on any media to any person other than in accordance with the terms of the Owner's Licence Agreement or otherwise without the prior written consent of the Owner. 
All use of this material is governed by the Owner's Standard Licence Agreement together with the appropriate Schedule. The following are available: 
A Standard Licence Schedule to cover all use including all for-profit use by any type of organisation and all use by non-educational establishments 
An Educational Licence Schedule for not-for-profit internal use only by a recognised educational establishment 
The Netskills logo and this copyright notice must be included in any copy or adaptation. 
Netskills is a trademark of Netskills, University of Newcastle 

第2页

Introduction
What is it?
How does it work?
What is Java?
Learning JavaScript
JavaScript Statements
JavaScript and HTML forms
This talk aims to give an overview of JavaScript - introducing the concepts and explaining the potential and possible uses.
The talk moves on to describe the basics behind the language, how and where it operates and how it is included in a web page.
A number of real examples of JavaScript are provided to demonstrate some of the features and syntax of the language, and to identify key concepts. As part of this, a quick refresher on the HTML form tags is given as this is crucial to many of the exercises in the accompanying hands-on document. 
A comparison with Java is given to clear up any confusion surrounding the connection between the two languages. 

第3页

What is JavaScript?
Browsers have limited functionality 
Text, images, tables, frames
JavaScript allows for interactivity
Browser/page manipulation
Reacting to user actions
A type of programming language
Easy to learn
Developed by Netscape
Now a standard exists – www.ecma-international.org/publications/standards/ECMA-262.HTM
When the web was conceived, browsers were limited to text and image -  later tables and frames. The extent to which they provided interactivity with the user was very limited. JavaScript was developed by Netscape as a simple programming language (often referred to as a scripting language). It is easy to learn and small sections of JavaScript can be added to a web page rather than needing to develop complicated programs. It was specially designed for web page interaction and manipulating the web browser and page elements. It is often used to respond to user actions such as mouse clicks.
Although developed by Netscape, and other variants exist, such as Jscript from Microsoft, a standard has been developed by the European Computer Manufacturers Association. It is known as ECMAScript, using the standard ECMA262, which can be found fully documented at the address on the slide.

第4页

JavaScript Allows Interactivity
Improve appearance 
Especially graphics
Visual feedback
Site navigation
Perform calculations
Validation of input
Other technologies
javascript.internet.com
Examples should be shown which demonstrate different uses of JavaScript.  For example, try the calculator example at the address shown.
JavaScript can provide interactivity and/or enhance pages in several ways. It is particularly good at manipulating browser elements and images to improve page presentation and navigation.
As a programming language it can handle quite complex calculations and control the behaviour of embedded content including images.
A useful function is input validation - checking form responses BEFORE the form is sent for processing to a server. In this way it can be quicker and more user friendly, providing immediate feedback to the user.
JavaScript can be combined with other technologies such as Java  applets or plug-ins, but this is beyond the scope of this presentation.

第5页

How Does It Work?
Embedded within HTML page
View source
Executes on client
Fast, no connection needed once loaded
Simple programming statements combined with HTML tags
Interpreted (not compiled)
 No special tools required
JavaScript is embedded/included within HTML.  You can often see JavaScript in the source of a web page or it is provided for information on the page as with the calculator example.
JavaScript is mainly used as a client-side language - it downloads with the web page. Once the page has downloaded and is on the users' machine, it is actually the web browser which then interprets the JavaScript instructions. JavaScript pages run quickly, you are not relying on an internet connection to a web server. Short pieces of JavaScript can be combined with HTML without the need to develop a fully blown program.
There are two types of computer language, compiled and interpreted.  To write or edit a compiled language requires a special piece of software called a compiler.  JavaScript belongs to the other category, called interpreted.  In the case of JavaScript, this interpretation is done by the browser software at run-time.  Because JavaScript is interpreted, this means that no special tools are required to write or edit JavaScript, just a normal text editor. JavaScript web pages can be platform independent i.e. they will run on different browsers and computers (as long as the browser is JavaScript enabled). If you see a JavaScript web page that you like, you may be able to take that JavaScript and use it for your own purposes. (Remember to acknowledge the original author!)

第6页

What is Java?
Totally different
A full programming language
Much harder!
A compiled language
Independent of the web
Sometimes used together
Java is often confused with JavaScript. JavaScript was originally called LiveScript, but due to the popularity of Java at the time, it was renamed JavaScript . Java is different from JavaScript in a number of significant areas:
Java is a full programming language which can do just about anything - JavaScript isn't and can only do relatively simple things.
Java is much harder to learn and takes much longer to master.
Java is compiled.  The language is not 'embedded' or written in the page - it is self-contained as a separate file.
Java can be used/written totally independently from the web - JavaScript works with web browsers only.
They are sometimes used together - JavaScript can be used to 'control' or configure Java 'applets'.
This talk does not cover Java in any more detail. 
A separate Netskills Training Module investigates the use of Java applets.

第7页

Learning JavaScript
Special syntax to learn
Learn the basics and then use other people's (lots of free sites)
Write it in a text editor, view results in browser
You need to revise your HTML 
You need patience and good eyesight!
To learn JavaScript you will need to learn some of its language syntax.
However, a good strategy is to learn the basics, and then use and adapt other people's JavaScript.  There are plenty of sites on the internet offering free JavaScript (see slide 4)  with the calculator example. Other useful addresses are provided in the notes of last slide.
As with HTML, JavaScript can be written in a text editor and viewed in a browser. As it is a programming language the syntax is quite strict (compared to HTML). It is also a good idea to make sure your HTML is up to scratch as this will save you time. The hands-on exercises contain an refresher exercise on HTML forms.

第8页

JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">

document.write('This is my first 
JavaScript Page');

</script>
</body>
</html>
Note the symbol for line continuation
JavaScript can be contained either in the header section of an HTML page or in the body.  This JavaScript statement is shown as a pure JavaScript statement within SCRIPT tags.
Notice that there is no HTML in the body of this page at all.  (Demonstrate what this JavaScript looks like in a web browser).
This statement writes a line of text on a web page.  
The command document.write is a standard function in JavaScript to write text to the page. The following is a more technical explanation for background information only:
document.write is derived from the JavaScript object model (not covered in detail here). It works on the principle that all document and browser elements have an object name (document, window, image etc) and can each has various properties that can be manipulated. The object hierarchy means that individual elements can be uniquely identified i.e. document.myform.mytext would refer to the text entry named mytext within the form called myform within the current page (document).

The arrow symbol '' is used in these slides and in the workbook to indicate where a JavaScript statement should be typed on one line without a break.  A line break in the wrong place will stop JavaScript from working.e.g. 

document.write('This is my first 
JavaScript Page');

should actually be typed:

document.write('This is my first JavaScript Page');

第9页

JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language=“JavaScript">

document.write('<h1>This is my first 
JavaScript Page</h1>');

</script>
</body>
</html>
This example demonstrates that anything included within the quotes in the document.write statement is printed to the screen, and this includes HTML tags. The 

 tag is delivered to the browser along with the text, and the browser would interpret it as a normal HTML file, displaying the text in the Heading 1 style.

IMPORTANT NOTE:
This example shows a JavaScript statement in the  of the web page.
It is possible to include JavaScript statements in the  section of a web page but care must be taken that they do not try to access items that don't exist until the page has loaded (e.g. form elements, links, images). The web browser parses (reads through and executes) any script commands as it displays the page.
In most cases it is common sense that dictates where a statement should be placed.
If, in the above example, document.write was placed in the  of the page, the text "This is my first JavaScript Page" would appear in the  of the finished page – this would be  incorrect – although modern browsers will let you get away with it!
In some circumstances you may wish to use document.write in the  - for example to dynamically generate  or  tags. Such uses are not considered here. <br>JavaScript functions are typically defined in the <head> section of a web page as they do not normally execute until they have been triggered elsewhere. The use of functions in JavaScript is covered in the Netskills Training Module: "Further JavaScript (Enhancing JavaScript with Functions and Events)"<br><br></blockquote><h3>第10页</h3><div>JavaScript Statements</div><div><html><br><head><title>My Page</title></head><br><body><br><p><br><a href="myfile.html">My Page</a><br><br /><br><a href="myfile.html"<br>onMouseover="window.alert('Hello');"><br>My Page</A><br></p><br></body><br></html></div><div>JavaScript written<br>inside HTML</div><div>An Event</div><blockquote>Compare this example with the previous one.  This time the JavaScript is written inside the HTML tags and there are no <script> tags.<br>In this case if the browser is JavaScript-enabled it will process the commands when it needs to. If the browser doesn't understand JavaScript it will ignore the extra code (it should see it as an HTML attribute that it cannot process and therefore ignores, although very old browsers my throw an error)<br>This example demonstrates an HTML hyperlink, but notice the JavaScript enclosed within the <a href.. tag of the second link.<br>onMouseOver is referring to an event.  That is, this JavaScript will happen in response to something that the user does e.g click a button, or in this case, when they move the mouse over the link (this will not happen if you move your mouse over the first link!).<br>window.alert will display what is called an alert box on the screen containing the text specified, in this case, "hello".<br>The first link will behave normally.<br>(See separate Netskills Training Module for more details on Functions and Events in JavaScript.)</blockquote><h3>第11页</h3><div>Example Statements</div><div><script language="JavaScript"><br>window.prompt('Enter your name:','');<br></script><br><br><form><br><input type="button" Value="Press" onClick="window.alert('Hello');"><br></form></div><div>Another event</div><div>Note quotes: " and '</div><blockquote>This example shows two separate statements. The first is some pure JavaScript so must be contained within <script> tags. It displays a pop up box with the message "Enter your name" and a space to type in text. This occurs immediately when the page loads.<br>The second statement is within an HTML form. The <input> tag includes some JavaScript within it. The tag creates a form element (a button) and associates with it some JavaScript. The JavaScript responds to the mouse click event (onClick) on the button by producing a pop up alert box with the text 'Hello' in. This only occurs when the user triggers the event by clicking on the button.<br>JavaScript makes use of both single and double quotes. They are used in this example to have a text string 'Hello' contained within another string which defines the code to be carried out in response to the onClick event.  It is important that the quotes should match - if they don't, your JavaScript will not work!  <br></blockquote><h3>第12页</h3><div>HTML Forms and JavaScript</div><div>JavaScript is very good at processing user input in the web browser<br>HTML <form> elements receive input<br>Forms and form elements have unique names<br>Each unique element can be identified<br>Uses JavaScript Document Object Model (DOM)</div><blockquote>JavaScript is very useful for processing and manipulating user input and form elements.<br>A common way of obtaining input is via the HTML <form> elements which can provide text entry boxes, selection boxes, menus and buttons. Form elements can be named and hence uniquely identified within the JavaScript object model.<br></blockquote><h3>第13页</h3><div>Naming Form Elements in HTML </div><div><br><br><br><br><br><br><br><form name="addressform"><br>Name:  <input name="yourname"><br /><br>Phone: <input name="phone"><br /><br>Email: <input name="email"><br /><br></form></div><blockquote>This example shows a simple form. Notice the name attribute is used at all points - to name the form, and to name each element within the form.<br>How JavaScript uses the name attribute is described next.<br></blockquote><h3>第14页</h3><div>Forms and JavaScript</div><div>document.formname.elementname.value<br>Thus:<br><br>document.addressform.yourname.value<br>document.addressform.phone.value<br>document.addressform.email.value<br></div><blockquote>To refer to the value that a user has typed in a text box, you use the following naming system:<br>document.formname.elementname.value  <br>This is a naming convention derived from the JavaScript object model:<br>document refers to the page displayed in the browser.<br>formname is supplied by the page author as the name attribute of the <form> tag - in the example it is addressform and refers to the whole form.<br>elementname is supplied by the page author using the name attribute of the <input> tag.<br>value is a predefined term which refers to the text typed in by the user. <br></blockquote><h3>第15页</h3><div>Using Form Data</div><div>Personalising an alert box<br><br><br><br><form name="alertform"><br>Enter your name:<br><input type="text" name="yourname"><br><input type="button" value= "Go" onClick="window.alert('Hello ' +  document.alertform.yourname.value);"><br></form></div><blockquote>This simple code creates a form called alertform.<br>The JavaScript is activated when 'Go' button is pressed (an onClick event - see separate Netskills Training Module for more details on Functions and Events in JavaScript). The current value of the element yourname would be displayed in a an alert box.<br></blockquote><h3>第16页</h3><div>Tips</div><div>Check your statements are on one line<br>Check your " and ' quotes match<br>Take care with capitalisation<br>Lay it out neatly - use tabs<br>Remember  in the workbook denotes a continuing line<br>Be patient</div><div>Presentation slides adapted from scom.hud.ac.uk/scomsjw/Web%20Authoring%20Module/Lecture%20Slides/introjs.ppt </div><blockquote>Some tips for debugging and clarity to make it easier for you (the trainer) as well as for the audience. Follow the conventions we have used for capitalisation which will make it easier to read / find mistakes.<br>References:An alternative site with ready made scripts for download:<br>http://builder.com.com/ <br>Follow links to Web Development and then JavaScript to see a number of good examples.</blockquote></div> </div> </div> </div> <div style="clear:both"></div></div><div class="sidebar page-scroll"> <!--<a href="#print" title="打印成PDF"><i class="i24 ai-print-white"></i></a>--> <a href="#top" title="返回顶部"><i class="i24 ai-arrow-up-white"></i></a> <a href="#footer" title="意见反馈"><i class="i24 ai-comment-white"></i></a> <a href="#close" title="关闭" class="btn-close">关闭</a></div><div class="footer" id="footer"> <div class="container"> <div class="device-switch"> </div> <hr> <form class="slide-form" action="/form.page/add" method="post"> <div class="row" style="margin:44px 0 44px;"> <div class="col-sm-4"> <p><a class="brand" href="http://airjd.com">Air<b>JD</b> 焦点</a><p> <p>沪ICP备13020027号-4</p> <p>© 2015 <a class="brand-txt" href="http://airjd.com">Air<b>JD</b></a></p> <p>Email: <b>dev(at)airjd.com</b></p> <p class="subscribe"><a class="rss" href="http://airjd.com/rss/all" target="_blank" style=""> <i class="i24 ai-rss"></i> <b>RSS 订阅</b> </a></p> </div> <div class="col-sm-3"></div> <div class="col-sm-5"> <div class="row form-group"> <div class="col-xs-5"> <input type="text" class="form-control" name="name" placeholder="您的称呼 [可不填]" value=""> </div> <div class="col-xs-7"> <input type="email" class="form-control" name="email" placeholder="您的邮箱 [可不填]" value=""> </div> </div> <div class="row form-group"> <div class="col-xs-12"> <textarea class="form-control" name="comments" placeholder="BUG 或 建议 [必填]"></textarea> </div> </div> <div class="row form-group"> <div class="col-xs-12"> <button type="submit" class="btn btn-primary pull-right">提交建议</button> <p>系统测试中,发现BUG或有任何建议请随时联系</p> </div> </div> </div> </div> <input type="hidden" name="_user" value="airjd"> </form> </div></div><div class="hide"><div id="uploadPPTDialog" class="upload-form"> <form action="http://sc1.airjd.com/svr/upload.ppt" method="post" enctype="multipart/form-data"> <div class="upload-field"> <input type="text" readonly="readonly" class="upload-text" value="" placeHolder="选择上传文件"> <input type="file" name="file" class="upload-file"> </div> <div class="progressbar"> <div class="progress" style="width: 0%;"></div> <div class="loaded" style="width: 100%;"></div> </div> <small> 支持文件格式:<b>*.ppt</b>, <b>*.pptx</b>, <b>*.pdf</b>;<br>上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。 </small> <input type="submit" class="hide"> </form></div></div><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-60997960-1', 'auto'); ga('send', 'pageview');</script><script type="text/javascript" src="http://airjd.com/js/prod.player.js?v=20150601"></script><script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=2084696812" type="text/javascript" charset="utf-8"></script><script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1862627" charset="utf-8"></script></body></html>