Week 12_Javascript Generalization (DOM, Functions, Selections, Iterations)

0.0(0)
studied byStudied by 8 people
0.0(0)
full-widthCall Kai
learnLearn
examPractice Test
spaced repetitionSpaced Repetition
heart puzzleMatch
flashcardsFlashcards
GameKnowt Play
Card Sorting

1/50

encourage image

There's no tags or description

Looks like no tags are added yet.

Study Analytics
Name
Mastery
Learn
Test
Matching
Spaced

No study sessions yet.

51 Terms

1
New cards

Inline JavaScript

You can directly add JavaScript within an HTML element’s attribute, such as the onclick attribute of a button.

2
New cards

Internal JavaScript

  • JavaScript can be written inside a <script> tag within the HTML file’s <head> or <body> section.

  • It is generally placed in the <head> section for scripts that don’t affect page load,

  • but if the script manipulates the DOM, it’s usually placed before the closing </body> tag.

3
New cards

external javascript

For modularity and better management, JavaScript code is usually placed in a separate file with the .js extension and linked to the HTML file using the <script> tag

4
New cards

src

If the script is external, you must use the _____ attribute to specify the file path.

5
New cards

defer attribute

ensures the script is executed after the HTML document has been fully parsed

6
New cards

async attribute

runs the script as soon as it is available but without blocking the page from rendering.

7
New cards

Document Object Manipulation (DOM)

  • represents the structure of a webpage, allowing JavaScript to access and modify the HTML.

  • It's a tree-like model where every element is a node, and JavaScript interacts with it to change, add, or remove elements dynamically.

8
New cards

Properties

allow you to retrieve or set the value of an element's attributes or characteristics

9
New cards

Methods

are functions associated with objects that can perform actions on elements

10
New cards

getElementById()

returns the element having the given id value

11
New cards

getElementsByName()

returns all the elements having the given name value.

12
New cards

getElementsByTagName()

returns all the elements having the given tag name.

13
New cards

getElementsByClassName()

returns all the elements having the given class name.

14
New cards

document.getElementById()

Returns the element of specified id.

15
New cards

document.getElementByClassName()

Used for selecting or getting the elements through their class name value.

16
New cards

document.getElementsByTagName()

returns all the element of specified tag name.

17
New cards

innerHTML

property can be used to write the dynamic html on the html document

18
New cards

innerText

  • property can be used to write the dynamic text on the html document.

  • Here, text will not be interpreted as html text but a normal text

19
New cards

querySelector

  • The _______________ method in JavaScript is used to select HTML elements using CSS selectors.

  • It returns the first element within the document that matches the specified selector or group of selectors

20
New cards

querySelectorAll

For selecting multiple elements.

21
New cards

JavaScript events

  • are actions or occurrences that happen in the browser, which can be detected and handled by JavaScript code.

  • It can be triggered by user interactions, browser actions, or other actions within the web page.

22
New cards

Event

  • The change in the state of an object

  • represents that some activity is performed by the user or by the browser

23
New cards

Event Handling,

Event Handlers

  • When JavaScript code is included in HTML, js react over these events and allow the execution.

  • This process of reacting over the events is called _____.

  • Thus, js handles the HTML events via _____.

24
New cards

addEventListener method

  • is used to attach an event handler to a specific element.

  • It allows you to specify the type of event you want to listen for (like a click, keypress, or mouse movement) and the function that should be executed when that event occurs.

25
New cards

useCapture

A boolean that indicates whether to use event capturing (true) or event bubbling (false).

26
New cards

click

mouse event that is triggered when an element is clicked

27
New cards

dblclick

mouse event that is triggered when an element is double-clicked

28
New cards

mouseover

mouse event that is triggered when the mouse pointer enters an element.

29
New cards

mouseout

mouse event that is triggered when the mouse pointer leaves an element.

30
New cards

mousemove

mouse event that is triggered when the mouse is moved over an element.

31
New cards

function

  • is a group of reusable code which can be called anywhere in your program.

  • This eliminates the need of writing the same code again and again.

32
New cards

modular codes

function helps programmers in writing _____.

33
New cards

function,

unique function name,

parameters,

statement block

  • The most common way to define a function in JavaScript is by using the _____keyword,

  • followed by a _____,

  • a list of _____(that might be empty),

  • and a _____ surrounded by curly braces.

34
New cards

comma

A function can take multiple parameters separated by _____.

35
New cards

return

  • A JavaScript function can have an optional _____ statement.

  • This is required if you want to return a value from a function.

  • should be the last statement in a function.

36
New cards

window.print()

  • The JavaScript print function _____ prints the current web page when executed.

  • Although it serves the purpose of getting a printout, it is not a recommended way.

37
New cards

printer friendly page

  • a page with text, no images, graphics, or advertising.

  • can be made in the following ways:

    • Make a copy of the page and leave out unwanted text and graphics, then link to that printer friendly page from the original.

    • If you do not want to keep an extra copy of a page, then you can mark your printable text using proper comments like <!-- PRINT STARTS HERE -->..... <!-- PRINT ENDS HERE --> and then you can use PERL or any other script in the background to purge printable text and display for final printing

38
New cards

switch

  • The objective of a _____ statement is to give an expression to evaluate and several different statements to execute based on the value of the expression.

  • The interpreter checks each case against the value of the expression until a match is found.

39
New cards

default

If nothing matches in a switch case, a _____ condition will be used.

40
New cards

break

  • The __________ statements indicate the end of a particular case.

  • If they were omitted, the interpreter would continue executing each statement in each of the following cases.

41
New cards

while loop

  • The most basic loop in JavaScript

  • Its purpose is to execute a statement or code block repeatedly if an expression is true.

  • Once the expression becomes false, the loop terminates.

42
New cards

do...while

  • is like the while loop except that the condition check happens at the end of the loop.

  • This means that the loop will always be executed at least once, even if the condition is false.

43
New cards

for loop

is the most compact form of looping

44
New cards

loop initialization

where we initialize our counter to a starting value.

45
New cards

initialization statement

is executed before the loop begins.

46
New cards

test statement

  • will test if a given condition is true or not.

  • If the condition is true, then the code given inside the loop will be executed, otherwise the control will come out of the loop.

47
New cards

iteration statement

where you can increase or decrease your counter.

48
New cards

for...in loop

used to loop through an object's properties

49
New cards

variablename

In each iteration in a for…in loop, one property from object is assigned to _____ and this loop continues till all the properties of the object are exhausted.

50
New cards

break

is used to exit a loop early, breaking out of the enclosing curly braces.

51
New cards

continue

The _______________ statement tells the interpreter to immediately start the next iteration of the loop and skip the remaining code block