Web Client Side Technologies 0780341 Raneem Qaddoura
Why Study JavaScript? JavaScript is the programming language of HTML and the Web. JavaScript is easy to learn. Make actions in the user's browser without sending messages back and forth to the server. JavaScript also allows your page to be interactive. Provide responses within the Web page to various actions that your visitor takes so as to avoid the need to load new Web pages to respond (AJAX). Considering the performance, JavaScript is fast and Reliable.
Review Where to put JavaScript? Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both. Note: Placing scripts at the bottom of the <body> element improves the display speed, because script interpretation slows down the display. External JavaScript <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script> <script src="myScript.js"></script>
Review JavaScript Can Change HTML Content JavaScript Can Change HTML Attribute Values JavaScript Can Change HTML Styles (CSS) JavaScript Can Show / Hide HTML Elements Example document.getElementById("demo").innerHTML = "Hello JavaScript"; document.getElementById("demo").src='pic_bulbon.gif' document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.display = "none"; document.getElementById("demo").style.display = “block"; document.getElementById("demo").style.display = “inline-block"; document.getElementById("demo").style.display = “inline";
JS HTML DOM The HTML DOM (Document Object Model)
DOM Document Finding HTML Elements By Id: Example 1 By Tag name: Example 2 By Class name: Example 3 By CSS Selector: Example 4 Method Description document.getElementById(id) Find an element by element id document.getElementsByTagName(name) Find elements by tag name document.getElementsByClassName(name) Find elements by class name
DOM Document Changing HTML Elements Property Description element.innerHTML = new html content Change the inner HTML of an element element.attribute = new value Change the attribute value of an HTML element element.style.property = new style Change the style of an HTML element Method element.setAttribute(attribute, value)
DOM Document Adding and Deleting Elements Create Element, Append Child: Example 1 Remove Child: Example 2 Replace Child: Example 3 Write: Example 4 Method Description document.createElement(element) Create an HTML element document.removeChild(element) Remove an HTML element document.appendChild(element) Add an HTML element document.replaceChild(new, old) Replace an HTML element document.write(text) Write into the HTML output stream
Javascript Essentials Variables Data types Arithmetic Functions Objects Date Conditions Loop For Forms Events Cookies
JS Libraries What is a Software library? A software library is a collection of files, programs, routines, scripts, or functions that can be referenced in the programming, scripting, or markup languages. What is a JS library? A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies
JS Libraries List of notable JS libraries jQuery: jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. D3.js: The Data Driven Documents, or D3.js, library is unique in that it puts the data first. Parsley: Parsley provides more form-validation techniques than just about any other JavaScript library. Qunit: QUnit is one of several unit-testing libraries available for JavaScript.
JS Framework What is a Software Framework? A software framework is an abstraction in which software providing generic functionality can be selectively changed by additional user-written code, thus providing application-specific software. Software frameworks may include support programs, compilers, code libraries, tool sets, and application programming interfaces (APIs) that bring together all the different components to enable development of a project or system. What is a JS Framework? A JavaScript framework is an application framework written in JavaScript. It differs from a JavaScript library in its control flow: a library offers functions to be called by its parent code, whereas a framework defines the entire application design. Some JavaScript frameworks follow the model–view–controller paradigm designed to segregate a web application into orthogonal units to improve code quality and maintainability.
JS Frameworks List of notable JS Frameworks AngularJS: Extends HTML by acting as the controller portion of MVC. Angular makes it possible to create new behaviors in a manner that is both natural and straightforward. Vue.js: A versatile open-source JavaScript framework, Vue uses a “component-based development model” that lets you mix and match Vue components into your projects. Ember.js: Employs the Model-View-View-Model (MVVM) pattern and incorporates best practices as part of the framework. Best of all, it scales really well. React: Provides the view portion in the context of the Model-View- Controller (MVC) approach. It doesn’t assume anything about the underlying technology stack that you’re using to model or control the data. All React is interested in is displaying the data on screen.
Difference between a framework and a library A library is essentially a set of functions that you can call. Each call does some work and returns control to the client. A framework embodies some abstract design, with more behavior built in. In order to use it you need to insert your behavior into various places in the framework either by sub classing or by plugging in your own classes. The framework's code then calls your code at these points. Relation: Both of them defined API, which is used for programmers to use. To put those together, we can think of a library as a certain function of an application, a framework as the skeleton of the application, and an API is connector to put those together. A typical development process normally starts with a framework, and fill out functions defined in libraries through API.
JS Library VS JS Framework JS Framework differs from a JavaScript library in its control flow: a library offers functions to be called by its parent code, whereas a framework defines the entire application design. A developer does not call a framework; instead it is the framework that will call and use the code in some particular way.
References https://www.w3schools.com/ Sharma, P. (2013). Introduction to Web Technology. SK Kataria and Sons. Peterson, C. (2014). Learning responsive web design: a beginner's guide. " O'Reilly Media, Inc.".