Scribd
Upload
3 views14 pages

Most JS Code Manipulates Elements On An HTML Page We Can Examine Elements' State

The document provides an overview of the Document Object Model (DOM) and JavaScript syntax, focusing on manipulating HTML elements, accessing them via methods like document.getElementById, and changing styles and content. It covers variable declaration, data types, operators, comments, and the Math object, along with special values like null and undefined. Additionally, it explains logical operators and the structure of if/else statements in JavaScript.

Uploaded by

yamusaro7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views14 pages

Most JS Code Manipulates Elements On An HTML Page We Can Examine Elements' State

The document provides an overview of the Document Object Model (DOM) and JavaScript syntax, focusing on manipulating HTML elements, accessing them via methods like document.getElementById, and changing styles and content. It covers variable declaration, data types, operators, comments, and the Math object, along with special values like null and undefined. Additionally, it explains logical operators and the structure of if/else statements in JavaScript.

Uploaded by

yamusaro7
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Document Object Model

1
(DOM)-unit 4
 most JS code
manipulates elements
on an HTML page
 we can examine
elements' state
 e.g. see whether a box
is checked
 we can change state
 e.g. insert some new
text into a div
 we can change styles
DOM element objects
2
Accessing elements:
3
document.getElementById
var name = document.getElementById("id");

JS
<button onclick="changeText();">Click me!</button>
<span id="output">replace me</span>
<input id="textbox" type="text" />
HTML
function changeText() {
var span = document.getElementById("output");
var textBox = document.getElementById("textbox");

textbox.style.color = "red";

}
JS

CS380
Accessing elements:
4
document.getElementById
 document.getElementById returns the
DOM object for an element with a given
id
 can change the text inside most
elements by setting the innerHTML
property
 can change the text in form controls by
setting the value property

CS380
Changing element style:
5
element.style

Property or style
Attribute
object
color color
padding padding
background-color backgroundColor
border-top-width borderTopWidth
Font size fontSize
Font famiy fontFamily
CS380
Preetify
6

function changeText() {
//grab or initialize text here

// font styles added by JS:


text.style.fontSize = "13pt";
text.style.fontFamily = "Comic Sans MS";
text.style.color = "red"; // or pink?
}
JS

CS380
7 More Javascript Syntax

CS380
Variables
8

var name = expression; JS

var clientName = "Connie Client";


var age = 32;
var weight = 127.4; JS
 variables are declared with the var
keyword (case sensitive)
 types are not specified, but JS does have
types ("loosely typed")
 Number, Boolean, String, Array, Object,
Function, Null, Undefined
 can find out a variable's type by calling
CS380
typeof
Number type
9

var enrollment = 99;


var medianGrade = 2.8;
var credits = 5 + 4 + (2 * 3);
JS

 integers and real numbers are the same


type (no int vs. double)
 same operators: + - * / % ++ -- = += -=
*= /= %=
 similar precedence to Java
 many operators auto-convert types: "2"
* 3 is 6
CS380
Comments (same as Java)
10

// single-line comment
/* multi-line comment */
JS

 identical to Java's comment syntax


 recall: 4 comment syntaxes
 HTML: <!-- comment -->
 CSS/JS/PHP: /* comment */
 Java/JS/PHP: // comment
 PHP: # comment

CS380
Math object
11

var rand1to10 = Math.floor(Math.random() * 10 + 1);


var three = Math.floor(Math.PI);
JS

 methods: abs, ceil, cos, floor, log,


max, min, pow, random, round, sin,
sqrt, tan
 properties: E, PI

CS380
Special values: null and
12
undefined
var ned = null;
var benson = 9;
// at this point in the code,
// ned is null
// benson's 9
// caroline is undefined
JS

 undefined : has not been declared, does


not exist
 null : exists, but was specifically
assigned an empty or null value
 Why does JavaScript have both of these?
CS380
Logical operators
13

 > < >= <= && || ! == != === !==


 most logical operators automatically
convert types:
 5 < "7" is true
 42 == 42.0 is true
 "5.0" == 5 is true
 === and !== are strict equality tests;
checks both type and value
 "5.0" === 5 is false
CS380
if/else statement (same as
14
Java)
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
JS
 identical structure to Java's if/else
statement
 JavaScript allows almost anything as a
condition

CS380

You might also like