js---4th unit

Question 1

DOM

Answer 1

1. According to W3C, Tom is platform and language neutral interface that allows programmes and scripts to dynamically access and update the content structure and style of the document
2. Document object represents the whole html document
3. When HTML document is loaded in the browser it becomes document object
4. It is the root element that represents the html document
5. It has its own properties and methods
6. With the help of document object we can add dynamic content to our web page

Question 3

props of DOM

Answer 3

flow chart

Question 4

methods of DOM

Answer 4

1. write(“str”)
2. writeln(“str”)
3. getElementById(‘‘id’’)
4. getElementByName(‘‘name’’)
5. getElementByTagName(“tag”)
6. getElemntByClassName(“cls”)

Question 5

innerHTML

Answer 5

1. Inner html property can be used to write dynamic html and html document
2. It is used mostly in the web pages to generate the dynamic html such as registration form, comment form, links etc.

<script>
function showcommentform() {  
var data="Name:<input type='text' name='name'><br>Comment:<br><textarea rows='5' cols='80'></textarea>  
<br><input type='submit' value='Post Comment'>";  
document.getElementById('mylocation').innerHTML=data;  
}
</script>

<form>
<input></input>
<div></div>
</form>

Question 6

events and event handling

Answer 6

1. event: Change in the state of an object is called as an event
2. in HTML there are various events which represent that some activities performed by the user or by the browser
3. When javascript code is included in Html javascript react over these events and allow the execution this process of reacting over events is called as event handling
4. tus javascript handles the html events via event handlers

Question 8

Mouse events

Answer 8

1. Click
2. mouseover
3. mouseout
4. mousedown
5. mouseup
6. mousemove

Question 9

Keyboard events

Answer 9

Keydown and keyup

Question 10

form events

Answer 10

1. Focus – Users focus on an element
2. submit – Submits the form
3. blur — Her focus is away from formally
4. Change – When user modifies or changes the value of a form element

Question 11

window/doc eve

Answer 11

1. Load(Browser finishes loading of the page)
2. unLoad (When visitor leaves the current web page the browser unloads)
3. resize (When visitor resizes the window of the browser)

Question 12

add eventlistener

Answer 12

1. add event listener method attaches in event handler to the specified element
2. It attaches without overwriting existing event handlers
3. You can add many handlers to one element
4. You can Add event listeners 2HTML elements and dom objects also
5. When using event cleaser method the js is separated from html markup for better readability and allows you to add event listeners even when you dont control html

Question 13

syn of Add and remove event listener

Answer 13

addEventListener(“event”,fun(calling/decl),useCapture)
removeEventListener(“event”,function)

Question 14

Event bubbling and even capturing

Answer 14

addEventListener(event, function, useCapture)
useCapture
1. There are two ways of even propagating html:
i) bubling
ii) capturing
2. Event propagation is the way of defining the element order when element occurs
3. Let’s say <P> is decalred in <div> tag and the user clicks on P element which elements clicked event should be handled first
4. bubbling(true): In bubbling first in innermost elements are handled then the outermost(<div>)
5. capturing(false): In capturing outermost element(<div>) is handled first and then in innermost(<P>)

6. By default it is declared as false that is capturing…………. If we declare it as true then it becomes bubbling