Introduction to JavaScript PowerPoint Presentation, PPT - DocSlides

Download lindy-dunigan | 2016-08-01 | General Past, Present and Future. Nikolay . Kostov. Telerik Software Academy. academy.telerik.com. Team Lead, Senior. Developer and Trainer. http://Nikolay.IT. Table of Contents. JavaScript Overview. History. ID: 428432

PowerPoint Introduction to JavaScript PowerPoint Presentation, PPT - DocSlides Slideshow

Slide1Introduction to JavaScriptPast, Present and FutureNikolay KostovTelerik Software Academyacademy.telerik.comTeam Lead, S

  • Views 68
Download this presentation

Introduction to JavaScript PowerPoint Presentation, PPT - DocSlides

Click below link (As may be) to download this presentation.

Download Note - The PPT/PDF document "Introduction to JavaScript PowerPoint Pr..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.

Presentations text content in Introduction to JavaScript PowerPoint Presentation, PPT - DocSlides

  • Introduction to JavaScript
  • Past, Present and Future
  • Nikolay
  • Kostov
  • Telerik Software Academy
  • academy.telerik.com
  • Team Lead, Senior
  • Developer and Trainer
  • http://Nikolay.IT
  • Table of Contents
  • JavaScript OverviewHistoryFeaturesUsagePresent and FutureRunning JavaScript in the Browser
  • JavaScript Overview
  • JavaScript Overview
  • JavaScript is an interpreted computer programming languageRuns mostly in a web browserAllows user interactionJavaScript is formalized in ECMAScript language standard
  • Features
  • Why JavaScript is so good!
  • Features
  • DOM and UI manipulationPlatform independent / works everywhere!Imperative and structuredif-else, for, while, …Scoping Expressions and statementsDynamicTypeless
  • Features
  • FunctionalPrototype-basedClass-like structures and inheritanceFunctions as objectsFunctions as methodsOtherRun-time environmentRegular expressionsLightweight
  • History of JavaScript
  • How has JS risen to power?
  • History of JavaScript
  • JavaScript was originally developed for Netscape at the beginning of the Browser warsShipped with Netscape Navigator 2.0, 1995Developed as Mocha, later known as LiveScriptMicrosoft adopted JavaScript in their browser (IE 3.0) in August 1996MS JS was called JScript and was promoted with the umbrella term DHTMLJS became official as ECMAScript
  • 0
  • History of JavaScript (2)
  • AJAX came into playContent is loaded in the background with JSOpen source librariesjQueryPrototypeJavaScript became popular in 2009ECMAScript 5
  • 1
  • Present and future
  • Where are we going?
  • 2
  • Present
  • AJAX content loadingHTML5 APIJS to control user mediaRIA applicationsServer-sideNodeJSWeb SocketsFast communication
  • 3
  • Future
  • Most used programming languageUsed absolutely everywhereAnd on every layer of developmentData layerServer-side layerClients onWebMobileDesktop
  • 4
  • Usage
  • Not only web!
  • 5
  • Usage
  • ArchitectureMVVM, MVC and MVPReady-to-use librariesWebUIDOM manipulationSingle page applications
  • 6
  • Usage
  • MobileCross-platform hybrid applicationsCordova, Titanium, Firefox OSDesktopWindows 8 JSServer-sideNodeJSDatabaseMongoDB
  • 7
  • Running JavaScript in the Browser
  • 8
  • Using JavaScript Code
  • The JavaScript code can be placed in:<script> tag in the head <script> tag in the bodyExternal files, linked via <script> tag the headFiles usually have .js extensionHighly recommendedThe .js files get cached by the browser
  • 18
  • <script src="scripts.js" type="text/javscript">
  • <!– code placed here will not be executed! -->
  • </script>
  • 9
  • JavaScript – When is Executed?
  • JavaScript code is executed during the page loading or when the browser fires an eventAll statements are executed at page loadingSome statements just define functions that can be called laterFunction calls or code can be attached as "event handlers" via tag attributesExecuted when the event is fired by the browser
  • 19
  • <img src="logo.gif" onclick="alert('clicked!')" />
  • 0
  • <html><head><script type="text/javascript"> function test (message) { alert(message); }</script></head><body> <img src="logo.gif" onclick="test('clicked!')" /></body></html>
  • Calling a JavaScript Function from Event Handler – Example
  • 20
  • 1
  • Event Handlers
  • Live Demo
  • 2
  • Using External Script Files
  • Using external script files:External JavaScript file:
  • 22
  • <html><head> <script src="sample.js" type="text/javascript"> </script></head><body> <button onclick="sample()" value="Call JavaScript function from sample.js" /></body></html>
  • function sample() { alert('Hello from sample.js!')}
  • external-JavaScript.html
  • sample.js
  • The <script> tag is always empty.
  • 3
  • External JavaScript Files
  • Live Demo
  • 4
  • The JavaScript Syntax
  • 5
  • JavaScript Syntax
  • JavaScript is a C-like programming languageIt gets its syntax from C, and maybe JavaOperators (+, *, =, !=, &&, ++, …)Variables (typeless)Conditional statements (if, else)Loops (for, while)Arrays (my_array[]) and associative arrays (my_hash['key'])Functions (can return value)Function variables
  • 25
  • 6
  • Standard Popup Boxes
  • Alert box with text and [OK] buttonJust a message shown in a dialog box:Confirmation boxContains text, [OK] button and [Cancel] button:Prompt boxContains text, input field with default value:
  • 26
  • alert("Some text here");
  • confirm("Are you sure?");
  • prompt
  • ("enter amount", 10
  • );
  • 7
  • Popup Boxes
  • Live Demo
  • 27
  • 8
  • The Built-In Browser Objects
  • 9
  • Built-in Browser Objects
  • The browser provides some read-only data via:windowThe top node of the DOM treeRepresents the browser's windowdocumentholds information the current loaded documentscreenHolds the user’s display propertiesbrowserHolds information about the browser
  • 29
  • 0
  • DOM Hierarchy – Example
  • 30
  • window
  • navigator
  • screen
  • document
  • history
  • location
  • form
  • button
  • form
  • form
  • 1
  • Opening New Window – Example
  • window.open()
  • 31
  • var newWindow = window.open("", "sampleWindow", "width=300, height=100, menubar=yes, status=yes, resizable=yes");newWindow.document.write( "<html><head><title> Sample Title</title> </head><body><h1>Sample Text</h1></body>");newWindow.status = "Hello folks";
  • 2
  • The Navigator Object
  • 32
  • alert(window.navigator.userAgent);
  • The navigator
  • in the browser window
  • The userAgent (browser ID)
  • The browser window
  • 3
  • The Screen Object
  • The screen object contains information about the display
  • 33
  • window.moveTo(0, 0);x = screen.availWidth;y = screen.availHeight;window.resizeTo(x, y);
  • 4
  • Document and Location
  • document objectProvides some built-in arrays of specific objects on the currently loaded Web pagedocument.locationUsed to access the currently open URL or redirect the browser
  • 34
  • document.links[0].href = "yahoo.com";document.write( "This is some <b>bold text</b>");
  • document.location = "
  • http://www.yahoo.com/";
  • 5
  • Built-In Browser Objects
  • Live Demo
  • 35
  • 6
  • Other JavaScript Objects
  • 7
  • The Math Object
  • The Math object provides some mathematical functions
  • 37
  • for (i=1; i<=20; i++) { var x = Math.random(); x = 10*x + 1; x = Math.floor(x); document.write( "Random number (" + i + ") in range " + "1..10 --> " + x + "<br/>");}
  • 8
  • The Date Object
  • The Date object provides date / calendar functions
  • 38
  • var now = new Date();var result = "It is now " + now;document.getElementById("timeField") .innerText = result;...<p id="timeField"></p>
  • 9
  • Timers: setTimeout()
  • Make something happen (once) after a fixed delay
  • 39
  • var timer = setTimeout('bang()', 5000);
  • clearTimeout(timer);
  • 5 seconds after this statement executes, this function is called
  • Cancels the
  • timer
  • 0
  • Timers: setInterval()
  • Make something happen repeatedly at fixed intervals
  • 40
  • var timer = setInterval('clock()', 1000);
  • clearInterval(timer);
  • This function is called continuously per 1 second.
  • Stop the timer.
  • 1
  • Timer – Example
  • 41
  • <script type="text/javascript">
  • function
  • timerFunc() {
  • var
  • now = new Date();
  • var
  • hour = now.getHours();
  • var
  • min = now.getMinutes();
  • var
  • sec = now.getSeconds();
  • document.getElementById("clock")
  • .value
  • =
  • ""
  • + hour + ":" + min + ":" + sec;
  • }
  • setInterval
  • ('timerFunc()', 1000);
  • </script
  • >
  • <input type="text" id="clock
  • "
  • />
  • 2
  • Other JavaScript Objects
  • Live Demo
  • 3
  • Introduction to JavaScript Development
  • http
  • ://academy.telerik.com
  • 4
  • Free Trainings @ Telerik Academy
  • “C# Programming @ Telerik Academycsharpfundamentals.telerik.comTelerik Software Academyacademy.telerik.comTelerik Academy @ Facebookfacebook.com/TelerikAcademyTelerik Software Academy Forumsforums.academy.telerik.com
  • 44
  • 5
  • 6
  • 7
Recommended
Allure Caramel Hotel by KarismaFACT SHEETAllure Caramel Hotel By Karis
  • 91

Allure Caramel Hotel by KarismaFACT SHEETAllure Caramel Hotel By Karis

PROGRAMME OF EXAMINATIONS/RECTT TESTs (RT)
  • 52

PROGRAMME OF EXAMINATIONS/RECTT TESTs (RT)

Attention Candidates of C
  • 64

Attention Candidates of C

August 2008                     AG/Poultry/2008-02pr , DVM, Extension
  • 102

August 2008 AG/Poultry/2008-02pr , DVM, Extension

The Big-Five Trait Taxonomy: History, Measurement, and Theoretical Per
  • 80

The Big-Five Trait Taxonomy: History, Measurement, and Theoretical Per

Threat System (Fight or Flight)
  • 188

Threat System (Fight or Flight)

Research in Business and Economics Journal  Fear Appeal Theory, Page 1
  • 120

Research in Business and Economics Journal Fear Appeal Theory, Page 1

DIVISION OF INSURANCEFrequently Asked QuestionsAbout AtFault Accident
  • 58

DIVISION OF INSURANCEFrequently Asked QuestionsAbout AtFault Accident

Famous Ellis Island Immigrants
  • 78

Famous Ellis Island Immigrants

Report this Document.