دوره

دی 1403 - رسول پاشایی

Modern JavaScript

پیش نیاز های دوره

  • Programming Basics
    • Function
    • Variables
    • Control Flow
    • OOP
      • Class
      • Object
      • Inheritance
      • ...
  • HTML
  • CSS
    • Css Selector

Course Content

Language

  • Building Blocks
  • Dynamic Programming
  • Object Oriented Programming
  • Debugging
  • Serialization 
  • Reflection
  • Events
  • ES6 Features

Async

  • Async vs Sync
  • Callback
  • Promise
  • async/await
  • Observable

UI

  • DOM
  • Validation
  • Animation
  • Event Handling
  • Drag & Drop
  • Keyboard Events

Data Transfer

  • Ajax
  • CORS
  • Web Service
  • JSON
  • Binary File
  • JSONP
  • GraphQL

JavaScript Libraries

  • Axios
  • Handlebars js
  • Lodash
  • Ramda
  • Leaflet

Tips

  • JavaScript Template
  • iFrame
  • Security
  • HTTP Message
  • Obfuscation
  • Minifying

JavaScript

What is JavaScript?

Interpreted

  • High-Level
  • Dynamic
  • Weakly typed
  • Prototype based
  • Multi-paradigm 
    • Event driven
    • Object Oriented
    • Functional
    • Imperative

Brandon Eich

  • 1995
  • Scheme
  • Java Syntax
  • 10 Days
  • Name
    • Mocha
    • LiveScript
    • JavaScript™

Influence

  • Self
    • Prototypal inheritance
    • Dynamic objects
  • Scheme
    • Lambda
    • Loose typing
  • Java
    • Syntax
    • Conventions
  • Perl
    • Regex

Scheme Sample

(let loop ((n 1))
  (if (> n 10)
      '()
      (cons n
	    (loop (+ n 1)))))

===> (1 2 3 4 5 6 7 8 9 10)

Many contrast

  • Best ideas
  • Worst Ideas
  • And a lot between

Good, Bad, Ugly 

JavaScript vs Java

JavaScript Program

ECMAScript

Platform  (Browser, Node, Mobile, ... )

Run-time (V8, Spidermonkey, Chakra, ...)

JavaScript Is Everywhere

  • Chrome - V8

  • Firefox - SpiderMonkey

  • MS Edge - Chakra

Web Browser

  • Node?

  • Bun

  • Deno

  • Rhino

Server

  • Electron

  • Tauri

  • AppJS

  • nodewebkit

  • Bracket Shell

Desktop App

  • Tauri

  • Cordova

  • Capacitor

  • NativeScript

  • ReactNative

Mobile App

  • MongoDB

  • PunchDB

  • NeDB

Database

  • JerryScript

  • Espruino

  • Duktape

IOT

Statistics

Languages That Compile To JavaScript

  • Dart
  • TypeScript
  • Elm
  • PureScript
  • CoffeScripts
  • ClojureScript
  • Scala.js
  • Reason

What is ECMAScript?

ECMAScript Versions

Edition Formal name Release date
ES1 ES1 June 1997
ES2 ES2 June 1998
ES3 ES3 December 1999
ES4 ES4 Disposed
ES5 ES5 December 2009
ES 5.1 ES 5.1 June 2011
ES6 ES2015 June 2015
ES7 ES2016 June 2016
ES8 ES2017 June 2017
ES9 ES2018 June 2018
ES10 ES2019 ​June 2019
ES11 ES2020 June 2020
ES12 ES2021 June 2021
ES13 ES2022 June 2022
ES14 ES2023 June 2023
ES15 ES2024 June 2024

ECMAScript 6 Browser Support

Transpile Vs Compile

Babel

Bundle

یاد آوری

HTTP

Hypertext Transfer Protocol

URL

Uniform Resource Locator
  • Web Server
    • Responses to HTTP Requests
    • Runs in server-side
    • Dynamic/Static content
    • Full access to server resources
    • Example
      • Apache 
      • IIS
      • Tomcat
  • Web Browser
    • Runs in client
    • Render content
    • Example
      • Chrome 
      • Firefox
      • IE
      • Safari

Web Site

vs

Web Application

Request / Response

  1. URL

  2. Header - None mandatory

  3. Method

  4. Body

HTTP Request methods

Response Status Codes

  • Informational 1XX
  • Successful 2XX
  • Redirection 3XX
  • Client Error 4XX
  • Server Error 5XX

More Details https://httpstatuses.com/

https://http.cat/

HTTP/1.1 vs HTTP/2

http://www.http2demo.io/

Caching

Why is this important?

Main Types of Client-Side Caching

  • HTTP Response Code
  • JavaScript/Ajax
  • HTML5/PWA

How to disable in development mode

HTML

Hypertext Markup Language

Element vs Attribute

Sample HTML

<!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <title>Login</title>
  </head>
  <body>
    <div class="container">
    <div class="row">
    <div class="span12">
      <form class="form-horizontal" action='' method="POST">
        <fieldset>
          <div id="legend">
            <legend class="">Login</legend>
          </div>
          <div class="control-group">
            <!-- Username -->
            <label class="control-label"  for="username">Username</label>
            <div class="controls">
              <input type="text" id="username" name="username" placeholder="" class="input-xlarge" required data-validation-endpoint="check-username-exists.php" >
            </div>
          </div>
          <div class="control-group">
            <!-- Password-->
            <label class="control-label" for="password">Password</label>
            <div class="controls">
              <input type="password" id="password" name="password" placeholder="" class="input-xlarge">
            </div>
          </div>
          <div class="control-group">
            <!-- Button -->
            <div class="controls">
              <button class="btn btn-success">Login</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
    </div>
  </body>
</html>

Minify vs Uglify

CSS

Cascading Style Sheets

CSS Selectors

CSS Selector Usage

  • CSS
  • DOM Selection
    • querySelector/querySelectorAll
    • jquery
  • HTML code generator

Resources

Emmet

#page>div.logo+ul#navigation>li*5>a{Item $}
<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

Resource

20 Web Projects With Vanilla JavaScript

Download Video

Contact Info

Code Playground

Getting Started!

Made with Slides.com