Tizen Web UI Technologies (Tizen Ver. 2.3) Spring 2015 Soo Dong Kim, Ph.D. Professor, Department of Computer Science Software Engineering Laboratory Soongsil University Office 02-820-0909 Mobile 010-7392-2220 sdkim777@gmail.com http://soft.ssu.ac.kr 1
Web Technologies for Tizen Web UI HTML Markup language to form building blocks of web pages CSS Style sheet to define how HTML elements are to be displayed JavaScript Programming language to define behaviors of web pages JQuery JavaScript library to simplify JavaScript programming 2
Unit 5-1. HTML & CSS 3
What is HTML? Stands for Hyper Text Markup Language A markup language for describing web documents To describe HTML documents Each HTML tag describes different document content. 4
Key Usage of HTML tags Layout Text Style Element Form List HTML Tags 5
HTML Tags - Layout To define a structure of an HTML document Key Tags <header> To represent a container for introductory content <section> To define a section in a document <div> To define a division or a section in an HTML document <footer> To define a footer for a document or section 6
HTML Tags Text Style To define text styles of an HTML documents Key Tags <p> To define a paragraph <h1> - <h6> To define HTML headings <i> To define a part of text in an alternate voice or mood 7
HTML Tags - Element To define widgets in an HTML document Key Tags <a> To define a hyperlink, which is used to link from one page to another <button> To define a clickable button <canvas> To draw graphics via scripting JavaScript <img> To define an image in an HTML page 8
HTML Tags - Form To specify a field where the user can enter data Key Tags <form> To contain one or more form elements <input> To specify an input field where the user can enter data <select> To create a drop-down list <option> To define an option in a select list <textarea> To define a multi-line text input control. 9
To show items as a list Key Tags <ul> HTML Tags - List To define an unordered (bulleted) list <ol> To define an ordered list <li> To define a list item Used in ordered lists(<ol>), unordered lists (<ul>) 10
What is CSS? Stands for Cascading Style Sheets Define how HTML elements are to be displayed Linked Style Sheets <link rel= stylesheet type= text/css href= mystyle.css > Embedded Style Sheet <style> body { background-color: #d0e4fe; } </style> 11
Selector CSS Grammar To select and manipulate HTML elements Property To indicate which aspect of the element are modified Value Value of property selector property body { background-color: #FFFFFF; } value 12
Element Selector Selector ID Selector Class Selector Attribute Selector 13
Selector (Element Selector) To select elements based on the element (HTML Tag) name Example) To select all <p> elements on a page p { text-align: center; color: red; } Example) To select all <p>, <h1>, and <h2> elements on a page p, h1, h2 { text-align: center; color: red; } 14
Selector (ID Selector) To use the id of an HTML element to select a specific element To use # character Example) To select a specific element by given id, id_1 #id_1 { text-align: center; color: red; } 15
Selector (Class Selector) To select elements with a specific class name To use. symbol Example) To select elements by given class name, center.center { text-align: center; color: red; } Example) To select <p> elements having class name, center p.center { text-align: center; color: red; } 16
Selector (Attribute Selector) To select elements with a specific attribute To use [] symbol Example) To select <a> elements which have target attribute a[target] { background-color: yellow; } Example) To select <a> elements of which target attribute is _blank a[target= _blank ] { background-color: yellow; } 17
Key Categories of Property Background Border Text Formatting Margin & Padding Property 18
Property (Background) To define the background effects of an element Key Properties Background-color To specify the background color of an element Background-image To specify an image to use as the background of an element Background-repeat To specify repetition of the background image Background-position To specify position of the background image 19
Property (Border) To define the border effects of an elements Key Properties Border-style To specify what kind of border do display Dotted, Dashed, Solid, etc. Border-width To set the width of the border Border-color To set the color of the border 20
Property (Text Formatting) To specify format of text Key Properties Color To set the color of the text Text-align To set the horizontal alignment of a text Text-decoration To set or remove decorations from text To mostly used to remove underlines from links for design purposes Text-transform To specify uppercase and lowercase letters in a text 21
Property (Margin & Padding) To define the space related to HTML elements Key Properties Margin To define the space around elements Padding To define the space between the element border and the element content 22
Embedded CSS Code Example Output <!DOCTYPE html> <html> <head> <style> body { background-color: #d0e4fe; } h1 { color: orange; text-align: center; } p { font-family: "Times New Roman"; font-size: 20px; } </style> </head> <body> <h1>my First CSS Example</h1> <p>this is a paragraph.</p> </body> </html> 23
Unit 5-2. Javascript & jquery 24
What is JavaScript? Programming language of HTML and the Web To define behaviors of web pages To alter the document content that is displayed To interact with the user 25
Linked JavaScript In HTML document; JavaScript Placement <head> <script src= myjavascript.js"></script> <head> Embedded JavaScript In HTML document; <head> <script> //JavaScript Statements </script> </head> 26
Variables (1) 5 data types that can contain values; String Number Boolean Object Function 27
To use var keywords Variables (2) var str = Hello JS // Assigns string var i = 5; // Assigns number var b = true; // Assigns boolean var obj = {name: John, age: 28 } // Assigns object var date = new Date() // Assigns object var arr = [1,2,3,4] // Assigns object var func = function(){ } // Assigns function To use typeof to find the data type typeof str typeof i typeof b typeof obj typeof date typeof arr typeof func // Returns string // Returns number // Returns boolean // Returns object // Returns object // Returns object // Returns function 28
Operator (1) Arithmetic Operators To perform arithmetic on numbers Assignment Operators To assign values to JavaScript variables Operator Description Operator Example Same As + Addition - Subtraction * Multiplication / Division % Modules ++ Increment = x = y x = y += x += y x = x + y = x = y x = x y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y -- Decrement 29
Comparison Operators Operator (2) To determine equality or difference between variables or values Given that x=5; Operator Description Comparing Returns == Equal to x == 8 false x == 5 true === Equal value and equal type x === 5 false x === 5 true!= Not equal x!= 8 true!== Not equal value and equal type x!== 5 true x!== 5 false > Greater than x > 8 false < Less than x < 8 true >= Greater than or equal to x >= 8 false <= Less than or equal to x <= 8 true 30
Examples of JavaScript To change contents of HTML elements To change CSS of HTML elements To react events in a web page 31
Example Content Change To replace text of a specific Source Code Output <script> function myfunction() { Gets element of which id is demo var paragraph = document.getelementbyid("demo"); paragraph.innerhtml = "Hello JavaScript!"; } <body> Sets text of the element to Hello JavaScript! <p id="demo">click the button to replace text.</p> Click Button! <button onclick="myfunction()">try it</button> </body> Invoked when the button is clicked 32
Example CSS Change To change CSS styles of a specific element Source Code... <script> function changetextcolor(color){ var paragraph = document.getelementbyid("p1"); paragraph.style.color= color; } <body> <p id="p1"> This is a text. </p> <button onclick="changetextcolor('red')">red</button> <button onclick="changetextcolor('blue')">blue</button> </body> Changes text color Invoked to change text color as red Invoked to change text color as blue Gets element of which id is p1 Output Click Red! Click Blue! 33
Example Event Handling To react to an click event occurred in a specific button Source Code Output <script> function onload() { var b1= document.getelementbyid("b1"); b1.onclick= function(){ alert('the element is clicked!'); } } </script> Gets element of which id is b1 Invoked when the page has been loaded Shows an alert page with the message Click Button! <body onload="onload()"> <button id="b1">hello JavaScript</button> </body> 34
OOP in JavaScript To define classes, private attributes/functions, and public attributes/functions function MyClass() { var _privateattr = "value"; function _privatemethod1() { } var _privatemethod2 = function() {}; } var self = { publicattr: "value", publicmethod: function() { console.log("publicattr: "+self.publicattr); } }; return self; 35
What is jquery? A JavaScript library to simplify JavaScript programming To make it much easier to use JavaScript on your website To take a lot of common tasks that require many lines of JavaScript code 36
JQuery Syntax Basic Syntax $ sign to access jquery (selector) to query or find HTML elements action() to be performed on the element Examples $(selector).action() $("p").hide(); //Hides all <p> elements. $(".test").hide(); // Hides all elements with class="test". $("#test").hide(); // Hides the element with id="test". 37
Document Ready Event To prevent jquery or JavaScript code from running before a HTML document is ready $(document).ready(function(){ //jquery or JavaScript code go here }); $(function () { //jquery or JavaScript code go here }); 38
jquery Selector (1) To find HTML element(s) Based on the existing CSS Selectors Element Selector ID Selector Class Selector Attribute Selector Value Selector 39
Element Selector jquery Selector (2) To select HTML elements based on the element name $( p").hide(); //Hides all <p> elements on a page ID Selector To use id attribute of an HTML tag to find a specific element To use # character $("#test").hide(); // Hides an element with id= test http://www.w3schools.com/jquery/tryit. asp?filename=tryjquery_hide_show 40
Class Selector jquery Selector (3) To find elements with a specific class To use. character Attribute Selector $(.test").hide(); // Hides all elements with class= test To select element with a specific attribute $("p[attr=hello]").hide(); //Hides all <p> elements with attr= hello 41
Other Selectors jquery Selector (4) Syntax Description $("*") Selects all elements $(this) $("p.intro") $("p:first") $("ul li:first") $("ul li:first-child") $("[href]") $("a[target='_blank']") $("a[target!='_blank']") $(":button") $("tr:even") $("tr:odd") Selects the current HTML element Selects all <p> elements with class="intro" Selects the first <p> element Selects the first <li> element of the first <ul> Selects the first <li> element of every <ul> Selects all elements with an href attribute Selects all <a> elements with a target attribute value equal to "_blank" Selects all <a> elements with a target attribute value NOT equal to "_blank" Selects all <button> elements and <input> elements of type="button" Selects all even <tr> elements Selects all odd <tr> elements 42
jquery Action To be performed on the selected elements To get/set contents and attributes To add/remove HTML elements To manipulate CSS To handle events 43
jquery Action - Contents and Attributes (1) text() To set/return text of the element(s) html() To set/return html contents of the element(s) val() To set/return a value of form fields //Returns text of a element with id= id var text = $( #id").text(); //Returns HTML contents of a element with id= id var html = $( #id").html(); //Returns value of a form fields with id= id var val = $( #id").val(); //Sets text of a element with id= id as Hello jquery! $( #id").text( Hello jquery! ); //Sets HTML contents of a element with id= id as Hello jquery! $( #id").html( <p>hello jquery!</p> ); //Returns value of a form fields with id= id as value $( #id").val( value ); 44
jquery Action - Contents and Attributes (2) attr() To set/return attribute values //Returns a value of the href attribute var attr = $( #id").attr( href ); //Sets the value of the href attribute $( #id").attr( href, http://www.soft.ssu.ac.kr ); //Sets multiple attributes $( #id").attr( { href : http://www.soft.ssu.ac.kr, title : Software Engineering Laboratory } ); 45
jquery Action - HTML Element (1) append() To insert content at the end of the selected element prepend() To insert content at the beginning of the selected element after() To insert content after the selected element before() To insert content before the selected element $( p ).append( some appended text. ); $( p ).prepend( some prepended text. ); $( p ).after( some text after. ); $( p ).before( some text before. ); 46
jquery Action - HTML Element (2) remove() To remove the selected elements and its child element(s) empty() $("#div1").remove(); To remove the child element of the selected element(s) $("#div1").empty(); 47
jquery Action - CSS Manipulation (1) addclass() To add one or more classes to the selected elements removeclass() To remove one or more classes from the selected elements toggle(class) To toggle between adding/removing classes from the selected elements $( div ).addclass( important ) $( div ).addclass( important blue ) // Adds an important value to a class attribute // Adds important and blue values to a class attribute $( div ).removeclass( important ) // Removes an important value from a class attribute $( div ).removeclass( important blue ) // Removes important and blue values from a class attribute $( div ).toggleclass( important ) $( div ).toggleclass( important blue ) // Adds or Removes an important value from a class attribute // Adds or Removes important and blue values from a class attribute http://www.w3schools.com/jquery/tryit.asp?filen ame=tryjquery_dom_toggleclass 48
jquery Action - CSS Manipulation (2) css() To set/return on or more style properties for the selected element(s) // Returns the background-color value var bgcolor = $( p ).css( background-color ) // Sets the background-color value as yellow $( p ).css( background-color, yellow ) // Sets multiple style properties $( p ).css( { background-color : yellow }, { font-size : 200% } ) 49
jquery Action - Event Handling Event Method Syntax Key Event Methods $(selector).eventmethod(function(){ // Event handling code goes here! }); Mouse Events Keyboard Events Form Events click() keypress() submit() dblclick() keydown() change() mouseenter() keyup() focus() mouseleave() blur() http://www.w3schools.com/jquery/tryit.asp?filen ame=tryjquery_event_blur_alert 50
Example (1) To handle click events To Change CSS Style and text of a HTML element Source Code JavaScript <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#p1").text("hello world!"); }); Sets text as Hello world! $("#btn2").click(function(){ $("#p1").css("color", "blue"); }); Changes text color as blue }); </script> Invoked when #btn1 button clicked Invoked when #btn2 button clicked HTML <body> <p id="p1">this is a paragraph.</p> <button id="btn1"> Set Text </button> <button id="btn2"> Set CSS Style </button> </body> 51
Example (2) Output Initial Screen Case 1: After Set Text button clicked Case 2: After Set CSS Style button clicked 52
Thank You! 53