Arrays


In JavaScript, an array is an ordered collection of data items. Each element in an array has an index, which is a numerical position in the array.


Arrays are a very useful data structure because they allow you to store and manipulate a collection of values in a single variable. You can use arrays to store a list of items, such as names, numbers, or even objects.


To create an array in JavaScript, you can use the Array constructor or the array literal syntax, which is a pair of square brackets [] containing a comma-separated list of values.




You can access the elements of an array using the index of the element in the array. The index of the first element is 0, the index of the second element is 1, and so on.


Here are some commonly used methods from our lecture:




Objects


An object is a data type that is composed of a collection of properties. Properties are essentially named values that can be stored and retrieved from an object. They are similar to variables, but they are associated with an object, and can be accessed using the dot notation. In this case the objects are created using literals (JSON) rather than the constructor "object()", even though both is possible. They are often parts of the website, for example the window-object.


In the example above, car is an object that has three properties: name, year, and cylinders. These properties are accessed using the dot notation.




In addition to storing data, objects can also have functions as properties. These are known as methods.




Objects are a powerful feature of JavaScript and are used to represent real-world objects in your code. They are used to store and organize data, and to encapsulate related functions and behavior. The concept is again fairly similar to the normal Java programming language.


Prototyping


Prototyping refers to the ability of an object to inherit properties and methods from another object. Every object in JavaScript has a prototype, which is another object that it can inherit properties and methods from.


It allows objects to share common behavior and reduces the need to recreate the same methods and properties in multiple objects. This can help to keep your code organized and efficient. Thus, objects can be extended by properties.




In this example, the "Animal" function serves as a constructor for creating new "animal" objects. The "speak" method is added to the "Animal.prototype" object, which means that it will be inherited by all objects created using the "Animal" constructor. When we create a new "dog" object and call the "speak" method on it, the "speak" method is inherited from the "Animal.prototype" object and the output is "dog makes a sound." The same is true for the "cat" object.


Over all this concept opens the ability to inherit from objects.


Dynamic changes in JavaScript


In HTML, the elements loaded can be changed dynamically. This can be seen, for example, when elements change their content or appearance on a click. In order to programme this, you must first identify the element and address it so that you can change it. In the lecture we used the DOM model to identify and address elements, which is explained below.


Document object model (DOM)


The Document Object Model (DOM) is a programming interface for HTML, XML, and SVG documents. It represents the structure of a document as a tree-like model, with each element, attribute, and piece of text in the document as a node in the tree. The DOM allows developers to manipulate the content, structure, and style of a document using programming languages like JavaScript. Using this model, you can access every element of an HTML page and its contents and read, change, replace and also set them.




Since it is a tree structure, there are parents and children here. There can be any number of children, as the website can extend forever. If an element has several children of the same element type, they are combined into an array and indexed according to their occurrence. The elements are worked with in the following sections.


Finding Elements


  1. getElementById: This method allows you to get an element by its unique id attribute. this attribute must be assigned in advance. Each ID is unique, but can be called several times.

  2. querySelector: This method allows you to get an element using a CSS selector.
  3. getElementsByTagName: This method allows you to get a list of elements by their tag name.
  4. getElementsByClassName: This method allows you to get a list of elements by their class name.

Each of these methods returns a reference to the element or a list of elements, which you can then use to manipulate the element using the DOM.


Family relations


The DOM tree is a representation of the structure of a webpage, with each element on the page represented as a node in the tree. These nodes can have parent-child and sibling relationships with one another.




With text, it is not explicitly possible to access it directly. To do this, the family tree must be followed and the element must be addressed in this way. In doing so, the family relationships of the children are very important.


Example in HTML:




In this example, the “body” element is the parent of the” div” element, and the “div” element is the parent of the” p” elements. The “p” elements are siblings, because they have the same parent (the div element).


In JavaScript, you can use the” parentNode”,” childNodes”, and “nextSibling” properties to navigate the DOM tree and manipulate elements.


The following code example shows how to get a parentNode of an element.




You can also use the “children” property to get a list of an element's children, and the “firstChild” and “lastChild” properties to get the first and last children of an element. This helps immensely with orientation if you do not structure your DOM Family tree right ;)


Change Elements


With innerHTML you can now change the elements. The entire node is changed in the process.




JQuery


As with most programming languages, Java Script has access to libraries. These are used when programmers cannot or do not want to write parts of their programme completely and therefore have access to external programme pages. These are collected in libraries and must be inserted into the own programme via an access command. This command is usually at the beginning of the programme to show from which library is imported. In the course of our lecture, we dealt with JQuery.


In jQuery we always get collections. But since we don't always want just collections, we can use the “.” operator with additional methods to further specify the collection. The "key character" for jQuery is the “$” sign.


The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section).




Methods in JQuery


In jQuery, there are several types of methods that can be categorized based on their behavior. Here is a description of each type:


  1. Transparent methods: These methods can be chained together, meaning that they return the same object that they were called on, allowing you to chain multiple methods together. This makes it easier to write concise and readable code. Examples of transparent methods include .css(), which gets or sets the style of an element, and .addClass(), which adds a class to an element.

  2. Destructive methods: These methods modify the element or elements that they are called on, and do not return the same object that they were called on. This means that they cannot be chained with other methods. Examples of destructive methods include .replaceWith(), which replaces an element with new content, and .remove(), which removes an element from the DOM.

  3. Terminating methods: These methods are used to end a chain of method calls and return a value. Examples of terminating methods include .html(), which returns the HTML content of an element, and .val(), which returns the value of a form element.

CSS Selectors


CSS selectors are used to select and apply styles to elements in an HTML document. There are several types of selectors that can be used, including:


  1. Element selectors: These selectors select elements based on their tag name. For example, p selects all <p> elements.
  2. Class selectors: These selectors select elements based on their class attribute. For example, .my-class selects all elements with a class of my-class.
  3. ID selectors: These selectors select elements based on their id attribute. For example, #my-id selects the element with an id of my-id.
  4. Event secelctor: These selectors select elements based on their state or position in the document. For example, “:hover” selects elements when the user hovers over them with the mouse.

Using these selectors, we can combine elements into collections in jQuery.


JQuery filters


jQuery filters are used to select elements based on their characteristics or position in the document. They can be used to refine a selection of elements, or to select elements that match certain criteria.


Filters are typically used with the : syntax, and can be combined with other selectors to create more complex selections. Some examples of common filters include


  1. :first: selects the first element in a selection
  2. :last: selects the last element in a selection
  3. :even: selects all even elements in a selection
  4. :odd: selects all odd elements in a selection
  5. :eq(index): selects the element at the specified index in a selection
  6. :gt(index): selects all elements with an index greater than the specified index in a selection
  7. :lt(index): selects all elements with an index less than the specified index in a selection
  8. :header: selects all header elements (h1, h2, h3, etc.) in a selection

Add content


jQuery also offers the possibility to expand content on a page. These methods allow content to be displayed, modified and deleted. This ensures easy editing.


Examples are: html, before, after, remove, prepend, append




In this example, the .html() method is used to set the HTML content of the element with an id of my-div to a new <p> element.


Anonymous functions with .each()


The .each() method in jQuery allows you to iterate over a selection of elements and perform a function on each element. It is often used to perform the same action on multiple elements, or to extract data from a selection of elements. To do this, a reference to a function or an anonymous function is passed to it as an argument. This function is then executed on each element of the selection. Since the loop includes all elements, it is also possible to access individual elements using "§(this)".




In this example, the .each() function is used to iterate over a selection of <li> elements and perform a function on each element.


The .each() function takes a callback function as an argument, which is a function that is executed for each element in the selection. The callback function is passed two arguments: the index of the current element in the selection, and the element itself.