The first thing that struck me about javascript, in contrast to other programming languages I had seen before, was the way that variable assignments worked. All of this made more sense in the context of the document object model or DOM, which was my first real experience with different files interacting dynamically.
Javascript DOM manipulation makes the browser to render modifications to the page from the original html, without saving over the underlying html files.
Two Distinguishing Features of Javascript
The first difference with other programming languages was that you can declare constant variables. This sounds like an oxymoron, and on first reading I understood this to mean that they could never be modified in any way, which isn’t exactly true. Most of these variables are objects. A javascript object is a collection of key-value pairs. You are in fact allowed to modify the values for keys for an object variable declared as constant, so you can in fact meaningfully modify constant objects, but there are constraints.
The second thing that struck me was that when you assign a new variable Y to a preexisting object X, you can change the original object using code that only referred to the copy. By default we are just creating a pointer to an existing variable in memory, which was quite different from all other programming languages I had seen.
This seemed to me like a disastrous way to design a programming language, though it turns out that there are other methods, such as the spread operator, which allow us to copy objects and modify only the copy. Pointing to an existing object really did not seem like the intuitive default choice until I better understood how most javascript works.
Justifying these Features
All of this started to make more sense in the context of the Document Object Model (DOM). Elements in the DOM are nested as a tree structure within the body of the page. For example, within the body (the root of the tree), you can have tables or lists or drop-down menus or various kinds of content, and within these, some elements could have more things nested inside them.
When one of these elements is a script it can manipulate the other elements; here is an example of how this manipulation works.
STEP 1:
Declare an object variable (usually a constant variable) whose value is an html element. Often this element will already exist within the html document. There are query functions in javascript that allow us to efficiently select objects from the html.
Example code:
const frogImage = document.getElementbyId('frog-image')
The variable frogImage now points to a preexisting html element; in the html file, if the html file contains an element with the id 'frog-image'.
It is also possible to declare a variable that points to an object that does not exist within the DOM by just specifying that it is a certain type of html element. This element may be inserted into the DOM later, at which point it will be rendered in the browser.
Example:
const frogImage = document.createElement('img')
This creates an abstract image element which does not exist anywhere on the page. But we can select some kind of container in the DOM, for example, a formatted collection of animal pictures, and insert our abstract image element into that container, causing it to render inside that container on the page:
Const animalsDiv = document.getElementById('animal-pictures');
animalsDiv.append(frogImage)
STEP 2:
Write code that describes the ways in which you want to specify the object’s properties. If the object actually points to that object and inherits its attributes, like its location on the page, or its formatting, text content, or whether it even renders in the page at all.
Example:
Now that the javascript object frogImage points to an object, we can change the picture it shows it by changing its source attribute:
frogImage.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjqJVxmFA_0Qr6AEo6ZomYD4jPnQQ8aRT6E_cnwQim_CGh3dW_3jh1b6FFvdsvH2bKy2g&usqp=CAU'
On the browser page, this will place the picture with the source (in this case URL) in the place of the element that is identified as frogImage in the javascript when the code is executed.
STEP 3: Create the conditions under which the code in step 2 is executed, based on the user's interactions with the page.
This is done by creating event listeners, which allow the browser to respond to the user's action. Events can include things like clicks, mouseovers, or pressing keys. For example, if we wanted to create a pop-up alert that said "ribbit" when the frog was clicked on, we could use the following command:
frogImage.addEventListener('click', alert('ribbit'))
I feel these are the key concepts underpinning dynamic rendering of webpages. Other topics, like communication with other pages and servers vastly expand site capabilities. We may explore these properties in future posts.
Top comments (0)