Difference between revisions of "Javascript"
| Line 57: | Line 57: | ||
'''Values can be ''passed'' to a function''', and the '''function will ''return'' a value'''. | '''Values can be ''passed'' to a function''', and the '''function will ''return'' a value'''. | ||
[[File: | [[File:Js_functions.png]] | ||
[https://codepen.io/PublicationStation/pen/NYOoqq Codepen Functions1: Example and exercise] | [https://codepen.io/PublicationStation/pen/NYOoqq Codepen Functions1: Example and exercise] | ||
| Line 63: | Line 63: | ||
[https://codepen.io/PublicationStation/pen/geBZKZ? Codepen Functions2: Example and exercise] | [https://codepen.io/PublicationStation/pen/geBZKZ? Codepen Functions2: Example and exercise] | ||
<ref>"Functions." MDN Web Docs, 5 Apr. 2018, http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions.</ref> | Links of JS functions: <ref>"Functions." MDN Web Docs, 5 Apr. 2018, http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions.</ref> <ref>"Functions." MDN Web Docs, 5 Apr. 2018, http://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions.</ref> | ||
<ref>"Functions." MDN Web Docs, 5 Apr. 2018, http://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions.</ref> | |||
=Learning Resources= | =Learning Resources= | ||
Revision as of 12:48, 6 April 2018
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.[1]
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
[2]
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]
- the values of arrays can be accessed by their location within the array var
- 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"}
Functions
A function is a "subprogram" that can be called by code external to it.
Like the program itself, a function is composed of a sequence of statements or steps called the function body.
When the function is called it performs its sequence of steps.
It can be very useful to perform sequences of steps that need to be run more than once in your program.
Values can be passed to a function, and the function will return a value.
Codepen Functions1: Example and exercise
Codepen Functions2: Example and exercise
Links of JS functions: [3] [4]
Learning Resources
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
- ↑ "What is JavaScript?" MDN Web Docs, 28 Mar. 2018, https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript.
- ↑ "Storing the information you need — Variables." MDN Web Docs, 28 Mar. 2018, developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables.
- ↑ "Functions." MDN Web Docs, 5 Apr. 2018, http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions.
- ↑ "Functions." MDN Web Docs, 5 Apr. 2018, http://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions.
