|
| 1 | + |
| 2 | +*** |
| 3 | + |
| 4 | + |
| 5 | + |
| 6 | +# Learning JavaScript |
| 7 | + |
| 8 | +I am not too experienced with the JavaScript programming language at the moment, but I still know a somewhat good amount. This document will go over my knowledge of the JavaScript programming language so far. |
| 9 | + |
| 10 | +This document uses version 1.8 of the JavaScript programming language. The version will NOT be listed with each example. |
| 11 | + |
| 12 | +## Hello world in JavaScript |
| 13 | + |
| 14 | +A simple Hello world program to print out to the web console |
| 15 | + |
| 16 | +```javascript |
| 17 | +console.log("Hello WorldWideWeb!"); |
| 18 | +``` |
| 19 | + |
| 20 | +_(i) This example has been tested yet, and works._ |
| 21 | + |
| 22 | +## Variables in JavaScript |
| 23 | + |
| 24 | +Variables in JavaScript |
| 25 | + |
| 26 | +```javascript |
| 27 | +var x = 2 |
| 28 | +var y = 16 |
| 29 | +console.log(2**16); |
| 30 | +``` |
| 31 | + |
| 32 | +_/!\ This example has not been tested yet, and may not work_ |
| 33 | + |
| 34 | +## Break in JavaScript |
| 35 | + |
| 36 | +The break keyword in JavaScript |
| 37 | + |
| 38 | +```javascript |
| 39 | +console.log("Break time!"); |
| 40 | +break; |
| 41 | +``` |
| 42 | + |
| 43 | +_/!\ This example has not been tested yet, and may not work. I still don't know exactly what the `break` keyword does_ |
| 44 | + |
| 45 | +## Functions in JavaScript |
| 46 | + |
| 47 | +Functions in JavaScript |
| 48 | + |
| 49 | +```javascript |
| 50 | +function aFunctionalFunction { |
| 51 | + console.log("A functional function has finished functioning."); |
| 52 | + break; |
| 53 | +} |
| 54 | +return aFunctionalFunction(); |
| 55 | +``` |
| 56 | + |
| 57 | +_/!\ This example has not been tested yet, and may not work_ |
| 58 | + |
| 59 | +## Return in JavaScript |
| 60 | + |
| 61 | +Returning in JavaScript |
| 62 | + |
| 63 | +```javascript |
| 64 | +function aFunctionalFunction { |
| 65 | + console.log("A functional function has finished functioning."); |
| 66 | + break; |
| 67 | +} |
| 68 | +return aFunctionalFunction(); |
| 69 | +``` |
| 70 | + |
| 71 | +_/!\ This example has not been tested yet, and may not work_ |
| 72 | + |
| 73 | +## Alert in JavaScript |
| 74 | + |
| 75 | +The alert command creates an alerting dialogue box. |
| 76 | + |
| 77 | +```javascript |
| 78 | +alert("Alert! The alert dialog box is now present"); |
| 79 | +break; |
| 80 | +``` |
| 81 | + |
| 82 | +_/!\ This example has not been tested yet, and may not work_ |
| 83 | + |
| 84 | +Spamming this function can result in a checkmarkable option to stop displaying popups, as they can get annoying. |
| 85 | + |
| 86 | +```javascript |
| 87 | +var x = bool(true) |
| 88 | +function alertAlot { |
| 89 | + while (x == true) { |
| 90 | + alert("I am an alert"); |
| 91 | + break; |
| 92 | + } |
| 93 | +} |
| 94 | +return alerAlot(); |
| 95 | +break; |
| 96 | +``` |
| 97 | + |
| 98 | +_/!\ This example has not been tested yet, and may not work_ |
| 99 | + |
| 100 | +## Comments in JavaScript |
| 101 | + |
| 102 | +Comments in JavaScript are identical to comments in C or C++. |
| 103 | + |
| 104 | +```javascript |
| 105 | +// This is a single line comment |
| 106 | +/* This |
| 107 | +is a multiline |
| 108 | +comment */ |
| 109 | +/* Multi-line comments |
| 110 | +* can also |
| 111 | +* be written |
| 112 | +* like this */ |
| 113 | +``` |
| 114 | + |
| 115 | +## For loop in JavaScript |
| 116 | + |
| 117 | +Here is an example of a `for` loop in JavaScript: |
| 118 | + |
| 119 | +```javascript |
| 120 | +let x = 0; |
| 121 | +for x in range(1,10) { |
| 122 | + console.log(x); |
| 123 | +} |
| 124 | +``` |
| 125 | + |
| 126 | +I am not sure if JavaScript supports the `range` keyword in the same way that Python does. |
| 127 | + |
| 128 | +_/!\ This example has not been tested yet, and may not work_ |
| 129 | + |
| 130 | +## While loop in JavaScript |
| 131 | + |
| 132 | +Here is an example of a `while` loop in JavaScript |
| 133 | + |
| 134 | +```javascript |
| 135 | +let x = -16; |
| 136 | +while x > 0 { |
| 137 | + console.log(x) |
| 138 | + x == x + 1; |
| 139 | +} |
| 140 | +``` |
| 141 | + |
| 142 | +_/!\ This example has not been tested yet, and may not work_ |
| 143 | + |
| 144 | +## If statement in JavaScript |
| 145 | + |
| 146 | +Section coming soon |
| 147 | + |
| 148 | +## Drawing in JavaScript |
| 149 | + |
| 150 | +Section coming soon |
| 151 | + |
| 152 | +## Classes in JavaScript |
| 153 | + |
| 154 | +Classes are a feature in JavaScript. The way I know them, they are extremely similar to other languages. At the moment, I don't see much purpose in classes, so I am likely missing something and need to find out what. |
| 155 | + |
| 156 | +```javascript |
| 157 | +class superClass { |
| 158 | + console.log("Superclass says Hello"); |
| 159 | +} |
| 160 | +``` |
| 161 | + |
| 162 | +## OnClick in JavaScript |
| 163 | + |
| 164 | +This example is going to include HTML alongside JavaScript. The 2 languages work strongly together (along with CSS), so this shouldn't be surprising. |
| 165 | + |
| 166 | +Here is the JavaScript portion: |
| 167 | + |
| 168 | +```javascript |
| 169 | +function javaScript { |
| 170 | + console.log("Object.OnClick activated, alerting message is going to be sent. If you didn't receive the message, you may have disabled dialog boxes for this page."); |
| 171 | + alert("Hello HTML, from JavaScript"); |
| 172 | +} |
| 173 | +object.onclick = function(){javaScript}; |
| 174 | +``` |
| 175 | + |
| 176 | +Here is the HTML5 portion: |
| 177 | + |
| 178 | +```html |
| 179 | +<HTML> |
| 180 | +<button>Click me!<element onclick="myScript"> |
| 181 | +</HTML> |
| 182 | +``` |
| 183 | + |
| 184 | +## Booleans in JavaScript |
| 185 | + |
| 186 | +Section coming soon |
| 187 | + |
| 188 | +## Integers in JavaScript |
| 189 | + |
| 190 | +Section coming soon |
| 191 | + |
| 192 | +## Strings in JavaScript |
| 193 | + |
| 194 | +Section coming soon |
| 195 | + |
| 196 | +## Concatenation in JavaScript |
| 197 | + |
| 198 | +Section coming soon |
| 199 | + |
| 200 | +## Tuples in JavaScript |
| 201 | + |
| 202 | +Section coming soon |
| 203 | + |
| 204 | +## Lists in JavaScript |
| 205 | + |
| 206 | +Section coming soon |
| 207 | + |
| 208 | +## Let Keyword in JavaScript |
| 209 | + |
| 210 | +Section coming soon |
| 211 | + |
| 212 | +## Operators in JavaScript |
| 213 | + |
| 214 | +Section coming soon |
| 215 | + |
| 216 | +## Constant in JavaScript |
| 217 | + |
| 218 | +Section coming soon |
| 219 | + |
| 220 | +## Embedding JavaScript in HTML |
| 221 | + |
| 222 | +Section coming soon |
| 223 | + |
| 224 | +## Linking to JavaScript in HTML |
| 225 | + |
| 226 | +Section coming soon |
| 227 | + |
| 228 | +## Fun with mathematics in JavaScript |
| 229 | + |
| 230 | +Section coming soon |
| 231 | + |
| 232 | +## Date and time in JavaScript |
| 233 | + |
| 234 | +Section coming soon |
| 235 | + |
| 236 | +## Math dot random in JavaScript |
| 237 | + |
| 238 | +Section coming soon |
| 239 | + |
| 240 | +## Else statement in JavaScript |
| 241 | + |
| 242 | +Section coming soon |
| 243 | + |
| 244 | +## JSON and JavaScript |
| 245 | + |
| 246 | +Section coming soon |
| 247 | + |
| 248 | +## Blink tag in JavaScript |
| 249 | + |
| 250 | +The blink tag requires HTML, CSS, AND JavaScript to work. The tag was deprecated, as it was too annoying, and disruptive, but most web browsers still support it. |
| 251 | + |
| 252 | +```javascript |
| 253 | +// JQuery example |
| 254 | +setInterval(function(){ |
| 255 | + $('blink').each(function() { |
| 256 | + $(this).toggle(); |
| 257 | +}); |
| 258 | +}, 250); |
| 259 | +// Vanilla JavaScript example |
| 260 | +(function() { |
| 261 | + var blinks = document.getElementsByTagName('blink'); |
| 262 | + var visibility = 'hidden'; |
| 263 | + window.setInterval(function() { |
| 264 | + for (var i = blinks.length - 1; i >= 0; i--) { |
| 265 | + blinks[i].style.visibility = visibility; |
| 266 | +} |
| 267 | + visibility = (visibility === 'visible') ? 'hidden' : 'visible'; |
| 268 | + }, 250); |
| 269 | +})(); |
| 270 | +``` |
| 271 | + |
| 272 | +## To add |
| 273 | + |
| 274 | +Several pieces of knowledge have not been added yet, including: |
| 275 | + |
| 276 | +- [x] Hello World |
| 277 | + |
| 278 | +- [x] Break |
| 279 | + |
| 280 | +- [x] Functions |
| 281 | + |
| 282 | +- [x] Return |
| 283 | + |
| 284 | +- [x] Alert |
| 285 | + |
| 286 | +- [x] Recursive alert |
| 287 | + |
| 288 | +- [x] For loop |
| 289 | + |
| 290 | +- [x] While loop |
| 291 | + |
| 292 | +- [ ] If statement |
| 293 | + |
| 294 | +- [ ] Drawing (various) |
| 295 | + |
| 296 | +- [x] Classes |
| 297 | + |
| 298 | +- [x] OnClick |
| 299 | + |
| 300 | +- [ ] Booleans |
| 301 | + |
| 302 | +- [ ] Integers |
| 303 | + |
| 304 | +- [ ] Strings |
| 305 | + |
| 306 | +- [ ] Concatenation |
| 307 | + |
| 308 | +- [ ] Tuples |
| 309 | + |
| 310 | +- [ ] Lists |
| 311 | + |
| 312 | +- [x] Comments |
| 313 | + |
| 314 | +- [ ] Let keyword |
| 315 | + |
| 316 | +- [ ] Operators |
| 317 | + |
| 318 | +- [ ] Const variables (cannot be altered) |
| 319 | + |
| 320 | +- [ ] Embedding in HTML |
| 321 | + |
| 322 | +- [ ] Linking to HTML |
| 323 | + |
| 324 | +- [ ] JavaScript math |
| 325 | + |
| 326 | +- [ ] JavaScript dates |
| 327 | + |
| 328 | +- [ ] Math.random |
| 329 | + |
| 330 | +- [ ] Else statement |
| 331 | + |
| 332 | +And much more |
| 333 | + |
| 334 | +*** |
| 335 | + |
| 336 | +## Source |
| 337 | + |
| 338 | +Most of my JavaScript knowledge at the moment comes from example, W3Schools, experimentation through a consistent 1.5 year period (2019-2021) using Firefox, and also some from Wikipedia. |
| 339 | + |
| 340 | +## Other knowledge of JavaScript |
| 341 | + |
| 342 | +1. JavaScript uses the `*.js` file extension by default, but has the less common extensions `*.mjs` and `*.cjs` |
| 343 | + |
| 344 | +2. Several browsers block JavaScript due to abuse and privacy concerns. GNU criticizes JavaScript, and calls certain sites that use it "non-free JavaScript" this has made me like JavaScript less |
| 345 | + |
| 346 | +3. JavaScript has several toolchains and software compilers for it, including Gulp, Node.js, Vue.js, AngularJS, Electron, ProcessingJS, etc. (these are all the ones I know of) When none is used, it is known as vanilla JavaScript |
| 347 | + |
| 348 | +4. JavaScript is NOT to be confused with Java |
| 349 | + |
| 350 | +5. Microsoft had an early implementation of JavaScript of their own that they call JScript. It evolved into JScript.NET |
| 351 | + |
| 352 | +6. JavaScript is one of the 3 standard languages for developing webpages (HTML5, CSS3, JavaScript) although it isn't always required, and other languages (such as PHP, Python, Ruby, etc.) can be used as well/instead |
| 353 | + |
| 354 | +7. JavaScript++ is an implementation of JavaScript that adds features of C++ to JavaScript |
| 355 | + |
| 356 | +8. JavaScript is a semicolon and curly bracket language |
| 357 | + |
| 358 | +9. Brendan Eich invented JavaScript |
| 359 | + |
| 360 | +10. NetScape developed a technology known as JSSS (JavaScript Style Sheets) in the 1990s, but it never caught on, but introduced several features to CSS |
| 361 | + |
| 362 | +11. ECMAScript is the standardization language of JavaScript |
| 363 | + |
| 364 | +12. JQuery is a common JavaScript library for graphics |
| 365 | + |
| 366 | +13. BackboneJS is a minimal JavaScript library |
| 367 | + |
| 368 | +14. JavaScript is noted in the programmer community as one of the most difficult programming languages in terms of absurdity, but may still be less complicated than C++ or Assembly in terms of complexity (Brainfuck and other Esotoric languages are not included here, as they are on a whole 'nother level) For JavaScript insanity examples, see [WTFJS](https://github.com/denysdovhan/wtfjs/) for detailed examples |
| 369 | + |
| 370 | +15. WebGL is a JavaScript library used for 3D modeling within any standard/unstandard (Google Chrome/Google Chromium, Safari) web browser |
| 371 | + |
| 372 | +16. No other knowledge of JavaScript |
| 373 | + |
| 374 | +*** |
| 375 | + |
| 376 | +## Developer notes |
| 377 | + |
| 378 | +This list was abandoned for a few months (not even being looked at from 2022 January 14th to 2022 April 18th) I have come back to it on 2022, April 19th, due to renewed interest in programming language knowledge repositories. I intend to keep as much of the original structure as possible, while also adding new knowledge. This is a legacy document, and was written differently than how I have been writing these types lately. Legacy parts (such as `variables in <language>` sections) will remain unchanged, while improvements will take place (notably: fixing the JavaScript comments example, adding new `other knowledge of JavaScript` adding the developer notes section, referencing the JavaScript logo, adding sources, adding a file version timestamp, changing all level 4 headers to level 2, and changing the title header from level 3 to level 1) |
| 379 | + |
| 380 | +When this list goes public, it will still be incomplete, and will not be regarded as a complete entry. |
| 381 | + |
| 382 | +*** |
| 383 | + |
| 384 | +**File version:** `1 (2022, Tuesday, April 19th at 7:16 pm PST)` - Prepared 1 day early |
| 385 | + |
| 386 | +*** |
0 commit comments