tailieunhanh - Lecture Introduction to web engineering - Lec 21: JavaScript DOM

After studying this chapter you will be able to understand: Dialog boxes in JavaScript, alert box, prompt box, confirm box, document object model (DOM), retrieving HTML elements, retrieving the text of an element, getting value of attributes, setting value of attributes. | Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1 What is JavaScript? Embedding JavaScript with HTML JavaScript conventions Variables in JavaScript JavaScript operators Input output in JavaScript JavaScript functions Conditional Statements Looping Statements Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan. 2 Dialog boxes in JavaScript HTML Document Object Model (DOM) Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 3 JavaScript provides the ability to pickup user input or display small amounts of text to the user by using dialog boxes These dialog boxes appear as separate windows and their content depends on the information provided by the user An alert box is simply a small message box that pops up and gives the user some information An alert dialog box is mostly used to give a warning message to the users When an alert box pops up, the user will have to click "OK" to proceed Syntax: alert(“message”) . | Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1 What is JavaScript? Embedding JavaScript with HTML JavaScript conventions Variables in JavaScript JavaScript operators Input output in JavaScript JavaScript functions Conditional Statements Looping Statements Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan. 2 Dialog boxes in JavaScript HTML Document Object Model (DOM) Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 3 JavaScript provides the ability to pickup user input or display small amounts of text to the user by using dialog boxes These dialog boxes appear as separate windows and their content depends on the information provided by the user An alert box is simply a small message box that pops up and gives the user some information An alert dialog box is mostly used to give a warning message to the users When an alert box pops up, the user will have to click "OK" to proceed Syntax: alert(“message”) Start of the function Displays an alert box Calling the function A prompt box is often used if you want the user to input a value before entering a page When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value If the user clicks "OK" the box returns the input value If the user clicks "Cancel" the box returns null Start of the function Prompt box Calling the function A confirm box is often used if you want the user to verify or accept something When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed If the user clicks "OK", the box returns true If the user clicks "Cancel", the box returns false User input confirmation Not confirmed Once html element are rendered (painted) in the browser window, browser can not recognize them To create interactive web pages it is vital that the browser continues to recognize HTML elements JavaScript enabled browsers do this because they recognize and uses DOM