static void Main(string[] args) { foreach (var arg in args) { var x = Convert.ToInt32(arg); Console.WriteLine("{0} ^ 2 = {1}", x, x * x); } Console.ReadKey(); }
اما نکته اصلی این مطلب در مورد Debugging این گونه برنامهها است.
static void Main(string[] args) { foreach (var arg in args) { var x = Convert.ToInt32(arg); Console.WriteLine("{0} ^ 2 = {1}", x, x * x); } Console.ReadKey(); }
<Albums> <Album> <name>Modern Talking</name> <cover>http://album.com/a.jpg</cover> <Genres> <Genre>POP</Genre> <Genre>Jazz</Genre> <Genre>Classic</Genre> </Genres> <Description> this is a marvelous Album </Description> <price> 25.99$ </price> </Album> </Albums>
<xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/"> <html> .... </html> </xsl:template>
<div> <img src="" alt="image" /> <h3> <xsl:value-of select="albums/album/name" /> </h3> <h4>Artist Name 1</h4> <h5>POP</h5> <h6>25/5/2015</h6> <h7>this is description</h7> <div> <a href="#">More</a> </div> </div>
<xsl:for-each select="albums/album"> <div> <img src="" alt="image" /> <h3> <xsl:value-of select="name" /> </h3> <h4>Artist Name 1</h4> <h5>POP</h5> <h6>25/5/2015</h6> <h7>this is description</h7> <div> <a href="#">More</a> </div> </div> </xsl:for-each>
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="index.xslt"?>
<img src="{cover}" width="200px" height="200px"> <xsl:value-of select="cover" /> </img>
<xsl:element name="img"> <xsl:attribute name="src"> <xsl:value-of select="cover"/> </xsl:attribute> <xsl:attribute name="width"> 200px </xsl:attribute> <xsl:attribute name="height"> 200px </xsl:attribute> <xsl:value-of select="cover"/> </xsl:element>
<xsl:for-each select="Albums/Album"> <xsl:sort select="name"/>
دستورات شرطی
<xsl:variable name="numprice" select="number(substring(price,1,string-length(price)-1))" /> <xsl:if test="$numprice>=10"> <h4 > <span style='text-decoration:line-through'> <xsl:value-of select="price" /> </span> <b> <xsl:value-of select="$numprice -2" />$ </b> </h4> </xsl:if>
<xsl:variable name="numprice" select="number(substring(price,1,string-length(price)-1))" /> <xsl:choose> <xsl:when test="$numprice>=10"> <h4 > <span style='text-decoration:line-through;color:red'> <xsl:value-of select="price" /> </span> <b> <xsl:value-of select="$numprice -2" />$ </b> </h4> </xsl:when> <xsl:otherwise> <b> <xsl:value-of select="$numprice" />$ </b> </xsl:otherwise> </xsl:choose>
<xsl:template match="DateOfRelease"> <xsl:variable name="date" select="."/> <xsl:variable name="day" select="substring($date,1,2)"/> <xsl:variable name="month" select="number(substring($date,4,2))"/> <xsl:variable name="year" select="substring($date,7,4)"/> Release Date: <xsl:choose> <xsl:when test="$month = 1"> <xsl:value-of select="$day"/>,Jan/<xsl:value-of select="$year"/> </xsl:when> <xsl:when test="$month = 2"> <xsl:value-of select="$day"/>,Feb/<xsl:value-of select="$year"/> </xsl:when> <xsl:when test="$month = 3"> <xsl:value-of select="$day"/>,Mar/<xsl:value-of select="$year"/> </xsl:when> <xsl:when test="$month = 4"> <xsl:value-of select="$day"/>,Apr/<xsl:value-of select="$year"/> </xsl:when> <xsl:when test="$month = 5"> <xsl:value-of select="$day"/>,May/<xsl:value-of select="$year"/> </xsl:when> <xsl:when test="$month = 6"> <xsl:value-of select="$day"/>,Jun/<xsl:value-of select="$year"/> </xsl:when> <xsl:when test="$month = 7"> <xsl:value-of select="$day"/>,Jul/<xsl:value-of select="$year"/> </xsl:when> <xsl:when test="$month = 8"> <xsl:value-of select="$day"/>,Aug/<xsl:value-of select="$year"/> </xsl:when> <xsl:when test="$month = 9"> <xsl:value-of select="$day"/>,Sep/<xsl:value-of select="$year"/> </xsl:when> <xsl:when test="$month = 10"> <xsl:value-of select="$day"/>,Oct/<xsl:value-of select="$year"/> </xsl:when> <xsl:when test="$month = 11"> <xsl:value-of select="$day"/>,Nov/<xsl:value-of select="$year"/> </xsl:when> <xsl:otherwise> <xsl:value-of select="$day"/>,Dec/<xsl:value-of select="$year"/> </xsl:otherwise> </xsl:choose> </xsl:template>
<xsl:for-each select="Albums/Album"> <xsl:sort select="name"/> <div> <img src="{cover}" width="200px" height="200px"> <xsl:value-of select="cover" /> </img> <h3> <xsl:value-of select="name" /> </h3> <h4>POP</h4> <xsl:variable name="numprice" select="number(substring(price,1,string-length(price)-1))" /> <xsl:choose> <xsl:when test="$numprice>=10"> <h4 > <span style='text-decoration:line-through;color:red'> <xsl:value-of select="price" /> </span> <b> <xsl:value-of select="$numprice -2" />$ </b> </h4> </xsl:when> <xsl:otherwise> <h4 > <b> <xsl:value-of select="$numprice -2" />$ </b> </h4> </xsl:otherwise> </xsl:choose> <h4> <!-- محل صدا زدن قالب--> <xsl:apply-templates select="DateOfRelease"/> </h4> <h4> <xsl:value-of select="Description"/> </h4> <div> <a href="#">More</a> </div> </div> </xsl:for-each>
فیلترسازی
یکی از خصوصیات دیگری که فایل
XML داشت، فیلد ژانر موسیقی بود و قصد داریم با استفاده از فیلترسازی،
تنها سبک خاصی مثل سبک پاپ را نمایش دهیم و موسیقیهایی را که خارج از این سبک
هستند، از نتیجه حذف کنیم. به همین علت دستور for-each را به شکل زیر
تغییر میدهیم:
<xsl:for-each select="Albums/Album[contains(Genres/Genre, 'POP')]">
<xsl:for-each select="Albums/Album[not(contains(Genres/Genre, 'POP'))]">
<xsl:for-each select="Genres/Genre"> <xsl:value-of select="."/> <xsl:if test="position() != last()"> , </xsl:if> </xsl:for-each>
تبدیل xml و xsl در دات نت
string xmlfile = Application.StartupPath + "\\sampleXML.xml"; //بارگذاری فایل قوانین در حافظه XslTransform xslt = new XslTransform(); xslt.Load("sample-stylesheet.xsl"); //XPath ایجاد یک سند جدید بر اساس استاندارد XPathDocument xpath = new XPathDocument(xmlfile); //آماده سازی برای نوشتن فایل نهایی XmlTextWriter xwriter = new XmlTextWriter(xmlfile + ".html", Encoding.UTF8); //نوشتن فایل مقصد بر اساس قوانین مشخص شده xslt.Transform(xpath, null, xwriter, null); xwriter.Close();
XsltArgumentList xslArgs = new XsltArgumentList(); xslArgs.AddParam("logo", "", logo); xslArgs.AddParam("name", "", name); .... xslt.Transform(xpath, xslArgs, xwriter, null);
int[] fibonacci = {0, 1, 1, 2, 3, 5};
int[] fibonacci = { 0, 1, 1, 2, 3, 5 }; int numberOfElements = fibonacci.Count(); Console.WriteLine($"{numberOfElements}"); IEnumerable<int> distinictNumbers = fibonacci.Distinct(); Console.WriteLine("Elements in output sequence:"); foreach (var number in distinictNumbers) { Console.WriteLine(number); }
6 Elements in output sequence: 0 1 2 3 5
int[] fibonacci = { 0, 1, 1, 2, 3, 5 }; // ایجاد پرس و جو IEnumerable<int> numbersGreaterThanTwoQuery = fibonacci.Where(x => x > 2); // در این مرحله پرس و جو ایجاد شده ولی هنوز اجرا نشده است // تغییر عنصر اول توالی fibonacci[0] = 99; // حرکت بر روی عناصر توالی باعث اجرای پرس و جو میشود foreach (var number in numbersGreaterThanTwoQuery) { Console.WriteLine(number); }
99 3 5
int[] fibonacci = { 0, 1, 1, 2, 3, 5 }; // ساخت پرس و جو IEnumerable<int> numbersGreaterThanTwoQuery = fibonacci.Where(x => x > 2) .ToArray(); // در این مرحله به خاطر عملگر استفاده شده پرس و جو اجرا میشود // تغییر اولین عنصر توالی fibonacci[0] = 99; // حرکت بر روی نتیجه foreach (var number in numbersGreaterThanTwoQuery) { Console.WriteLine(number); }
3 5
clear | دکمهای جهت حذف محتوای کادر متنی است. مقدار پیش فرض آن true است. |
escape | برای
دفاع در برابر کدهای مخرب html به کار میرود و کاراکترهای مدنظر را در صورت
true بودن غیرفعال میکند. البته اگر از خاصیت display استفاده کنید این
گزینه تاثیرش را از دست خواهد داد. |
inputclass | یک کلاس css را به کادر متنی اعمال میکند. |
placeholder | مقدار داده شده را در صورتی که کادر متنی خالی باشد، نشان میدهد. |
tpl | به معنی یک قالب. شما میتوانید کد html تگ input خود را وارد کنید؛ ولی توصیه نمیشود. |
TextArea
همان خاصیتهای قبلی را دارد بعلاوه rows که نمایانگر مقدار ارتفاع آن است.
select
خاصیتهای escape,input,class و tpl را دارد بهعلاوه خاصیتهای زیر:
prepend | همانند گزینه پایینی است ولی قبل از آن دادههای خود را اضافه میکند. |
source | از
آنجا که یک لیست، لیستی از آیتمها را دارد و کاربر یکی از آنها را
انتخاب میکند، این بخش، منبع آیتمها را معرفی میکند. این خاصیت چهار نوع
داده میپذیرد: آرایه یا شیءایی از مقادیر. تابعی که بعد از انجام هر عملی،
اطلاعات به آن پاس میشوند و یا از نوع رشته که این رشته یک آدرس سمت سرور
است که با درخواست از آن آدرس، اطلاعات را دریافت میکند. |
sourceCache | اگه خاصیت بالا با آدرسی پر شده باشد که از سمت سرور بخواند، در دفعات بعدی مقدار دریافتی را از کش خواهد خواند. |
sourceError | یک پیام خطا هنگام بارگزاری اطلاعات |
sourceOptions | در
صورتیکه قصد اضافه کردن پارامتری را به درخواست ایجکسی دارید. یک شیء از پارامترها را به آن
نسبت میدهیم و برای رونویسی پارامترها از یک تابع استفاده میکنیم که نحوهی تغییرات را قبلا در جدول شماره یک دیدهاید. |
datepicker | پیکربندی تقویم را بر عهده دارد. برای اطلاعات بیشتر در مورد پیکربندی تقویم به این لینک مراجعه فرمایید.{ weekStart: 0, startView: 0, minViewMode: 0, autoclose: false } |
format | قالب بندی فرمت تاریخ جهت ارسال به سرور\ حالت پیش فرض yyyy-mm-dd مقادیری که میتوان به کار برد: yy yyyy mm m dd d |
viewformat | این فرمت هنگام نمایش به کار میآید و در صورتیکه مقدار عنصر در این قالب نباشد، آن را تبدیل میکند. |
datetime در بوت استراپ
کاملا مشترک با مورد قبلی.
dateUI
مختص JqueryUI است و کاملا مشترک با مورد قبلی.
combodate
موارد مشترک قبلی را دارد ولی به جای خاصیت datepicker از combodate استفاده میشود که پیکربندی آن در این لینک قرار دارد.
<link href="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet" type="text/css"></link> <script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/wysihtml5-0.3.0.min.js"></script> <script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min.js"></script>
<script src="js/inputs-ext/wysihtml5/wysihtml5.js"></script>
['text1', 'text2', 'text3' ...] //or [{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...]
<link href="select2/select2.css" rel="stylesheet" type="text/css"></link> <script src="select2/select2.js"></script>
<link href="select2-bootstrap.css" rel="stylesheet" type="text/css"></link>
نکته: در حال حاضر خاصیت autotext روی این المان جواب نمیدهد و میتوانید از خاصیت data-value به جای آن استفاده کنید.
<form> <div> <div><div></div><div></div></div> <div></div> </div> </form>
<button type="submit">ok</button> <button type="button">cancel</button>
<div></div>
$('#favsite').editable('option', 'disabled', false);
editable | ویرایشگر را بر اساس مقادیر اولیه روی عنصر مشخص شده فعال میکند. |
() activate | فوکوس را به input ویرایشگر باز میگرداند. |
() destory | حذف ویژگی ویرایش از روی عنصر |
() disable | غیرفعال کردن ویرایشگر |
() enable | فعال سازی آن |
()getvalue | باعث بازگردانی
مقدار جاری همه عناصر توسط شیء جفت کلید مقدار میشود و عناصری که شامل
متن یا مقداری نیستند، از آن حذف میشوند. در صورتیکه قصد دارید مقدار تنها
یک عنصر قابل دریافت باشد، با خاصیت isSingle آن را true کنید. $('#username, #fullname').editable('getValue'); //result: { username: "superuser", fullname: "John" } //isSingle = true $('#username').editable('getValue', true); //result "superuser" |
()hide | مخفی کردن تگ فرم ویرایشگر |
(option(key,value | تغییر خصوصیات یک عنصر که در بالا هم نمونه کد آن را دیدیم. |
(setvalue(value,convertStr | ست کردن مقدار جدید کنترل و پارامتر دوم وضعیت تبدیل این مقدار به فرمت داخلی است که برای آن تعریف شده است مثل date |
() show | نمایش ویرایشگر |
( submit(options | در
صورتی که خاصیت ارسال خودکار به سمت سرور را غیر فعال کرده باشید، با این
گزینه میتوانید همه اطلاعات و تغییرات را ارسال کنید. برای ایجاد فرم بر
اساس ویرایشگرها و ارسال اطلاعات با کلیک بر روی دکمه submit کاربرد دارد. یک مثال
در این زمینه . پارامترهای options به شرح زیر هستند: url data ajaxoptions (error(obj (success(obj,config از نسخه 1.5.1 میتوان این گزینه را به راحتی روی یک المان خاص هم صدا زد: $('#username').editable('submit') |
() toggle | کدی که صدا زده میشود بین دو وضعیت show و hide سوئیچ میکند. |
() toggleDisabled | تغییر وضعیت بین دو حالت enable و disable |
() validate | انجام اعتبارسنجی بر روی همه کنترل ها.$('#username, #fullname').editable('validate'); // possible result: { username: "username is required", fullname: "fullname should be minimum 3 letters length" } |
رویدادها
hidden | این
رویداد زمانی رخ میدهد که ویرایشگر دیگر قابل مشاهده نیست و شامل دو پارامتر
event و reason است. reason دلیل اینکه چرا ویرایشگر از دید خارج شده است
را با یکی از گزینههای زیر مشخص میکند. save cancel onblur nochange manual $('#username').on('hidden', function(e, reason) { if(reason === 'save' || reason === 'cancel') { //auto-open next editable $(this).closest('tr').next().find('.editable').editable('show'); } }); |
init | موقعی صدا زده میشود که متد editable روی عنصر صدا زده میشود و به یاد داشته باشید که این رویداد باید قبل از آن ست شده باشد.$('#username').on('init', function(e, editable) { alert('initialized ' + editable.options.name); }); $('#username').editable(); |
save | موقعی
که مقدار جدید، با موفقیت تایید میشود. دو پارامتر event و params را باز
میگرداند که params شامل دو خصوصیت newValue و response است که به ترتیب
مقدار جدید و اطلاعات برگشت داده شده از درخواست آژاکس است.$('#username').on('save', function(e, params) { alert('Saved value: ' + params.newValue); }); |
shown | موقعیکه ویرایشگر نمایش مییابد و فرم با موفقیت رندر شده است. برای اشیایی چون select باید صبر کنید تا مقادیر آنها بارگذاری شوند.$('#username').on('shown', function(e, editable) { editable.input.$input.val('overwriting value of input..'); }); |
div.k-treeview{ border-width: 0px; background: transparent none repeat scroll 0px center; overflow: auto; white-space: nowrap; }
overflow: auto;
.popover-title { text-align: right; }
import { decorate } from "mobx"; class Count { value = 0; } decorate(Count, { value: observable }); const count = new Count();
const text = observable({ value: "Hello world!", get uppercase() { return this.value.toUpperCase(); } });
> create-react-app state-management-with-mobx-part3 > cd state-management-with-mobx-part3 > npm start
> npm install --save mobx
<!DOCTYPE html> <html lang="en"> <head> <title>MobX Basics, part 3</title> <meta charset="UTF-8" /> <link href="src/styles.css" /> </head> <body> <main> <input id="text-input" /> <p id="text-display"></p> <p id="text-display-uppercase"></p> </main> <script src="src/index.js"></script> </body> </html>
import { autorun, computed, observable } from "mobx"; const input = document.getElementById("text-input"); const textDisplay = document.getElementById("text-display"); const loudDisplay = document.getElementById("text-display-uppercase"); class Text { @observable value = "Hello World"; @computed get uppercase() { return this.value.toUpperCase(); } } const text = new Text(); input.addEventListener("keyup", event => { text.value = event.target.value; }); autorun(() => { input.value = text.value; textDisplay.textContent = text.value; loudDisplay.textContent = text.uppercase; });
./src/index.js SyntaxError: \src\index.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (8:3): 6 | 7 | class Text { > 8 | @observable value = "Hello World"; | ^ 9 | @computed get uppercase() { 10 | return this.value.toUpperCase(); 11 | }
import { observable, computed, action } from "mobx"; class Timer { @observable start = Date.now(); @observable current = Date.now(); @computed get elapsedTime() { return this.current - this.start + "milliseconds"; } @action tick() { this.current = Date.now(); } }
import { observable, computed, action, decorate } from "mobx"; class Timer { start = Date.now(); current = Date.now(); get elapsedTime() { return this.current - this.start + "milliseconds"; } tick() { this.current = Date.now(); } } decorate(Timer, { start: observable, current: observable, elapsedTime: computed, tick: action });
const Counter = observer(({ count }) => { return ( // ... ); });
> create-react-app my-proj1 --typescript
{ "compilerOptions": { // ... "experimentalDecorators": true } }
> npm i --save-dev customize-cra react-app-rewired
const { override, addDecoratorsLegacy, disableEsLint } = require("customize-cra"); module.exports = override( // enable legacy decorators babel plugin addDecoratorsLegacy(), // disable eslint in webpack disableEsLint() );
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" },
{ "extends": "react-app", "parserOptions": { "ecmaFeatures": { "legacyDecorators": true } } }
{ "env": { "node": true, "commonjs": true, "browser": true, "es6": true, "mocha": true }, "settings": { "react": { "version": "detect" } }, "parserOptions": { "ecmaFeatures": { "jsx": true, "legacyDecorators": true }, "ecmaVersion": 2018, "sourceType": "module" }, "plugins": [ "babel", "react", "react-hooks", "react-redux", "no-async-without-await", "css-modules", "filenames", "simple-import-sort" ], "rules": { "no-const-assign": "warn", "no-this-before-super": "warn", "constructor-super": "warn", "strict": [ "error", "safe" ], "no-debugger": "error", "brace-style": [ "error", "1tbs", { "allowSingleLine": true } ], "no-trailing-spaces": "error", "keyword-spacing": "error", "space-before-function-paren": [ "error", "never" ], "spaced-comment": [ "error", "always" ], "vars-on-top": "error", "no-undef": "error", "no-undefined": "warn", "comma-dangle": [ "error", "never" ], "quotes": [ "error", "double" ], "semi": [ "error", "always" ], "guard-for-in": "error", "no-eval": "error", "no-with": "error", "valid-typeof": "error", "no-unused-vars": "error", "no-continue": "warn", "no-extra-semi": "warn", "no-unreachable": "warn", "no-unused-expressions": "warn", "max-len": [ "warn", 80, 4 ], "react/prefer-es6-class": "warn", "react/jsx-boolean-value": "warn", "react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn", "react/prop-types": "off", "react-redux/mapDispatchToProps-returns-object": "off", "react-redux/prefer-separate-component-file": "off", "no-async-without-await/no-async-without-await": "warn", "css-modules/no-undef-class": "off", "filenames/match-regex": [ "off", "^[a-zA-Z]+\\.*\\b(typescript|module|locale|validate|test|action|api|reducer|saga)?\\b$", true ], "filenames/match-exported": "off", "filenames/no-index": "off", "simple-import-sort/sort": "error" }, "extends": [ "react-app", "eslint:recommended", "plugin:react/recommended", "plugin:react-redux/recommended", "plugin:css-modules/recommended" ], "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly", "process": true } }
>npm i --save-dev eslint babel-eslint eslint-config-react-app eslint-loader eslint-plugin-babel eslint-plugin-react eslint-plugin-css-modules eslint-plugin-filenames eslint-plugin-flowtype eslint-plugin-import eslint-plugin-no-async-without-await eslint-plugin-react-hooks eslint-plugin-react-redux eslint-plugin-redux-saga eslint-plugin-simple-import-sort eslint-loader typescript
const { override, addDecoratorsLegacy, useEslintRc } = require("customize-cra"); module.exports = override( addDecoratorsLegacy(), useEslintRc(".eslintrc.json") );
Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)
{ "compilerOptions": { "experimentalDecorators": true, "allowJs": true } }
تا به اینجا مثالهایی که زدهایم تاثیر کامپوننتهای React را بر روی UI، نشان دادند. در این بخش به رویدادهای سمت UI و ورودیهای کاربر میپردازیم.
React روش مدیریت رویدادهای خودش را دارد و به آنها رویدادهای Synthetic یا ترکیبی گفته میشود. در زیر مقایسهای داریم از رویدادهای معمول در JavaScript و رویدادهای React و تفاوتها را بررسی میکنیم.
<!-- HTML Buttons --> <button type="button" onclick="console.log('Button Clicked')">Click Me</button> // React Buttons <button type="button" onClick={console.log("Button Clicked")}>Click Me</button>
رفتار رویدادهای React در مرورگرهای مختلف یکسان است. برای مثال رویداد onChange هر تغییری را برای هر نوع تگ ورودی اعمال میکند. هر کلیدی که در یک input یا textarea زده شود، اگر یک check box را انتخاب یا از انتخاب خارج کنیم و یا اگر موردی را از یک drop-down انتخاب کنیم، React رویداد onChange را اجرا میکند. React اکثر رویدادهای مرسوم را پوشش میدهد و همچنین رویدادهایی را برای کار با کلیپبرد، رسانههای مختلف و تصاویر دارد. برای اطلاعات بیشتر به مستندات آن رجوع کنید.
وقتی با کتابخانه React کار میکنیم، همه چیز مجازی اتفاق میافتد؛ مانند ساخت تگ و نمایش آنها، همچنین مدیریت تگها و رویدادها. اما به این معنا نیست که ارتباط React با HTML DOM در مرورگر قطع است. اگر لازم باشد به HTML DOM در کامپوننتها دسترسی داشته باشیم میتوانیم از خاصیت ref در React استفاده کنیم. برای مثال فرض کنید یک ورودی را برای ایمیل بهصورت <input type="email" /> تعریف کردهایم. میخواهیم پیش از ذخیره بدانیم آیا داده وارد شده به فرمت ایمیل هست یا نه.
const EmailForm = React.createClass({ clickHandler() { if (this.inputEmail.checkValidity()) console.log("Email is OK to save it."); else console.log("Email is not in right format."); }, render() { return ( <div> <input type="email" ref={inputEmail => this.inputEmail = inputEmail} /> <button type="submit" onClick={this.clickHandler}>Save</button> </div> ) }
در مثال بالا clickHandler وظیفه مدیریت رویداد کلیک دکمه را به عهده دارد. در ادامه، وقتی از خاصیت ref در تگ input استفاده میکنیم و مقدار آن را یک تابع قرار میدهیم، React این تابع را زمانیکه کامپوننت به طور کامل در HTML DOM ساخته شد، اجرا میکند. React همچنین ارجاعی را به عنوان پارامتر این تابع به DOM همراه با تابع ارسال میکند (inputEmail). داخل تابع ref میتوانیم به نمونه ساخته شده از کامپوننت در DOM دسترسی داشته باشیم. inputEmail که به صورت ارجاع به تابع فرستاده شده، تگ ساخته شده input را برمیگرداند، در نتیجه میتوانیم در کامپوننت به آن دسترسی داشته باشیم.
اگر از کامپوننتهای Sateful که دارای وضعیت هستند استفاده میکنیم، میتوانیم وضعیت کامپوننت را بر اساس ورودیهای کاربر تغییر دهیم. مثال بالا را به این شکل تغییر میدهیم که در ابتدا وضعیت کامپوننت، یک ایمیل پیشفرض باشد و اگر کاربر آدرس متفاوتی را وارد کرد، آدرس جدید به عنوان وضعیت جدید کامپوننت در نظر گرفته شود.
const EmailForm = React.createClass({ getInitialState() { return { currentEmail: this.props.currentEmail } }, setCurrentEmailState(se) { this.setState({ currentEmail: se.target.value }); }, clickHandler() { if (this.inputEmail.checkValidity()) console.log("Email is OK to save it."); else console.log("Email is not in right format."); }, render() { return ( <div> <input type="email" ref={inputEmail => this.inputEmail = inputEmail} value={this.state.currentEmail} onChange={this.setCurrentEmailState} /> <button type="submit" onClick={this.clickHandler}>Save</button> </div> ) } })
در خط 20 از مثال بالا با قرار دادن مقدار value برابر با ایمیل جاری (وضعیت کامپوننت)، کاربر آدرس پیشفرض را در input میبیند، اما هیچ تغییری را نمیتواند در آن ایجاد کند و input عملا تبدیل به یک تگ فقط خواندنی میشود. علت این است که React دو وضعیت را ایجاد کرده، یکی در حافظه به عنوان وضعیت پیشفرض و دیگری وضعیتی که در DOM ساخته. وقتی در سطح DOM تغییری را ایجاد میکنیم، React به صورت خودکار متوجه آن نمیشود و ما باید با روشی React را در جریان این تغییرات قرار دهیم! برای این کار رویداد onChange را برای تگی که قرار است تغییر کند پیادهسازی میکنیم. در مثال بالا متد setCurrentEmailState و رویداد onChange برای همین منظور به کار گرفته شدهاند.
در قسمت بعد که آخرین قسمت است، به مسئله چرخه زندگی (Lifecycle) کامپوننتهای React میپردازیم.
let sum = 0; let numbers = [1,2,3,4];
// for loop sum = 0; for(let i =0; i < numbers.length; i++){ sum += numbers[i]; } //sum = 10
// for in sum = 0; for(let i in numbers) { sum += numbers[i]; } //sum = 10
// iterator sum = 0; let iterator = number.values(); let next = iterator.next(); while(!next.done){ sum += next.value; next = iterator.next(); } //sum = 10
var person = { first: "Vahid", last "N" }; for(let i in person) { console.log(person[i]); }
let numbers = [1,2,3,4]; for(let i of numbers) { console.log(i); }
let sum = 0; let numbers = [1,2,3,4]; for(let n of numbers){ sum += n; }
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All -Verbose Enable-WindowsOptionalFeature -Online -FeatureName Containers -All -Verbose bcdedit /set hypervisorlaunchtype Auto
C:\Users\Vahid>docker info Containers: 0 Running: 0 Paused: 0 Stopped: 0 Images: 0 Server Version: 18.06.1-ce OSType: windows
E:\>coreinfo -v AuthenticAMD Microcode signature: 00000000 HYPERVISOR - Hypervisor is present SVM * Supports AMD hardware-assisted virtualization NP - Supports AMD nested page tables (SLAT)
Hypervisor launch failed; Second Level Address Translation is required to launch the hypervisor.
docker run hello-world
docker run -p 4000:4000 -it --name docs docs/docker.github.io
docker run -p 81:80 -d --name iis microsoft/iis:nanoserver
docker run microsoft/windowsservercore
npm install -g angular-cli
ng new AngularCLIDemoApp