Week 10-11_Introduction to Javascript (Structure, Style, Interactivity, Variables, and Types)

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

1/113

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.

114 Terms

1
New cards

JavaScript

  • A dynamic computer programming language.

  • It is lightweight and most used as a part of web pages; whose implementations allow client-side script to interact with the user and make dynamic pages.

  • It is an interpreted programming language with object-oriented capabilities.

2
New cards

LiveScript,

Netscape,

Netscape 2.0,

1995

  • JavaScript was first known as _____, but _____ changed its name to JavaScript, possibly because of the excitement being generated by Java

  • Made its first appearance in _____ in _____ with this name.

3
New cards

Brendan Eich,

Netscape Communications Corporation,

Mocha,

LiveScript

JavaScript was originally developed by _____ of _____ under the name _____, then _____, and finally renamed to JavaScript.

4
New cards

Client-side JavaScript

  • the most common form of the language.

  • The script should be included in or referenced by an  HTML document for the code to be interpreted by the browser.

  • It means that a web page need not be a static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content.

5
New cards

JavaScript client-side mechanism

  • provides many advantages over traditional CGI server-side scripts.

  • For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.

6
New cards

JavaScript code

Is executed when the user submits the form, and only if all the entries are valid, they would be submitted to the Web Server

7
New cards

JavaScript

can be used to trap user-initiated events such as button clicks, link navigation, and other actions that the user initiates explicitly or implicitly.

8
New cards

Less server interaction,

Immediate feedback to the visitors,

Increased interactivity,

Richer interfaces

4 Advantages of JavaScript

9
New cards

Less server interaction

  • You can validate user input before sending the page off to the server.

  • This saves server traffic, which means less load on your server.

10
New cards

Immediate feedback to the visitors

They do not have to wait for a page reload to see if they have forgotten to enter something.

11
New cards

Increased interactivity

You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard

12
New cards

Richer interfaces

You can use JavaScript to include such items as drag-and-drop components and sliders to give a _____ to your site visitors.

13
New cards

full-fledged programming language

Limitations of JavaScript

  • We cannot treat JavaScript as a _____.

14
New cards

Client-side JavaScript

  • does not allow the reading or writing of files.

  • This has been kept for security reason.

15
New cards

networking applications

JavaScript cannot be used for _____ because there is no such support available.

16
New cards

multithreading, multiprocessor

JavaScript does not have any _____ or _____ capabilities

17
New cards

<script> </script>

JavaScript can be implemented using JavaScript statements that are placed within the _____ HTML tags in a web page.

18
New cards

<head>

You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is normally recommended that you should keep it within the _____ tags

19
New cards

<script> tag

alerts the browser program to start interpreting all the text between these tags as a script

20
New cards

Language,

Type

The script tag takes two important attributes

21
New cards

Language

  • This attribute specifies what scripting language you are using.

  • Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute.

22
New cards

javascript

Typically, Language value will be _____.

23
New cards

Type

This attribute is what is now recommended to indicate the scripting language in use

24
New cards

text/javascript

Type value should be set to _____

25
New cards

spaces,

tabs,

newlines

  • JavaScript ignores these 3 that appear in JavaScript programs

  • You can use them freely in your program and you are free to format and indent your programs in a neat and consistent way that makes the code easy to read and understand

26
New cards

Simple Statements in JavaScript

are generally followed by a semicolon character, just as they are in C, C++, and Java

27
New cards

separate line

JavaScript, however, allows you to omit this semicolon if each of your statements are placed on a _____.

28
New cards

semicolons

It is a good programming practice to use _____.

29
New cards

case-sensitive language

  • JavaScript is a _____.

  • This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters

30
New cards

C,

C++

JavaScript supports both _____-style and _____-style comments.

31
New cards

//,

end of a line

Any text between a _____ and the ____ is treated as a comment and is ignored by JavaScript.

32
New cards

/* and */

  • Any text between the characters _____ is treated as a comment.

  • This may span multiple lines.

33
New cards

<!--

  • JavaScript also recognizes the HTML comment opening sequence _____.

  • JavaScript treats this as a single-line comment, just as it does the // comment.

34
New cards

//-->

The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as _____.

35
New cards

modern browsers

  • All the _____ come with built-in support for JavaScript.

  • Frequently, you may need to enable or disable this support manually.

36
New cards

Internet Explorer

Here are the steps to turn on or turn off JavaScript in _____:

  1. Follow Tools -> Internet Options from the menu.

  2. Select Security tab from the dialog box.

  3. Click the Custom Level button.

  4. Scroll down till you find the Scripting option.

  5. Select Enable radio button under Active scripting.

  6. Finally click OK and come out.

To disable JavaScript support in your _____, you need to select Disable radio button under Active scripting.

37
New cards

Firefox

Here are the steps to turn on or turn off JavaScript in _____:

  1. Open a new tab -> type about:config in the address bar.

  2. Then you will find the warning dialog. Select I will be careful, I promise!

  3. Then you will find the list of configure options in the browser.

  4. In the search bar, type JavaScript.enabled.

  5. There you will find the option to enable or disable JavaScript by right-clicking on the value of that option -> select toggle.

If JavaScript.enabled is true, it converts to false upon clicking toggle. If JavaScript is disabled, it gets enabled upon clicking toggle.

38
New cards

Chrome

Here are the steps to turn on or turn off JavaScript in _____:

  1. Click the Chrome menu at the top right-hand corner of your browser.

  2. Select Settings.

  3. Click Show advanced settings at the end of the page.

  4. Under the Privacy section, click the Content settings button.

In the “JavaScript” section, select “Do not allow any site to run JavaScript” or “Allow all sites to run JavaScript (recommended)”

39
New cards

Opera

Here are the steps to turn on or turn off JavaScript in _____:

  • Follow Tools → Preferences from the menu.

  • Select Advanced option from the dialog box.

  • Select Content from the listed items.

  • Select Enable JavaScript checkbox.

  • Finally click OK and come out.

To disable JavaScript support in _____, you should not select the Enable JavaScript checkbox.

40
New cards

<head>,

<body>,

<head> and <body>,

external file

There is a flexibility given to include JavaScript code anywhere in an HTML document

However, the most preferred ways to include JavaScript in an HTML file are as follows:

  • Script in _____ section.

  • Script in _____ section.

  • Script in both _____ and _____ sections.

  • Script in an _____ and then include it in the <head>...</head> section.

41
New cards

<head>

If you have a small piece of JavaScript code that you want to execute when a page loads, it is a good idea to keep that code in the _____ section of your HTML document.

42
New cards

<body>

If you need a script to run as the page loads so that the script generates content in the page, then the script goes in the _____ portion of the document.

43
New cards

external file

  • As you begin to work more extensively with JavaScript, you will be likely to find that there are cases where you are reusing identical JavaScript code on multiple pages of a site.

  • You are not restricted to maintaining identical code in multiple HTML files.

    • The <script> tag provides a mechanism to allow you to store JavaScript in an _____ and then include it into your HTML files.

  • To use JavaScript from an _____, you need to write all your JavaScript source code in a simple text file with the extension .js and then include that file.

44
New cards

Event

  • JavaScript’s interaction with HTML is handled through _____ that occur when the user or the browser manipulates a page.

  • When the user clicks a button, that click too is an event.

  • Other examples include events like pressing any key, closing a window, resizing a window, etc.

  • Developers can use these to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable.

45
New cards

Onclick Event Type

  • This is the most frequently used event type which occurs when a user clicks the left button of his mouse.

  • You can put your validation, warning etc., against this event type.

46
New cards

onsubmit

  • an event that occurs when you try to submit a form.

  • You can put your form validation against this event type.

47
New cards

Onmouseover and onmouseout

These two event types will help you create nice effects with images or even with text as well.

48
New cards

onmouseover

triggers when you bring your mouse over any element

49
New cards

onmouseout

triggers when you move your mouse out from that element.

50
New cards

Page Redirection

a situation where you clicked a URL to reach a page X but internally you were directed to another page Y.

51
New cards

window.location.href

Adds the current page to the session history, allowing the user to go back

52
New cards

location.replace

Replaces the current page without adding it to history; the user cannot go back.

53
New cards

location.reload()

  • method used to refresh a web page

  • This code can be called automatically upon an event or simply when the user clicks on a link.

54
New cards

setTimeout()

is a built-in JavaScript function which can be used to execute another function after a given time interval

55
New cards

dialog boxes

can be used to raise an alert, to get confirmation on any input, or to have some kind of input from the users

56
New cards

Alert Dialog Box

Mostly used to give a warning message to the users.

57
New cards

Alert box

gives only one button “OK” to select and proceed.

58
New cards

Confirmation Dialog Box

  • Mostly used to take user’s consent on any option.

  • It displays a dialog box with two buttons: OK and Cancel.

    • If the user clicks on the OK button, the window method confirm() will return true.

    • If the user clicks on the Cancel button, then confirm() returns false.

59
New cards

Prompt Dialog Box

  • is very useful when you want to pop up a text box to get user input.

  • Thus, it enables you to interact with the user.

  • The user needs to fill in the field and then click OK.

  • This dialog box has two buttons: OK and Cancel.

    • If the user clicks the OK button, the window method prompt() will return the entered value from the text box.

    • If the user clicks the Cancel button, the window method prompt() returns null

60
New cards

prompt()

The prompt dialog box is displayed using a method called _____ which takes two parameters:

  • a label which you want to display in the text box and

  • a default string to display in the text box.

61
New cards

JavaScript Datatypes

These are the type of values that can be represented and manipulated in a programming language.

62
New cards

numbers,

strings of text,

boolean

Primitive data types (3)

63
New cards

null,

undefined

  • trivial data types (2)

  • each of which defines only a single value.

64
New cards

object

JavaScript supports a composite data type known as ______

65
New cards

integer,

floating-point

Java does not make a distinction between _____ values and _____ values.

66
New cards

floating-point

All numbers in JavaScript are represented as ______values.

67
New cards

64-bit floating-point format,

IEEE 754 standard

JavaScript represents numbers using the ______ defined by the _____.

68
New cards

Variables

can be thought of as named containers

69
New cards

var

  • Variables are declared with the _____ keyword

  • Use the _____ keyword only for declaration or initialization, once for the life of any variable name in a document.

70
New cards

variable initialization

  • Storing a value in a variable

  • can be done at the time of variable creation or at a later point in time when you need that variable.

  • You should not re-declare the same variable twice.

71
New cards

untyped language

  • JavaScript is an _____.

  • This means that a JavaScript variable can hold a value of any data type.

    • Unlike many other languages, you do not have to tell JavaScript during variable declaration what type of value the variable will hold.

  • The value type of a variable can change during the execution of a program and JavaScript takes care of it automatically.

72
New cards

scope of a variable

is the region of your program in which it is defined.

73
New cards

Global Variables

Has global scope which means it can be defined anywhere in your JavaScript code

74
New cards

Local Variables

  • Will be visible only within a function where it is defined.

  • Function parameters are always local to that function.

75
New cards

local,

global

Within the body of a function, a ______ variable takes precedence over a _____ variable with the same name.

76
New cards

global

If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the _____ variable.

77
New cards

variable name

  • You should not use any of the JavaScript reserved keywords as a _____.

  • should not start with a numeral.

  • They must begin with a letter or an underscore character.

  • are case-sensitive.

78
New cards

operands,

operator

  • Take a simple expression 4 + 5 is equal to 9.

  • Here 4 and 5 are called _____ and ‘+’ is called the _____.

79
New cards

arithmetic operators

addition,

subtraction,

multiplication,

division,

modulus,

increment,

decrement

80
New cards

addition (+)

  • adds two operands

  • works for numeric as well as string (concatenation)

81
New cards

subtraction (-)

subtracts the second operand from the first

82
New cards

multiplication (*)

multiply both operands

83
New cards

division (/)

divide the numerator by the denominator

84
New cards

modulus (%)

outputs the remainder of an integer division

85
New cards

increment (++)

increases an integer value by one

86
New cards

decrement (—)

decreases an integer value by one

87
New cards

comparison operator

equal,

not equal,

greater than,

less than,

less than or equal to

88
New cards

equal (==)

checks if the value of two operands are equal or not, if yes, then the condition becomes true

89
New cards

not equal (!=)

checks if the value of two operands are equal or not, if the values are not equal, then the condition becomes true

90
New cards

greater than (>)

checks if the value of the left operand is greater than the value of the right operand, if yes, then the condition becomes true

91
New cards

less than (<)

checks if the value of the left operand is less than the value of the right operand, if yes, then the condition becomes true

92
New cards

greater than or equal to (>=)

checks if the value of the left operand is greater than or equal to the value of the right operand, if yes, then the condition becomes true

93
New cards

less than or equal to (<=)

checks if the value of the left operand is less than or equal to the value of the right operand, if yes, then the condition becomes true

94
New cards

logical operators

logical AND (&&),

logical OR (||),

logical NOT (!)

95
New cards

logical AND (&&)

if both the operands are non-zero, then the condition becomes true

96
New cards

logical OR (||)

if any of the two operands are non-zero, then the condition becomes true

97
New cards

logical NOT (!)

reverses the logical state of its operand

98
New cards

bitwise operators

AND (&),

OR (|),

XOR (^),

NOT (~),

Zero fill left shift (<<),

signed right shift (>>),

zero fill right shift (>>>)

99
New cards

AND (&)

Sets each bit to 1 if both bits are 1

100
New cards

OR (|)

Sets each bit to 1 if one of two bits is 1