133 |
135 |
136 |
137 |
138 |
156 |
157 |
158 | Introduction to JavaScript
134 |Preface
162 |WIP…pre spelling check
163 |This tutorial covers the basic functionality operations of the JavaScript (JS) language, covering the following topics:
164 |-
165 |
- Setting VScode environment 166 |
- Basic workflow 167 |
- Variables 168 |
- Functions 169 |
- Data structure 170 |
Prerequisites
173 |Here are the assumptions I made when I created this tutorial:
174 |-
175 |
- No previous knowledge of JS 176 |
- Have basic knowledge of another programming language (e.g., Python, R, Julia, etc.), and an understanding of the use of variables assignment and functions 177 |
In addition, we will use some basic HTML and CSS throughout the tutorial, don’t worry if you are unfamiliar with those languages.
179 | 180 | 181 |
26 |
27 | You can read more about setting and using Docker with VScode on [VScode's documentation](https://code.visualstudio.com/docs/containers/overview).
28 |
29 |
30 | If you want to leverage the tutorial Docker settings, you can clone the repository and follow the next steps:
31 |
32 | * Open the tutorial repository's folder on VScode
33 | * Open the `Command Palette` (⇧⌘P in Mac, Ctrl+Shift+P in Windows) or use the `Open Remote Window` button (on the bottom left side, see the screen recording above) and type `Open Folder in Container`.
34 |
35 | **Note:** It might take few minutes on the first time opening the container, as it pull the docker image from [Docker Hub](https://hub.docker.com/repository/docker/rkrispin/tutorial).
36 |
37 | ## Workflow
38 |
39 | JavaScript (also known as JS), is one of the most popular programming languages for web development. It is typically used to create web page applications, mobile apps, games, and great data visualization tools (D3, Observable Plot, Leaflet, Charts, etc.). You can run JavaScript on your web browser (e.g., Chrome, Safari, Firefox, etc.):
40 |
41 | **Screen record here***
42 |
43 | While you can use your web browser as a consul for ad-hoc code tests, the development of JS applications is done inside a script using a code editor such VScode, notepad, etc. It is common to have JS code embedded inside HTML script (or call JS script from HTML script).
44 |
45 | ### File structure
46 |
47 | In this tutorial, we will adopt the basic framework for running JS code on the browser by setting a web page with an HTML file (`index.html`) and leveraging it to call a JS file (`index.js`) with our JS code. In addition, we will use a CSS file (`style.css`) to set the web page style. I will set those files under the [JavaScript folder](https://github.com/RamiKrispin/Tutorials/tree/main/JavaScript):
48 |
49 | ``` shell
50 | .
51 | ├── index.html
52 | ├── index.js
53 | └── style.ccs
54 | ```
55 |
56 |
57 | **Note:** For convenience, I placed the three files in the same folder. However, if you wish to arrange it differently, you can easily reference the `index.js` and `style.css` file paths from the `index.html` file.
58 |
59 | Don't worry if you are not familiar with HTML or CSS. We will use the basic templates to set those files. Let's start by creating three empty files using the file names above. To set the HTML file, we will use the VScode HTML code snippet template by typing the `!` symbol and press enter:
60 |
61 | 
62 |
63 | In a nutshell, the HTML language is based on code chunks nested by tags. The tags define the code's functionality. Here is the most common tag structure:
64 |
65 | ``` html
66 |