Introduction to Java script for web .pptx
- 2. What is Javascript? JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g., having complex animations, clickable buttons, popup menus, etc.). It allows us to create dynamic content, control multimedia, animate images, and much more. How JavaScript Fits into Web Development ● HTML: Structure of the web page. ● CSS: Styling of the web page. ● JavaScript: Interactivity and behavior of the web page. The programs in this language are called scripts.
- 3. Cont’d… When JavaScript was created, it initially had another name: “LiveScript”. But Java was very popular at that time, so it was decided that positioning a new language as a “younger brother” of Java would help. But as it evolved, JavaScript became a fully independent language with its own specification called ECMAScript, and now it has no relation to Java at all. Read more about the differences between Javascript and Java here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction
- 4. Environments In which Js can run Browser (client-side javascript): JavaScript is most commonly run in web browsers, making websites interactive and dynamic. Server (Server-side js): Building server-side applications, APIs, command-line tools, scripts for automation. Mobile environments(React Native): Allows developers to build mobile apps using JavaScript and React.
- 5. Javascript Engines Javascript (Js) is a hosted language, meaning it can run in more than one environment. Today, it can execute not only in the browser, but also on the server, or actually on any device that has a special program called the JavaScript engine. The browser has an embedded engine sometimes called a “JavaScript virtual machine”. Different engines in different browsers have different “code names”. For example: ● V8 – in Chrome, Opera and Edge. ● SpiderMonkey – in Firefox. ● There are other code names like “Chakra” for IE, “JavaScriptCore”, “Nitro” and “SquirrelFish” for Safari, etc.
- 6. Engines cont’d… How do engines work? Engines are complicated. But the basics are: 1. The engine (embedded if it’s a browser) reads (“parses”) the script. 2. Then it converts (“compiles”) the script to machine code. 3. And then the machine code runs, pretty fast.
- 7. What can in-browser Javascript do? JavaScript’s capabilities greatly depend on the environment it’s running in. For instance, Node.js supports functions that allow JavaScript to read/write arbitrary files, perform network requests, etc. In-browser JavaScript can do everything related to web page manipulation, interaction with the user, and the webserver For instance, in-browser JavaScript is able to: ● Add new HTML to the page, change the existing content, modify styles. ● React to user actions, run on mouse clicks, pointer movements, key presses. ● Send requests over the network to remote servers, download and upload files. ● Get and set cookies, ask questions to the visitor, show messages. ● Remember the data on the client-side (“local storage”). .
- 8. Languages over Javascript The syntax of JavaScript does not suit everyone’s needs. Different people want different features, because projects and requirements are different for everyone. Recently, a plethora of new languages appeared, which are transpiled (converted) to JavaScript before they run in the browser. Modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language and auto-converting it “under the hood” ● CoffeeScript is “syntactic sugar” for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it. ● TypeScript is concentrated on adding “strict data typing” to simplify the development and support of complex systems. It is developed by Microsoft. ● Dart is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google.
- 9. How to link javascript to an HTML file JavaScript can be added to HTML file in two ways: ● Internal JS: We can add JavaScript directly to our HTML file by writing the code inside the <script> tag. The <script> tag can either be placed inside the <head> or the <body> tag according to the requirement. Example: <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script> ● External JS: We can write JavaScript code in another files having an extension.js and then link this file inside the <head> tag of the HTML file in which we want to add this code.
- 10. Internal Js <!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> body> <h2>Demo JavaScript in Head</h2> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html>
- 11. External Js If we have a lot of JavaScript code, we can put it into a separate file. Script files are attached to HTML with the src attribute: <script src="/path/to/script.js"></script> Note: As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files. The benefit of a separate file is that the browser will download it and store it in its cache. Other pages that reference the same script will take it from the cache instead of downloading it, so the file is actually downloaded only once. That reduces traffic and makes pages faster.
- 12. Note: If src is set, the script content is ignored. A single <script> tag can’t have both the src attribute and code inside. I.e This won’t work: <script src="file.js"> alert(1); // the content is ignored, because src is set </script> We must choose either an external <script src="…"> or a regular <script> with code.
- 13. External JavaScript Advantages Placing scripts in external files has some advantages: ● It separates HTML and code ● It makes HTML and JavaScript easier to read and maintain ● Cached JavaScript files can speed up page loads
- 14. Applications of javascript ● Web Development: Adding interactivity and behavior to static sites JavaScript was invented to do this in 1995. By using frameworks like Reactjs, Vue and AngularJS that can be achieved so easily. ● Web Applications: With technology, browsers have improved to the extent that a language was required to create robust web applications. This has been made possible through Application Programming Interfaces(APIs) that provide extra power to the code.
- 15. Applications cont’d… ● Server Applications: With the help of Node.js, JavaScript made its way from client to server and Node.js is the most powerful framework on the server side. ● Games: Not only in websites, but JavaScript also helps in creating games for leisure. The combination of JavaScript and HTML5 makes JavaScript popular in game development as well. It provides the EaselJS library which provides solutions for working with rich graphics. ● Mobile Applications: JavaScript can also be used to build an application for non-web contexts. The features and uses of JavaScript make it a powerful tool for creating mobile applications.