Month: February 2025

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>

Continue reading JavaScript Output

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>

Continue reading JavaScript Where To

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

Continue reading JavaScript Introduction

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:
rgb(0, 0, 255); // rendered as blue because the blue parameter is set to its highest value (255) and the others are set to 0
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:
rgba(0, 0, 255, 0.3); // rendered as blue with opacity
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:
hsl(120, 100%, 50%); // green
hsl(120, 100%, 75%); // light green
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // pastel green
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:
hsl(120, 100%, 50%, 0.3); // green with opacity
hsl(120, 100%, 75%, 0.3); // light green with opacity
grayscale(color) Sets a gray color with the same lightness as color.

Example:
grayscale(#7fffd4);
Result: #c6c6c6
complement(color) Sets a color that is the complementary color of color.

Example:
complement(#7fffd4);
Result: #ff7faa
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:
invert(white);
Result: black

Continue reading Sass Color Functions

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 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

Sass Numeric Functions

Sass Numeric Functions

The numeric functions are used to manipulate numeric values.

The following table lists all numeric functions in Sass:

Function Description & Example
abs(number) Returns the absolute value of number.

Example:
abs(15)
Result: 15
abs(-15)
Result: 15
ceil(number) Rounds number up to the nearest integer.

Example:
ceil(15.20)
Result: 16
comparable(num1, num2) Returns whether num1 and num2 are comparable.

Example:
comparable(15px, 10px)
Result: true
comparable(20mm, 1cm)
Result: true
comparable(35px, 2em)
Result: false
floor(number) Rounds number down to the nearest integer.

Example:
floor(15.80)
Result: 15
max(number…) Returns the highest value of several numbers.

Example:
max(5, 7, 9, 0, -3, -7)
Result: 9
min(number…) Returns the lowest value of several numbers.

Example:
min(5, 7, 9, 0, -3, -7)
Result: -7
percentage(number) Converts number to a percentage (multiplies the number with 100).

Example:
percentage(1.2)
Result: 120
random() Returns a random number between 0 and 1.

Example:
random()
Result: 0.45673
random(number) Returns a random integer between 1 and number.

Example:
random(6)
Result: 4
round(number) Rounds number to the nearest integer.

Example:
round(15.20)
Result: 15
round(15.80)
Result: 16

Continue reading Sass Numeric Functions

Sass String Functions

Sass String Functions

The string functions are used to manipulate and get information about strings.

Sass strings are 1-based. The first character in a string is at index 1, not 0.

The following table lists all string functions in Sass:

Function Description & Example
quote(string) Adds quotes to string, and returns the result.

Example:
quote(Hello world!)
Result: “Hello world!”
str-index(string, substring) Returns the index of the first occurrence of the substring within string.

Example:
str-index(“Hello world!”, “H”)
Result: 1
str-insert(string, insert, index) Returns string with insert inserted at the specified index position.

Example:
str-insert(“Hello world!”, ” wonderful”, 6)
Result: “Hello wonderful world!”
str-length(string) Returns the length of string (in characters).

Example:
str-length(“Hello world!”)
Result: 12
str-slice(string, start, end) Extracts characters from string; start at start and end at end, and returns the slice.

Example:
str-slice(“Hello world!”, 2, 5)
Result: “ello”
to-lower-case(string) Returns a copy of string converted to lower case.

Example:
to-lower-case(“Hello World!”)
Result: “hello world!”
to-upper-case(string) Returns a copy of string converted to upper case.

Example:
to-upper-case(“Hello World!”)
Result: “HELLO WORLD!”
unique-id() Returns a unique randomly generated unquoted string (guaranteed to be unique within the current sass session).

Example:
unique-id()
Result: tyghefnsv
unquote(string) Removes quotes around string (if any), and returns the result.

Example:
unquote(“Hello world!”)
Result: Hello world!

Continue reading Sass String Functions