Please enable JavaScript.
Coggle requires JavaScript to display documents.
JS M3, OBJECTS & DOT NOTATION, LOGICAL OPERATIONS, DATA TYPES - Coggle…
JS M3
-
-
-
-
-
Electronic circuits inside computers use millions of tiny switches to store these true/false values. ON/OFF
Computers use binary code to represent information. By turning switches ON and OFF, we change the information stored in a computer.
Computers use binary code to represent information. By turning switches ON and OFF, we change the information stored in a computer.
You are now ready to meet another data type. The Boolean is a data type that only has two possible values: true(1) or false(0)
-
-
-
-
-
The confirm() box asks the user to accept or reject something. Similar to alert() and prompt(), the box takes the focus away from the current window, and forces the user to read the message
You can store the decision from the user in a variable and use it later in your code. A confirm() box returns true if the user clicks OK and false if the user clicks on Cancel. Ex let x = confirm("Proceed to payment?"); console.log(x);
In a similar way, a checkbox represents 2 states: selected (true) or deselected (false).
You can use .checked to get the state of the checkbox Ex console.log(box.checked);
A checkbox in a news site is used to "Accept Terms & Conditions". The checkbox element has been accessed and stored in variable called terms.
You can use checkboxes to gather user preferences or indicate agreement.
A check box is suitable to collect the following information from the user…accept terms & conditions ou subscribe to the newsletter
-
Remember it’s a good practice to add name attributes so the inputs can be placed in the correct field in the database. Mutually exclusive options can share the same name. Different values are added to the database when different options are selected.
You can think of a database as a table with rows and columns.
The name attribute controls…where the data goes in the table
-
When mutually exclusive radio buttons share the same attribute name, the data values are collected in…the same field of the table
When working with form data, it’s a very good practice to give the whole form element an ID. Then you can use .elements.name to refer to different input fields in the form. Ex let cardNumber = form.elements.number.value;
With more than two mutually exclusive options in radio buttons, it makes more sense to give all radio buttons the same name and access them using name. Use .value to access the selected radio button value.
It’s a good practice to use names when referring to form inputs.
A variable myForm has been created to access a form element. Complete to get the value submitted for the field with name = "city"
OBJECTS & DOT NOTATION
-
The object is the most important data type in JS. Good news is you have already been working with objects in previous lessons.
Do you remember what DOM stands for?
Most “things” in JS are objects. A web document is a JS object. All the HTML elements in a document are also examples of objects.
Objects have properties. The dot (.) notation is the simplest way to access the properties of an object.
You extensively used the dot notation to access object properties in previous lessons. The dot notation symbolizes belonging.
You can use the dot notation to access, set and modify properties of objects.
-
-
Some properties can contain a task to be performed on the object.
An example an property with a task is getElementById() document.getElementById("p1");
The document object represents your web page. If you want to access any other HTML element, you always start with accessing the document object.
You can store accessed objects in variables, so they are ready to use again
-
-
A task on an object can result in another object. We use the term return to refer to the result of a task.
When getElementById() is applied to a document it returns… another object
-
Once we get the resulting object, we can continue applying the dot notation to access its properties.
textContent is a property
-
-
LOGICAL OPERATIONS
-
Logical operations use Boolean values. Do you remember what a Boolean is? A data type with 2 possible values : true or false
-
The OR logical operation (||) results in a True value if at least one of the inputs is True. What’s the result of this OR logical operation?
-
-
DATA TYPES
Data comes in a variety of shapes and forms. Dealing with data in the incorrect format can result in data loss or corruption.
Data can come to you in the incorrect format. You can use the typeof keyword to check the data type stored in a variable
The prompt() instruction always turns the user input into a string, no matter what the user enters.
You can convert data from one type to another to fix data quality issues.
The Number() instruction converts any type of value into an number data (when possible)
-
In a similar way, you can ensure that values are converted into strings with the String() instruction