به نام خدا

آموزش 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
برای ورود به بازار وب، 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
- 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, Electron, ... )

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

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

Languages That Compile To JavaScript

Dart
TypeScript
Elm
PureScript
CoffeScripts
ClojureScript
Scala.js
Reason

What is ECMAScript?

ECMAScript Versions

ECMAScript 6 Browser Support

Babel

Course Content

Language

Building Blocks
Dynamic Programming
Object Oriented Programming
Debugging
Reflection
Events

DOM Manipulation

DOM
Validation
Animation
Event Handling
Drag & Drop
Keyboard Events

Data Transfer

Ajax
CORS
Web Service
JSON
Binary File
JSONP

JavaScript Libraries

JQuery
- Plugins
- DOM Selection
- DOM Manipulation
- Event Handling
- Ajax
Mustache
Lodash
Ramda
Leaflet

Tips

JavaScript Template
iFrame
Security
HTTP Message
Obfuscation
Minifying

یاد آوری

HTTP

Hypertext Transfer Protocol

URL

Uniform Resource Locator

Web Server
- Runs in server-side
- Dynamic/Static content
- Full access to server resources
- Example
  - Apache
  - NodeJS
  - IIS
  - Tomcat

Web Browser
- Runs in client
- Render content
- Example
  - Chrome
  - Firefox
  - IE
  - Safari

Web Site

vs

Web Application

Request / Response

Header

Body

HTTP Request methods

Response Status Codes

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

HTML

Hypertext Markup Language

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

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>