var personViewModel = {
firstName: ko.observable("Masoud"),
lastName: ko.observable("Pakdel")
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
};<span data-bind='text: fullName'></span>
function Product(name, price) {
this.name = ko.observable(name);
this.price = ko.observable(price);
}this.shoppingCart = ko.observableArray([
new Product("Beer", 10.99),
new Product("Brats", 7.99),
new Product("Buns", 1.49)
]);<table>
<thead><tr>
<th>Product</th>
<th>Price</th>
</tr></thead>
<tbody data-bind='foreach: shoppingCart'>
<tr>
<td data-bind='text: name'></td>
<td data-bind='text: price'></td>
</tr>
</tbody>
</table><button data-bind='click: addProduct'>Add Beer</button>
this.addProduct = function() {
this.shoppingCart.push(new Product("More Beer", 10.99));
};function PersonViewModel()
{
this.firstName = ko.observable("John");
this.lastName = ko.observable("Smith");
this.checkout = function () {
alert("Trying to checkout");
};
this.fullName = ko.computed(function(){
return this.firstName() + " " + this.lastName();
}, this);
this.shoppingCart = ko.observableArray([
new Product("Beer", 10.99),
new Product("Brats", 7.99),
new Product("Buns", 1.49)
]);
this.addProduct = function () {
this.shoppingCart.push(new Product("More beer", 10.99));
};
};this.removeProduct = function(product) {
self.shoppingCart.remove(product);
}; function PersonViewModel() {
var self = this;<tr> <td data-bind='text: name'></td> <td data-bind='text: price'></td> <td><button data-bind='click: $root.removeProduct'>Remove</button></td> </tr>
<!DOCTYPE html>
<html>
<head>
<script src="./jquery.min.js"></script>
<meta charset="utf-8">
<title></title>
<script>
$(document).ready(()=>
{
alert("Welcome");
});
</script>
</head>
<body>
</body>
</html> win.openDevTools();
exports.sayHelloInEnglish=()=>
{
console.log("hello");
}
exports.sayHelloInPersian=()=>
{
console.log('salam');
} const test=require("./test.js");
test.sayHelloInPersian();
test.sayHelloInEnglish(); if ( typeof module === "object" && typeof module.exports === "object" ) {
// set jQuery in `module`
} else {
// set jQuery in `window`
} <script src="./jquery.min.js"></script> <script> window.$=window.jQuery=module.exports; </script>
window.$ = window.jQuery = require('./jquery.min.js'); App = Ember.Application.create();
App.Router.map(function() {
this.resource('accounts'); // takes us to /accounts
this.resource('gallery'); // takes us to /gallery
}); App.Router.map(function() {
this.resource('news', function() {
this.resource('images', function () { // takes us to /news/images
this.route('add');// takes us to /news/images/add
});
});
}); App.SiteLink = Ember.Object.extend({});
App.SiteLink.reopenClass({
findAll: function() {
var links = [];
//… $.getJSON …
return links;
}
}); App.GalleryRoute = Ember.Route.extend({
model: function() {
return App.SiteLink.findAll();
}
}); 
App.GalleryRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', ['red', 'yellow', 'blue']);
}
}); App.GalleryController = Ember.Controller.extend({
search: '',
content: ['red', 'yellow', 'blue'],
query: function() {
var data = this.get('search');
this.transitionToRoute('search', { query: data });
}
}); <script type="text/x-handlebars" data-template-name="sayhello">
Hello,
<strong>{{firstName}} {{lastName}}</strong>!
</script> <script type="text/x-handlebars" data-template-name="sayhello">
Hello,
<strong>{{firstName}} {{lastName}}</strong>!
{{#if person}}
Welcome back,
<strong>{{person.firstName}} {{person.lastName}}</strong>!
{{/if}}
<ul>
{{#each friend in friends}}
<li>
{{friend.name}}
</li>
{{/each}}
</ul>
<img {{bindAttr src="link.url" }} />
{{#linkTo ''about}}About{{/linkTo}}
</script> this.resource('employees'); PM> Install-Package EmberJS
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script> <script src="Scripts/handlebars.js" type="text/javascript"></script> <script src="Scripts/ember.js" type="text/javascript"></script> <script src="Scripts/app.js" type="text/javascript"></script>
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
setupController:function(controller) {
controller.set('content', ['red', 'yellow', 'blue']);
}
}); App.Router.map(function() {
this.resource('application');
this.resource('index');
}); <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="Scripts/handlebars.js" type="text/javascript"></script>
<script src="Scripts/ember.js" type="text/javascript"></script>
<script src="Scripts/app.js" type="text/javascript"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="index">
Hello,
<strong>Welcome to Ember.js</strong>!
<ul>
{{#each item in content}}
<li>
{{item}}
</li>
{{/each}}
</ul>
</script>
</body>
</html> <body>
<script type="text/x-handlebars" data-template-name="application">
<h1>Header</h1>
{{outlet}}
</script> data-val-remote="کلمه عبور وارد شده را راحت می‌توان حدس زد!" data-val-remote-additionalfields="*.Password1" data-val-remote-type="POST" data-val-remote-url="/register/checkpassword"
export class EmailValidatorDirective implements Validator { export class RemoteValidatorDirective implements AsyncValidator { validate(c: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
>ng g d CustomValidators/RemoteValidator -m custom-validators.module
import { Directive, Input } from "@angular/core";
import {
AsyncValidator,
AbstractControl,
NG_ASYNC_VALIDATORS
} from "@angular/forms";
import { Http, RequestOptions, Response, Headers } from "@angular/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/distinctUntilChanged";
import "rxjs/add/operator/takeUntil";
import "rxjs/add/operator/take";
import { Observable } from "rxjs/Observable";
import { Subject } from "rxjs/Subject";
@Directive({
selector:
"[appRemoteValidator][formControlName],[appRemoteValidator][formControl],[appRemoteValidator][ngModel]",
providers: [
{
provide: NG_ASYNC_VALIDATORS,
useExisting: RemoteValidatorDirective,
multi: true
}
]
})
export class RemoteValidatorDirective implements AsyncValidator {
@Input("remote-url") remoteUrl: string;
@Input("remote-field") remoteField: string;
@Input("remote-additional-fields") remoteAdditionalFields: string;
constructor(private http: Http) {}
validate(control: AbstractControl): Observable<{ [key: string]: any }> {
if (!this.remoteUrl || this.remoteUrl === undefined) {
return Observable.throw("`remoteUrl` is undefined.");
}
if (!this.remoteField || this.remoteField === undefined) {
return Observable.throw("`remoteField` is undefined.");
}
const dataObject = {};
if (
this.remoteAdditionalFields &&
this.remoteAdditionalFields !== undefined
) {
const otherFields = this.remoteAdditionalFields.split(",");
otherFields.forEach(field => {
const name = field.trim();
const otherControl = control.root.get(name);
if (otherControl) {
dataObject[name] = otherControl.value;
}
});
}
// This is used to signal the streams to terminate.
const changed$ = new Subject<any>();
changed$.next(); // This will signal the previous stream (if any) to terminate.
const debounceTime = 400;
return new Observable((obs: any) => {
control.valueChanges
.takeUntil(changed$)
.take(1)
.debounceTime(debounceTime)
.distinctUntilChanged()
.flatMap(term => {
dataObject[this.remoteField] = term;
return this.doRemoteValidation(dataObject);
})
.subscribe(
(result: IRemoteValidationResult) => {
if (result.result) {
obs.next(null);
} else {
obs.next({
remoteValidation: {
remoteValidationMessage: result.message
}
});
}
obs.complete();
},
error => {
obs.next(null);
obs.complete();
}
);
});
}
private doRemoteValidation(data: any): Observable<IRemoteValidationResult> {
const headers = new Headers({ "Content-Type": "application/json" }); // for ASP.NET MVC
const options = new RequestOptions({ headers: headers });
return this.http
.post(this.remoteUrl, JSON.stringify(data), options)
.map(this.extractData)
.do(result => console.log("remoteValidation result: ", result))
.catch(this.handleError);
}
private extractData(res: Response): IRemoteValidationResult {
const body = <IRemoteValidationResult>res.json();
return body || (<IRemoteValidationResult>{});
}
private handleError(error: Response): Observable<any> {
console.error("observable error: ", error);
return Observable.throw(error.statusText);
}
}
export interface IRemoteValidationResult {
result: boolean;
message: string;
} @Directive({
selector:
"[appRemoteValidator][formControlName],[appRemoteValidator][formControl],[appRemoteValidator][ngModel]",
providers: [
{
provide: NG_ASYNC_VALIDATORS,
useExisting: RemoteValidatorDirective,
multi: true
}
]
}) export class RemoteValidatorDirective implements AsyncValidator {
@Input("remote-url") remoteUrl: string;
@Input("remote-field") remoteField: string;
@Input("remote-additional-fields") remoteAdditionalFields: string; <input #username="ngModel" required maxlength="8" minlength="4" type="text"
appRemoteValidator [remote-url]="remoteUsernameValidationUrl" remote-field="FirstName"
remote-additional-fields="email,password" class="form-control" name="username"
[(ngModel)]="model.username"> export class UserRegisterComponent implements OnInit {
remoteUsernameValidationUrl = "api/Employee/CheckUser"; [remote-field]="'FirstName'"
export interface IRemoteValidationResult {
result: boolean;
message: string;
} namespace AngularTemplateDrivenFormsLab.Controllers
{
[Route("api/[controller]")]
public class EmployeeController : Controller
{
[HttpPost("[action]")]
[ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult CheckUser([FromBody] Employee model)
{
var remoteValidationResult = new { result = true, message = $"{model.FirstName} is fine!" };
if (model.FirstName?.Equals("Vahid", StringComparison.OrdinalIgnoreCase) ?? false)
{
remoteValidationResult = new { result = false, message = "username:`Vahid` is already taken." };
}
return Json(remoteValidationResult);
}
}
} <div class="form-group" [class.has-error]="username.invalid && username.touched">
<label class="control-label">User Name</label>
<input #username="ngModel" required maxlength="8" minlength="4" type="text"
appRemoteValidator [remote-url]="remoteUsernameValidationUrl" remote-field="FirstName"
remote-additional-fields="email,password" class="form-control" name="username"
[(ngModel)]="model.username">
<div *ngIf="username.pending" class="alert alert-warning">
Checking server, Please wait ...
</div>
<div *ngIf="username.invalid && username.touched">
<div class="alert alert-danger" *ngIf="username.errors.remoteValidation">
{{username.errors.remoteValidation.remoteValidationMessage}}
</div>
</div>
</div> 
obs.next({
remoteValidation: {
remoteValidationMessage: result.message
}
}); 
// This is used to signal the streams to terminate.
const changed$ = new Subject<any>();
changed$.next(); // This will signal the previous stream (if any) to terminate.
const debounceTime = 400;
return new Observable((obs: any) => {
control.valueChanges
.takeUntil(changed$)
.take(1)
.debounceTime(debounceTime)
.distinctUntilChanged() <!DOCTYPE html> <html> <head> <title>event propagation demo</title> </head> <body> <section> <h1>nested divs</h1> <div>one <div>child of one <div>child of child of one</div> </div> </div> </section> </body> </html>
1.window 2.document 3.<html> 4.<body> 5.<section> 6.<div>one 7.<div>child of one 8.<div>child of child of one
9.<div>child of child of one 10.<div>child of one 11.<div>one 12.<section> 13.<body> 14.<html> 15.document 16.window
<div> <button type="button">do something</button> </div> <form method="POST" action="/user"> <label>Enter user name: <input name="user"> </label> <button type="submit">submit</button> </form>
// submits the form
$('FORM').trigger('submit');
// submits the form by clicking the button
$('BUTTON[type="submit"]').trigger('click');
// focuses the text input
$('INPUT').trigger('focus');
// removes focus from the text input
$('INPUT').trigger('blur'); // submits the form
$('FORM').submit();
// submits the form by clicking the button
$('BUTTON[type="submit"]').click();
// focuses the text input
$('INPUT').focus();
// removes focus from the text input
$('INPUT').blur(); // clicks the first button - the click event does not bubble
$('BUTTON[type="button"]').triggerHandler('click'); // submits the form
document.querySelector('FORM').submit();
// submits the form by clicking the button
document.querySelector('BUTTON[type="submit"]').click();
// focuses the text input
document.querySelector('INPUT').focus();
// removes focus from the text input
document.querySelector('INPUT').blur(); var clickEvent;
if (typeof Event === 'function') {
clickEvent = new Event('click', {bubbles: false});
}
else {
clickEvent = document.createEvent('Event');
clickEvent.initEvent('click', false, true);
}
document.querySelector('BUTTON[type="button"]').dispatchEvent(clickEvent); // Triggers a custom "image-removed" element,
// which bubbles up to ancestor elements.
$libraryElement.trigger('image-removed', {id: 1}); var event = new CustomEvent('image-removed', {
bubbles: true,
detail: {id: 1}
});
libraryElement.dispatchEvent(event); var event = document.createEvent('CustomEvent');
event.initCustomEvent('image-removed', false, true, {id: 1});
libraryElement.dispatchEvent(event); var event;
// If the `CustomEvent` constructor function is not supported,
// fall back to `createEvent` method.
if (typeof CustomEvent === 'function') {
event = new CustomEvent('image-removed', {
bubbles: true,
detail: {id: 1}
});
}
else {
event = document.createEvent('CustomEvent');
event.initCustomEvent('image-removed', false, true, {
id: 1
});
}
libraryElement.dispatchEvent(event); $(window).on('resize', function() {
// react to new window size
}); // remove all resize listeners - usually a bad idea
$(window).off('resize'); var resizeHandler = function() {
// react to new window size
};
$(window).on('resize', resizeHandler);
// ...later
// remove only our resize handler
$(window).off('resize', resizeHandler); $(someElement).one('click', function() {
// handle click event
}); <button onclick="handleButtonClick()">click me</button>
buttonEl.onclick = function() {
// handle button click
}; buttonEl.addEventListener('click', function() {
// handle button click
}); window.addEventListener('resize', function() {
// react to new window size
}); var resizeHandler = function() {
// react to new window size
};
window.addEventListener('resize', resizeHandler);
// ...later
// remove only our resize handler
window.removeEventListener('resize', resizeHandler); someElement.addEventListener('click', function(event) {
// handle click event
}, { once: true }); var clickHandler = function() {
// handle click event
// ...then unregister handler
someElement.removeEventListener('click', clickHandler);
};
someElement.addEventListener('click', clickHandler); $(window).on('mousedown', function(event) {
event.preventDefault();
}); window.addEventListener('mousedown', function(event) {
event.preventDefault();
}); $someElement.on('click', function(event) {
event.stopPropagation();
}); // stop propagation during capturing phase
someElement.addEventListener('click', function(event) {
event.stopPropagation();
}, true); // stop propagation during bubbling phase
someElement.addEventListener('click', function(event) {
event.stopPropagation();
}); $someElement.on('click', function(event) {
event.stopImmediatePropagation();
}); someElement.addEventListener('click', function(event) {
event.stopImmediatePropagation();
}); $uploaderElement.trigger('uploadError', {
filename: 'picture.jpeg'
}); $uploaderParent.on('uploadError', function(event, data) {
showAlert('Failed to upload ' + data.filename);
}); // send the failed filename w/ an error event
var event = new CustomEvent('uploadError', {
bubbles: true,
detail: {filename: 'picture.jpeg'}
});
uploaderElement.dispatchEvent(event);
// ...and this is a listener for the event
uploaderParent.addEventListener('uploadError', function(event) {
showAlert('Failed to upload ' + event.detail.filename);
}); // send the failed filename w/ an error event
var event = document.createEvent('CustomEvent');
event.initCustomEvent('uploadError', true, true, {
filename: 'picture.jpeg'
});
uploaderElement.dispatchEvent(event);
// ...and this is a listener for the event
uploaderParent.addEventListener('uploadError', function(event) {
showAlert('Failed to upload ' + event.detail.filename);
}); $(window).on('load', function() {
// page is fully rendered
}); window.addEventListener('load', function() {
// page is fully rendered
}); $(document).ready(function() {
// markup is on the page
});
//or
$(function() {
// markup is on the page
}); document.addEventListener('DOMContentLoaded', function() {
// markup is on the page
}); $('IMG').on('load', function() {
// image has successfully loaded
});
$('IMG').on('error', function() {
// image has failed to load
}); document.querySelector('IMG').addEventListener('load', function() {
// image has successfully loaded
});
document.querySelector('IMG').addEventListener('error', function() {
// image has failed to load
}); $(window).on('beforeunload', function() {
return 'Are you sure you want to unload the page?';
}); window.addEventListener('beforeunload', function(event) {
var message = 'Are you sure you want to unload the page?';
event.returnValue = message;
return message;
}); یک مقدار قدیمی است ولی قسمت هایی از آن را خواندن حتما مفید خواهد بود.
<head>
<link href="node_modules/normalize.css/normalize.css" rel="stylesheet" />
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="node_modules/froala-editor/css/froala_style.min.css" rel="stylesheet" />
<link href="node_modules/froala-editor/css/froala_editor.min.css" rel="stylesheet" />
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/froala-editor/js/froala_editor.min.js"></script>
<script src="node_modules/froala-editor/js/languages/fa.js"></script>
</head> module.exports = function (grunt) {
var developer = false;
var config = {
libPath: 'wwwroot/lib/',
nodePath: 'node_modules/',
getNodePackagePath: function (path) {
return this.nodePath + path;
},
getLibPath: function (path) {
return this.libPath + path;
}
}
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
jquery: {
files: [{
cwd: config.getNodePackagePath('jquery/dist/'),
expand: true,
src: 'jquery.min*', dest: config.getLibPath('jquery/'),
}]
},
font_awesome: {
files: [
{
cwd: config.getNodePackagePath('font-awesome/'),
expand: true,
src: ['css/*.min.css', 'fonts/*'], dest: config.getLibPath('font-awesome/'),
filter: 'isFile'
},
]
},
froala_editor: {
files: [
{
cwd: config.getNodePackagePath('froala-editor/'),
expand: true,
src: ['css/**/*.min.css', 'js/**', '!js/languages/*.js', 'js/languages/fa.js'], dest: config.getLibPath('froala-editor/')
}
]
},
normalizecss: {
files: [
{
cwd: config.getNodePackagePath('normalize.css/'),
expand: true,
src: 'normalize.css', dest: config.getLibPath('normalize.css/')
}
]
}
},
clean: {
lib: ['wwwroot/lib/']
},
});
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.registerTask("default", ['clean', 'copy']);
}; <head>
<link href="wwwroot/lib/normalize.css/normalize.css" rel="stylesheet" />
<link href="wwwroot/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="wwwroot/lib/froala-editor/css/froala_style.min.css" rel="stylesheet" />
<link href="wwwroot/lib/froala-editor/css/froala_editor.min.css" rel="stylesheet" />
<script src="wwwroot/lib/jquery/jquery.min.js"></script>
<script src="wwwroot/lib/froala-editor/js/froala_editor.min.js"></script>
<script src="wwwroot/lib/froala-editor/js/languages/fa.js"></script>
</head>