Statements
Example
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
JavaScript Reserved Words
In JavaScript you cannot use these reserved words as variables, labels, or function names:
| abstract | arguments | await* | boolean |
| break | byte | case | catch |
| char | class* | const* | continue |
| debugger | default | delete | do |
| double | else | enum* | eval |
| export* | extends* | false | final |
| finally | float | for | function |
| goto | if | implements | import* |
| in | instanceof | int | interface |
| let* | long | native | new |
| null | package | private | protected |
| public | return | short | static |
| super* | switch | synchronized | this |
| throw | throws | transient | true |
| try | typeof | var | void |
| volatile | while | with | yield |
Words marked with* was new in ECMAScript 5 and ECMAScript 6.
JavaScript Output
JavaScript Display Possibilities
JavaScript can “display” data in different ways:
- Writing into an HTML element, using
innerHTML. - Writing into the HTML output using
document.write(). - Writing into an alert box, using
window.alert(). - Writing into the browser console, using
console.log().
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
JavaScript Where To
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
JavaScript Introduction
What is JavaScript?
JavaScript is the programming language of the web.
It can update and change both HTML and CSS.
It can calculate, manipulate and validate data.
Why Study JavaScript?
JavaScript is one of the 3 languages all web developers must learn :
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
Sass Color Functions
Sass Color Functions
We have divided the color functions in Sass into three parts: Set color functions, Get color functions, and Manipulate color functions:
Sass Set Color Functions
| Function | Description & Example |
|---|---|
| rgb(red, green, blue) | Sets a color using the Red-Green-Blue (RGB) model. An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of that color and can be an integer between 0 and 255, or a percentage value (from 0% to 100%).
Example: |
| rgba(red, green, blue, alpha) | Sets a color using the Red-Green-Blue-Alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity of the color. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example: |
| hsl(hue, saturation, lightness) | Sets a color using the Hue-Saturation-Lightness (HSL) model – and represents a cylindrical-coordinate representation of colors. Hue is a degree on the color wheel (from 0 to 360) – 0 or 360 is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.
Example: |
| hsla(hue, saturation, lightness, alpha) | Sets a color using the Hue-Saturation-Lightness-Alpha (HSLA) model. HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity of the color. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example: |
| grayscale(color) | Sets a gray color with the same lightness as color.
Example: |
| complement(color) | Sets a color that is the complementary color of color.
Example: |
| invert(color, weight) | Sets a color that is the inverse or negative color of color. The weight parameter is optional and must be a number between 0% and 100%. Default is 100%.
Example: |
Sass Introspection Functions
Sass Introspection Functions
The introspection functions are rarely used when building a stylesheet. However, they are valuable if something does not work properly – to figure out what’s going on: like debugging functions. Continue reading Sass Introspection Functions
Sass Selector Functions
Sass Selector Functions
The selector functions are used to check and manipulate selectors. Continue reading Sass Selector Functions
Sass Map Functions
Sass Map Functions
In Sass, the map data type represents one or more key/value pairs.
Tip: It is also possible to use the List functions from the previous page, with maps. Then the map will be treated as a list with two elements.
Sass maps are immutable (they cannot change). So, the map functions that return a map, will return a new map, and not change the original map. Continue reading Sass Map Functions
Sass List Functions
Sass List Functions
The list functions are used to access values in a list, combine lists, and add items to lists.
Sass lists are immutable (they cannot change). So, the list functions that return a list, will return a new list, and not change the original list.
Sass lists are 1-based. The first list item in a list is at index 1, not 0.
The following table lists all list functions in Sass : Continue reading Sass List Functions