Introduction to Web programming 0731213
CSS is a language that describes the style of an HTML document
adding style There are two aspects to adding style to a Web page via CSS Specifying what the style looks like “Declaration” Naming the HTML element “Selector” selector { property: value; ... } CSS A CSS Selector A CSS declaration p { font-family: sans-serif; color: red; } CSS
Naming HTML elements There are two naming options for an HTML element: assigning “ID” names and “class names.” An id declaration is the same as a class declaration, except that it should only be used specifically once per Web page <h1 class=”myboldandbluelook”> Introduction </h1> .myboldandbluelook { font-weight: bold; color: blue; } <h1 id=”myboldandbluelook”> Introduction </h1> #myboldandbluelook { font-weight: bold; color: blue; }
Attaching a CSS file <link> <head> ... <link href="filename" type="text/css" rel="stylesheet" /> </head> HTML <link href="style.css" type="text/css" rel="stylesheet" /> <link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css" /> HTML A page can link to multiple style sheet files In case of a conflict (two sheets define a style for the same HTML element), the latter sheet's properties will be used
CSS properties for colors color: red; background-color: yellow; } CSS This paragraph uses the style above output property description color color of the element's text background-color color that will appear behind the element
CSS properties CSS properties for colors. More details CSS properties for Backgrounds. More details CSS properties for Borders. More details CSS properties for Margins. More details CSS properties for padding. More details CSS properties for text. More details CSS properties for fonts. More details CSS properties for links. More details CSS properties for float and clear. More details CSS properties for align. More details and even more
CSS comments /*…*/ /* This is a comment. It can span many lines in the CSS file. */ p { color: red; background-color: aqua; } CSS The // single-line comment style is NOT supported in CSS The <!-- ... --> HTML comment style is also NOT supported in CSS
Grouping styles This h2 uses the above styles. p, h1, h2 { color: green; } h2 { background-color: yellow; } CSS This paragraph uses the above style. output This h2 uses the above styles. A style can select multiple elements separated by commas The individual elements can also have their own styles
Descendant (nested) selector Syntax is similar to the example of grouping selectors—but without the commas Selects all elements that correspond to the “nested” structure specified by the selector E.g., the above style will apply to any <strong> HTML tag that lies within an <a> tag that lies within an <li> tag that lies within a <ul> tag ul li a strong{color:green;} CSS
CSS Example Example.html style.css <!DOCTYPE html> <html> <head> <link href=“style.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>My First CSS Example</h1> <p>This is a paragraph.</p> </body> </html> HTML body { background-color: lightblue; } h1 { color: white; text-align: center; p { font-family: verdana; font-size: 20px; } CSS
JavaScript
Why Study JavaScript? JavaScript is very easy to learn. No setup is required. Widely accepted by most of the Web browsers Interaction at client side with the user is made more interesting and more easier 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.
Introduction JavaScript Can Change HTML Content One of many JavaScript HTML methods is getElementById(). This example uses the method to "find" an HTML element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript": JavaScript Can Change HTML Styles (CSS) Changing the style of an HTML element, is a variant of changing an HTML attribute document.getElementById("demo").innerHTML = "Hello JavaScript"; document.getElementById('demo').innerHTML = 'Hello JavaScript’; JavaScript accepts both double and single quotes document.getElementById("demo").style.fontSize = "25px";
Introduction JavaScript Can Hide or Show HTML Elements Hiding HTML elements can be done by changing the display style document.getElementById("demo").style.display = "none"; document.getElementById("demo").style.display = "block";
Where to put JavaScript The <script> Tag In HTML, JavaScript code must be inserted between <script> and </script> tags. You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both. <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script>
JavaScript Functions A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it). A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...) The code to be executed, by the function, is placed inside curly brackets: {} function myFunction(p1, p2) { return p1 * p2; // The function returns the product of p1 and p2 }
JavaScript Events HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events. <element event='some JavaScript’> <input type=text onmouseover="document.getElementById('demo').innerHTML = ‘Hello’ "/> <input type=text onmouseover=“changeText()"/>
JavaScript Example <html> <head> <script> function changeText1() {document.getElementById("demo").innerHTML = "Your mouse is here.";} function changeText2() {document.getElementById("demo").innerHTML = "Your mouse left.";} </script> </head> <body> <h1>A Web Page</h1> <p id="demo">A Paragraph</p> <input type=text onmouseover="changeText1()" onmouseout="changeText2()"/> </body> </html>
Common HTML Events Event Description onchange An HTML element has been changed onclick The user clicks an HTML element onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown The user pushes a keyboard key onload The browser has finished loading the page
jQuery jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.
What is jQuery? jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and HTML manipulation. The jQuery library contains the following features: HTML manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities
Adding jQuery to Your Web Pages Two ways Download the jQuery library from jQuery.com Include jQuery from a CDN (Content Delivery Network), like Google <head> <script src="jquery-3.2.1.min.js"></script> </head> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head>
jQuery Syntax The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action() A $ sign to define/access jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s) Examples: $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test".
jQuery Selectors The element Selector: The jQuery element selector selects elements based on the element name. The #id Selector: The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. The .class Selector: The jQuery class selector finds elements with a specific class. $("p").hide(); $("#test").hide(); $(".test").hide();
jQuery Events Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload Ready Event: This is to prevent any jQuery code from running before the document is finished loading (is ready). $(document).ready(function(){ $("p").click(function(){ $(this).hide(); });
Set Content and Attributes text() - Sets or returns the text content of selected elements html() - Sets or returns the content of selected elements (including HTML markup) val() - Sets or returns the value of form fields $(“p").click(function(){ $("#test1").text("Hello world!"); }); $(“p").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $(“p").click(function(){ $("#test3").val("Dolly Duck"); }); CSS
access and manipulate elements and attributes Get: text(), html(), val(), and attr(): details Set: text(), html(), val(), and attr(): details Add: append(), prepend(), after(), and before(): details Remove: remove() and empty(): details Get and Set CSS: addClass(), removeClass(), and toggleClass(): details Get and Set CSS: css(): details Dimensions: width(), height(), innerWidth(), innerHeight(), outerWidth(), and outerHeight(): details
jQuery Example <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>
XML XML stands for extensible Markup Language. XML was designed to store and transport data.
What is XML? XML stands for eXtensible Markup Language XML is a markup language much like HTML XML was designed to store and transport data XML was designed to be self-descriptive
How Can XML be Used? XML Separates Data from Presentation XML does not carry any information about how to be displayed. The same XML data can be used in many different presentation scenarios. Because of this, with XML, there is a full separation between data and presentation. XML is Often a Complement to HTML In many HTML applications, XML is used to store or transport data, while HTML is used to format and display the same data.
XML Elements An XML element is everything from (including) the element's start tag to (including) the element's end tag. An element can contain: text attributes other elements or a mix of the above <book category="children"> <title>Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book>
XML Attributes XML elements can have attributes, just like HTML. Attributes are designed to contain data related to a specific element XML Attributes Must be Quoted <person gender="female">
XML Example <?xml version="1.0" encoding="UTF-8"?> <breakfast_menu> <food> <name>Belgian Waffles</name> <price>$5.95</price> <description> Two of our famous Belgian Waffles with plenty of real maple syrup </description> <calories>650</calories> </food> <food> <name>Strawberry Belgian Waffles</name> <price>$7.95</price> <description> Light Belgian waffles covered with strawberries and whipped cream </description> <calories>900</calories> </food> </breakfast_menu>
Prepared By: Raneem Qaddoura 2017 The end Prepared By: Raneem Qaddoura 2017