# Week 6 - Elements, Attributes, Imports, XML & JSON
# Styling with JavaScript
We can use JavaScript to change the appearance of a page. This is useful when you want to change the look of elements, or make things appear or disappear as the user interacts with them.
# Element Attributes
Elements have tag names, ids and classes that we use with CSS to target them. However, they also have other attributes. Many of the attributes have matching JS properties too. Even if they don't have a matching property we can access the value of the property or add new ones.
Learn about Element Attributes
# How to Import Data in NodeJS
When you are writing JavaScript in NodeJS you can import either JavaScript objects or JSON objects from another file into your current JS file.
JSON files will be saved with a .json file extension. They must comply with all the rules for JSON. That means, no variable names, no semi-colons, no comments, etc. We can import them directly from the other file into our JavaScript as follows:
Here is the contents of a sample JSON file called class.json.
{
"class": "MAD9014",
"professor": "Steve",
"year": 2020,
"students": ["Tony", "Rashad", "Adam", "Su Cheng", "Vladimir"]
}
2
3
4
5
6
If we have that JSON file in the same folder, we can import it like this into our sample.js file:
const data = require('./class.json');
console.log(data);
2
3
The ./ in front of the name of the JSON file is important.
THIS IS ONLY FOR NODE JS. IT DOES NOT WORK IN THE BROWSER
Alternatively, you could require another JavaScript file. However, that would require you adding an export command to the JavaScript file that you plan to import.
Here is a sample of the class.js file with the data
const data = {
class: 'MAD9014',
professor: 'Steve',
year: 2020,
students: ['Tony', 'Rashad', 'Adam', 'Su Cheng', 'Vladimir'],
};
module.exports = data;
2
3
4
5
6
7
8
and here is how we could import that data into our sample.js file.
const data = require('./class.js');
console.log(data);
2
3
You can learn more about importing and exporting for the browser in this video.
And more about importing and exporting for NodeJS in this browser.
# Cloning and Copying HTML
When you tell an Element that it is being Appended to a specific place on a webpage, this usually means that you are appending an Element that you just created. However, you can append elements that already exist on the page.
If you append an element that already exists, that means you will actually move the Element from its old position to the new one.
If you want to add a duplicate of the Element then you need to use the cloneNode method.
Here is the full playlist of DOM videos
# XML
XML is a data format that is designed to be human readable first.
It is a markup language like HTML except you get to decide on the tags yourself.
Most importantly, it is for DATA NOT PRESENTATION.
There are four special characters that need to always be handled in your XML files - <, >, &, and ". These four must be written as character entities - < > & and ".
Lynda.com video about working with data formats like XML and JSON
Learn more about Reading from XML files
# JSON
JSON stands for JavaScript Object Notation. It is similar to XML in that it is a data file format but it is a slightly more compressed format. The reduced size means that your data files are smaller but it also means that they can be a little harder to read.
The official reference site for JSON
All the unicode characters can be found on the Unicode charts.
Lynda.com video about working with data formats like XML and JSON
Learn about Reading JSON with JavaScript
# TODO
TODO Before next week
- If you have not read all these notes and watched the videos from this week, do that first.
- Finish and submit the exercises
Exercise 9 - Array LoopingandExercise 10 - XML-JSONbefore 5pm on this Thursday. - Complete Hybrid 8 - Arrays of Objects before next Monday at 5pm.
- Read ahead the notes for week 7 to prepare for class.
- Read the description for Assignment 1 which is due on Friday Oct 23rd.