Javascript

Overview:

2 sessions

Subjects:

• JS in webpages
• JS data types & variables
• loops
• control structure
• functions

What is JavaScript?

JavaScript is a scripting or programming language that allows you to implement complex things on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.

Variables

https://codepen.io/PublicationStation/pen/wmpRyX

A variable is a container for some value. Like a number to be used in a sum, or a text string.

Most importantly: variables' values can change. They aren't the values themselves, but containers for values, like little boxes that you can store things in.

https://mdn.mozillademos.org/files/13506/boxes.png

In order to use variables, we need to:

• declare the variables
• values can be attached to them

Code pen example: https://codepen.io/PublicationStation/pen/ZxvwpW

Data types

Code pen exampled: https://codepen.io/PublicationStation/pen/wmjXLR

JS features a few data types, or in other words different types of content, which can be used as values of a variable. These include:

• strings: pieces of text, always wrapped in single or double quotation marks var name = "I am Pluto";
• numbers (both integers and float point numbers) var discovered = 1930;
• booleans: true or false values (outside quotation mais) var planet = false; var dwarf=true;
• Arrays (or lists): a container of multiple values enclosed in square brackets and separated by commas var planets=["Pluto", "Neptune", "Uranus", "Saturn"]
  • the values of arrays can be accessed by their location within the array var p=planets[0]; var s=planets[3]
• Object: is a list of items, each item, stored by a name-value pair. The values can be strings, numbers, lists or even other objects.
  • var saturn = {"moons": ["Pan", "Daphnis", " Atlas", "Prometheus", "Pandora"], "Volume":"95.159 Earths"}

Exercise

https://codepen.io/PublicationStation/pen/QmVRdp

Based on original https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator

The code for this generator is incomplete. You must make it work, by:

• replacing *Y* by one random element of the insertY array
• replacing *Z* by one random element of the insertZ array

• ensuring that if NO "custom name" is given, Bob is the character who sees "the whole thing" (you will need to use if conditions)

When you are done FORK and SAVE

References

• Mozilla's A first splash
• Mozilla's What went wrong? Troubleshooting JavaScript