Skip to content

Commit 899b284

Browse files
the-ethan-huntthe-ethan-hunt
authored
Merge pull request #252 from Geekz45679/patch-1
Overhauled the Vanilla JavaScript tutorial to be more clear and concise.
2 parents c9ba120 + 5cce247 commit 899b284

File tree

1 file changed

+46
-41
lines changed

1 file changed

+46
-41
lines changed

‎guides/Starters/Vanilla_js.md‎

Lines changed: 46 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,46 @@
1-
2-
## OVERVIEW:
3-
The term Vanilla in english is termed as "anything having no special or extra features".Vanilla javascript is basically plain old javascript,understandable by javascript compiler,which means writing DOM manipulation manually. It is fast,lightweight framework which enables one to build incredible and powerful javascript applications. It refers to the framework which makes use of javascript without any libraries but it sacrifices code legibility in order to achieve better performance.Facebook,Google,Youtube,Yahoo,Wikipedia,WindowsLive Twitter,Amazon,LinkedIn,MSN,eBay,Microsoft,Tumblr,Apple,Pinterest,PayPal,Reddit,Netflix,Stackoverflow makes use of vanilla js.
4-
5-
#### WHEN TO USE VANILLA JS ?
6-
Vanilla is fine when one aims to build a content-heavy website.
7-
8-
Use Vanilla when primary client side app technology(rendering html,routing,validation,data mapping,calling services and authentication) is different than javascript(.net,jsp etc) and one just want DOM manipulations to already rendered DOM without disturbing core mechanism of rendering.
9-
10-
#### USING VANILLA JS:
11-
In order to use vanilla js:
12-
13-
[< script src="path/to/vanilla.js" >< /script >]
14-
15-
one needs to put this code anywhere in html file.
16-
17-
#### LEARN VANILLA JS:
18-
[RESOURCES TO LEARN VANILLA JAVASCRIPT](https://designmodo.com/learn-vanilla-javascript/)
19-
20-
[YOUTUBE TUTORIALS]()
21-
## OVERVIEW:
22-
The term Vanilla in english is termed as "anything having no special or extra features".Vanilla javascript is basically plain old javascript,understandable by javascript compiler,which means writing DOM manipulation manually. It is fast,lightweight framework which enables one to build incredible and powerful javascript applications. It refers to the framework which makes use of javascript without any libraries but it sacrifices code legibility in order to achieve better performance.Facebook,Google,Youtube,Yahoo,Wikipedia,WindowsLive Twitter,Amazon,LinkedIn,MSN,eBay,Microsoft,Tumblr,Apple,Pinterest,PayPal,Reddit,Netflix,Stackoverflow makes use of vanilla js.
23-
24-
#### WHEN TO USE VANILLA JS ?
25-
Vanilla is fine when one aims to build a content-heavy website.
26-
27-
Use Vanilla when primary client side app technology(rendering html,routing,validation,data mapping,calling services and authentication) is different than javascript(.net,jsp etc).
28-
29-
Use Vanilla where DOM allows programs and scripts to dynamically access and update the content, structure, and style of a document to already rendered DOM without disturbing core mechanism of rendering.
30-
31-
#### USING VANILLA JS:
32-
In order to use vanilla js:
33-
34-
**< script src="path/to/vanilla.js" >< /script>**
35-
36-
one needs to put this code anywhere in html file.
37-
38-
#### LEARN VANILLA JS:
39-
[RESOURCES TO LEARN VANILLA JAVASCRIPT](https://designmodo.com/learn-vanilla-javascript/)
40-
41-
[YOUTUBE TUTORIALS](https://www.youtube.com/watch?v=vEROU2XtPR8&list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX)
1+
## Overview:
2+
The term Vanilla in english is termed as *"anything having no special or extra features"*. Vanilla javascript is basically plain old JavaScript. It's a fast and lightweight framework, which enables one to build incredible and powerful web applications. It is a framework which makes use of JavaScript without any libraries but it sacrifices code legibility and features in order to achieve better performance and simplicity.
3+
4+
#### When should you use Vanilla JavaScript?
5+
Vanilla JavaScript is suitable for simple web applications or [static websites](https://en.wikipedia.org/wiki/Static_web_page).
6+
#### How to get started using Vanilla Javascript:
7+
In order to use JavaScript, you'll need to create a HTML file, and include a script tag in the body of your document:
8+
`<script src="path/to/vanilla.js"></script>`
9+
10+
**Your HTML file should look a little something like this:**
11+
```html
12+
<!doctype html>
13+
<html>
14+
<head>
15+
<!-- Header content (e.g. title, metadata, css, etc) -->
16+
</head>
17+
<body>
18+
<p id="random"></p>
19+
<button onclick="generateRandomNumber()">Randomize</button>
20+
<script src="./vanilla.js"></script>
21+
</body>
22+
</html>
23+
```
24+
**Here is an example JavaScript file to get you started (place this in the same folder as your HTML file (name it vanilla.js):**
25+
This script will simply generates a random number when a button is pressed.
26+
```js
27+
// Save our target element to the variable 'textbox'.
28+
const textbox = document.getElementById('random');
29+
30+
// Defines our function to edit the textbox.
31+
function generateRandomNumber() {
32+
// This changes the 'inner text' of the element.
33+
textbox.innerText = Math.floor(Math.random() * 10);
34+
35+
/* Math.floor will round the number, while Math.random will
36+
generate a number between 0 and 1, so we multiply it by 10 to
37+
get a bigger number that is less than or equal to 10. */
38+
}
39+
```
40+
#### Resources to learn Vanilla JavaScript:
41+
**Interactive:**
42+
[Codecademy - JavaScript Courses](https://www.codecademy.com/catalog/language/javascript)
43+
**Articles:**
44+
[MDN Web Docs - JavaScript Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
45+
[w3schools - JavaScript Tutorial](https://www.w3schools.com/js/)
46+
[Best Resources to Learn Vanilla JavaScript from Scratch - Jake Rocheleau](https://designmodo.com/learn-vanilla-javascript/)

0 commit comments

Comments
 (0)