1 / 17

Web Programming 網際網路程式設計

Discover the power of web programming using JavaScript and jQuery to create dynamic, interactive websites. This guide covers the fundamentals of JavaScript as a client-side scripting language, its integration with the Document Object Model (DOM), and the advantages of using jQuery for simplifying JavaScript code. Learn how to handle web events, implement animations, and utilize libraries to enhance user experience. With practical examples and references, you will develop essential skills to make your website more engaging.

valerian-esquivel
Download Presentation

Web Programming 網際網路程式設計

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Programming網際網路程式設計 Web Programming 網際網路程式設計

  2. JavaScript Web Programming 網際網路程式設計

  3. JavaScript • Executed by browser • completely different to Java • script language (腳本語言) • So, it is just a programming language • for example, it can accumulate from one to ten • notice that it is executed by browser, which means no internet connection is required • Its survival is a miracle • heard of Netscape? Web Programming 網際網路程式設計

  4. Its advantage: integration with web • When integrating with web, the most important thing is to show the result • document.getElementById('foo').value='bar'; • document is an object of Document Object Model (DOM) • getElementById() is a method of document, which returns a DOM object • valueis a attribute of an input object, where #foois a <input> • You may consult HTML and CSS references for available properties and here for objects and methods Web Programming 網際網路程式設計

  5. How to select .foo objects? • JavaScript getElementsByClass function • function getElementsByClass(searchClass, domNode, tagName) { if (domNode== null) domNode = document; if (tagName== null) tagName = '*';var el = new Array();var tags = domNode.getElementsByTagName(tagName);varsc= " "+searchClass+" ";for (i=0, j=0; i<tags.length; ++i) {vartc= " " + tags[i].className + " "; if (tc.indexOf(sc) != -1) el[j++] = tags[i];} return el;} • Painful Web Programming 網際網路程式設計

  6. jQuery • A Javascript library that every web site should use • What is a library (module)? If many people do the same things, these things should become a library • The advantage is that code becomes simple and understandable • jQuery('.foo').val('bar'); • The disadvantage is that you have to learn more functions, but totally worthy • Main Page - jQuery JavaScript Library Web Programming 網際網路程式設計

  7. jQuery('.foo').css('color','red'); Understand this, and you know almost all fancy transitions Remember the CSS Zen Garden? Web Programming 網際網路程式設計

  8. More advanced function, animate() • jQuery('.foo').animate({ 'margin-left': '100px',}, 2000, function(){ // animation completed}); Web Programming 網際網路程式設計

  9. In addition to ‘show the result’, there is another important things while integrating with web Web Programming 網際網路程式設計

  10. Input (event) • All web transitions are caused by events (such as clicking a button). This is the so-called event-driven programming (事件導向) • not specific for web programming, windows programming (視窗程式設計) and any programing in a multi-tasking environment (多工) are based on such a concept • jQuery('#foo').click(function(){…}); • jQuerifyis a good tool to test jQuery • suppose that #foo is a <button> • click is an event (.click() - jQuery API) • Here we used the trick of anonymous function. Please be familiar with it since this field uses it a lot. Web Programming 網際網路程式設計

  11. JavaScript references • JavaScript Garden • Learn jQuery & JAVASCRIPT for free • Some interesting concepts widely used, but not unique, in JavaScript • anonymous function, callback function, closure, functional programming (那些 Functional Programming 教我的事) • Notice that they are for JavaScript rather than for web programing with JavaScript Web Programming 網際網路程式設計

  12. Web Programming 網際網路程式設計

  13. Develop an app with these techniques • WebView • Various frameworks • box2dweb • Cross-platform Web Programming 網際網路程式設計

  14. Today’s assignment今天的任務 Web Programming 網際網路程式設計

  15. Make your web site dynamic • Implement at least one dynamic effect (seethesesampleeffectsforsomeinspiration) for your future requirements. If you have no ideas, try a slideshow facility, which makes your web site more professional. • Reference • 8 Layout Solutions To Improve Your Designs • 40 Super-Neat JavaScript Plugins • 45+ New jQuery Techniques For Good User Experience • Your web site (http://merry.ee.ncku.edu.tw/~xxx/cur/) will be checked not before 23:59 10/14 (Sun). You may send a report (such as some important modifications) to me in case I did not notice your features. Web Programming 網際網路程式設計

  16. Appendix附錄 Web Programming 網際網路程式設計

  17. If we have time, I want to discuss… • Any web effects you want to learn? • JavaScript Garden Web Programming 網際網路程式設計

More Related