WEB CLIENT SIDE TECHNOLOGIES 0780341 RANEEM QADDOURA WHY

WEB CLIENT SIDE TECHNOLOGIES 0780341 RANEEM QADDOURA

WHY STUDY JAVASCRIPT? • Java. Script is the programming language of HTML and the Web. • Java. Script is easy to learn. • Make actions in the user's browser without sending messages back and forth to the server. • Java. Script 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). 2 • Considering the performance, Java. Script is fast and Reliable.

REVIEW Where to put Java. Script? <script> document. get. Element. By. Id("demo"). inner. HTML = "My First Java. Script"; </script> • 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 Java. Script 3 <script src="my. Script. js"></script>

REVIEW Java. Script Can Change HTML Content document. get. Element. By. Id("demo"). inner. HTML = "Hello Java. Script"; Java. Script Can Change HTML Attribute Values document. get. Element. By. Id("demo"). src='pic_bulbon. gif' Java. Script Can Change HTML Styles (CSS) document. get. Element. By. Id("demo"). style. font. Size = "25 px"; Java. Script Can Show / Hide HTML Elements Example 4 document. get. Element. By. Id("demo"). style. display = "none"; document. get. Element. By. Id("demo"). style. display = “block"; document. get. Element. By. Id("demo"). style. display = “inline-block"; document. get. Element. By. Id("demo"). style. display = “inline";

JS HTML DOM 5 The HTML DOM (Document Object Model)

DOM DOCUMENT Finding HTML Elements Method Description document. get. Element. By. Id(id) Find an element by element id document. get. Elements. By. Tag. Name(name) Find elements by tag name document. get. Elements. By. Class. Name(name) Find elements by class name • By Id: Example 1 • By Tag name: Example 2 • By Class name: Example 3 6 • By CSS Selector: Example 4

DOM DOCUMENT Changing HTML Elements Property Description element. attribute = new value Change the attribute value of an HTML element. style. property = new style Change the style of an HTML element Method Description element. set. Attribute(attribute, value) Change the attribute value of an HTML element 7 element. inner. HTML = new html content Change the inner HTML of an element

DOM DOCUMENT Adding and Deleting Elements Method Description document. create. Element(element) Create an HTML element document. remove. Child(element) Remove an HTML element document. append. Child(element) Add an HTML element document. replace. Child(new, old) Replace an HTML element document. write(text) Write into the HTML output stream • Create Element, Append Child: Example 1 • Remove Child: Example 2 • Replace Child: Example 3 8 • Write: Example 4

JAVASCRIPT ESSENTIALS Variables Data types Arithmetic Functions Objects Date Conditions Loop Forms Events Cookies 9 • • •

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 Java. Script library is a library of pre-written Java. Script which allows for easier development of Java. Script-based applications, especially for AJAX and other web-centric technologies

JS LIBRARIES List of notable JS libraries • j. Query: j. Query is a fast, small, and feature-rich Java. Script 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. • D 3. js: The Data Driven Documents, or D 3. js, library is unique in that it puts the data first. • Parsley: Parsley provides more form-validation techniques than just about any other Java. Script library. • Qunit: QUnit is one of several unit-testing libraries available for Java. Script.

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 Java. Script framework is an application framework written in Java. Script. It differs from a Java. Script 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 Java. Script 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 • Angular. JS: 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 Java. Script 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-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 15 JS Framework differs from a Java. Script 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. w 3 schools. 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. ".