به نام خدا

آموزش JQuery , JavaScript , Ajax  (برنامه نویسی سمت کلاینت)

بهمن 98 - رسول پاشایی

اهمیت یادگیری تکنولوژی های سمت کاربر چیست؟

تکامل (سریعتر) تکنولوژی های سمت کاربر

حمل پذیری بالا

هزینه تولید کمتر

تعامل بالا

“Any application that can be written in JavaScript, will eventually be written in JavaScript.”
 — Jeff Atwood 2007, Author, Entrepreneur, Cofounder of StackOverflow

Atwood’s Law

برگی از تاریخ

علی

  • سال 78 از دانشگاه فارق التحصیل شد

  • برنامه دسکتاپ با C , Delphi

  • برای ورود به بازار وب، PHP را یاد گرفت

  • کمی هم JavaScript یادگرفت برای اعتبار سنجی فرم ها و پویا سازی و ...

  • یادگیری Java و Object-C  برای نوشتن برنامه های موبایلی

نازنین

  • دوسال قبل فارق التحصیل شد

  • یک وب اپلیکشن  متوسط با معماری MVC انجام داد

  • برای Android  و iOS برنامه موبایلی نوشت

  • برای Windows و Linux و OSX برنامه دسکتاپی نوشت

  • در حال نوشن برنامه های Serverless هست

مخاطبین دوره

  • برنامه نویسان وبی که  تصمیم دارند قابلیت تعامل با کاربر را در برنامه های خود افزایش دهند
  • برنامه نویسان وبی که  تصمیم دارند سرعت اجرا و کارایی برنامه های خود را افزایش دهند
  • طراحان سایت
  • برنامه نویسان دسکتاپ یا موبایل که تمایل دارند JavaScript  را به عنوان زبان برنامه نویسی انتخاب کنند
  • برنامه نویسانی که قصد یادگیری فریمورک هایی نظیر Angular یا  React را دارند

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

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

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
  • 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, ...)

Node vs Browser

JavaScript Is Everywhere

  • Chrome - V8

  • Firefox - SpiderMonkey

  • MS Edge - Chakra

Web Browser

  • Node?

  • Rhino

  • Deno

Server

  • Electron

  • AppJS

  • nodewebkit

  • Bracket Shell

Desktop App

  • Cordova

  • Capacitor

  • NativeScript

  • ReactNative

Mobile App

  • MongoDB

  • PunchDB

  • NeDB

Database

  • Espruino

  • Duktape

IOT

Statistics

StackOverflow - Developer Survey Results 2019

Languages That Compile To JavaScript

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

Ecosystem

http://www.modulecounts.com/

What is ECMAScript?

ECMAScript Versions

Edition Formal name Release date
ES10 ES2019 June 2019
ES9 ES2018 June 2018
ES8 ES2017 June 2017
ES7 ES2016 June 2016
ES6 ES 2015 June 2015
ES 5.1 ES 5.1 June 2011
ES5 ES5 December 2009
ES 4 ES 4 Disposed
ES3 ES3 December 1999
ES2 ES2 June 1998
ES1 ES1 June 1997

ECMAScript 6 Browser Support

Transpile Vs Compile

Babel

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

  • JQuery
    • Plugins
    • DOM Selection
    • DOM Manipulation
    • Event Handling
    • Ajax
  • Handlebars js
  • Lodash
  • Ramda
  • Leaflet

Tips

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

یاد آوری

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/

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