Difference between revisions of "Javascript"

From Publication Station
 
(9 intermediate revisions by the same user not shown)
Line 10: Line 10:


= What is JavaScript? =
= 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.<ref>"What is JavaScript?" MDN Web Docs, 28 Mar. 2018, https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript.</ref>
<blockquote>
 
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.<ref>"What is JavaScript?" MDN Web Docs, 28 Mar. 2018, https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript.</ref> </blockque>


= Variables =
= Variables =
Line 24: Line 21:


https://mdn.mozillademos.org/files/13506/boxes.png
https://mdn.mozillademos.org/files/13506/boxes.png
<ref>"Storing the information you need — Variables." MDN Web Docs, 28 Mar. 2018, developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables.</ref>
<ref>"Storing the information you need — Variables." MDN Web Docs, 28 Mar. 2018, http://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables.</ref>




Line 36: Line 33:


=Data types =
=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:
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 <code>var name = "I am Pluto";</code>   
* [https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings strings]: pieces of text, always wrapped in single or double quotation marks <code>var name = "I am Pluto";</code>   
* numbers (both integers and float point numbers) <code>var discovered = 1930;</code>  
* [https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math numbers] (both integers and float point numbers) <code>var discovered = 1930;</code>  
* booleans: true or false values (outside quotation mais) <code>var planet = false; var dwarf=true;</code>
* booleans: true or false values (outside quotation mais) <code>var planet = false; var dwarf=true;</code>
* Arrays (or lists): a container of multiple values enclosed in square brackets and separated by commas <code>var planets=["Pluto", "Neptune", "Uranus", "Saturn"]</code>
* [https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays Arrays] (or lists): a container of multiple values enclosed in square brackets and separated by commas <code>var planets=["Pluto", "Neptune", "Uranus", "Saturn"]</code>
** the values of arrays can be accessed by their location within the array var <code>p=planets[0]; var s=planets[3]</code>
** the values of arrays can be accessed by their location within the array var <code>p=planets[0]; var s=planets[3]</code>
* 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.
* 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.
Line 46: Line 46:




= References =
=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'''.
 
[[File:Js_functions.png]]
 
[https://codepen.io/PublicationStation/pen/NYOoqq Codepen Functions1: Example and exercise]
 
[https://codepen.io/PublicationStation/pen/geBZKZ? Codepen Functions2: Example and exercise]
 
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>
 
=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 <nowiki>*Y*</nowiki>  by one random element of the <nowiki>insertY</nowiki> array
* replacing <nowiki>*Z*</nowiki> by one random element of the <nowiki>insertZ</nowiki> 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
 
 
 
=Learning Resources=
 
* "A first splash into JavaScript." MDN Web Docs,http://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash.
* "Javascript functions." Culttt,  http://www.culttt.com/2012/10/08/javascript-functions.
* Lynda.com [https://www.lynda.com/JavaScript-tutorials/JavaScript-Essential-Training/574716-2.html Javascript Essential Training]:
** 2 The Basics
** 3 Working with data
** 4 Functions and objects


* [https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash Mozilla's A first splash]
* [https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong Mozilla's What went wrong? Troubleshooting JavaScript]


= References =
<references/>
<references/>

Latest revision as of 16:17, 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]
  • 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.

Js functions.png

Codepen Functions1: Example and exercise

Codepen Functions2: Example and exercise

Links of JS functions: [3] [4]

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


Learning Resources


References

  1. "What is JavaScript?" MDN Web Docs, 28 Mar. 2018, https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript.
  2. "Storing the information you need — Variables." MDN Web Docs, 28 Mar. 2018, http://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables.
  3. "Functions." MDN Web Docs, 5 Apr. 2018, http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions.
  4. "Functions." MDN Web Docs, 5 Apr. 2018, http://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions.