├── src ├── hello-world │ ├── blank-project.png │ ├── build-project.png │ ├── chrome-output.png │ ├── name-project.png │ ├── output-files.png │ ├── creating-mainkt.png │ ├── create-new-project.png │ ├── target-kotlin-javascript.png │ └── README.md ├── working-with-the-dom-part1 │ ├── output1.png │ ├── output2.png │ ├── output3.png │ ├── output4.png │ ├── output5.png │ ├── output6.png │ ├── output7.png │ ├── output8.png │ ├── output9.png │ └── README.md ├── working-with-the-dom-part3 │ ├── IDE-workspace.png │ ├── add-as-library.png │ ├── lib-contains.png │ ├── bitnary-download.png │ ├── dl-bitnary-link.png │ ├── kotlinx-download.png │ ├── link-of-others-kotlinx-version.png │ ├── choose-categories-of-selected-files.png │ └── README.md ├── README.md ├── javascript-introp │ └── README.md └── working-with-the-dom-part2 │ └── README.md ├── LICENSE └── README.md /src/hello-world/blank-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/hello-world/blank-project.png -------------------------------------------------------------------------------- /src/hello-world/build-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/hello-world/build-project.png -------------------------------------------------------------------------------- /src/hello-world/chrome-output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/hello-world/chrome-output.png -------------------------------------------------------------------------------- /src/hello-world/name-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/hello-world/name-project.png -------------------------------------------------------------------------------- /src/hello-world/output-files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/hello-world/output-files.png -------------------------------------------------------------------------------- /src/hello-world/creating-mainkt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/hello-world/creating-mainkt.png -------------------------------------------------------------------------------- /src/hello-world/create-new-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/hello-world/create-new-project.png -------------------------------------------------------------------------------- /src/hello-world/target-kotlin-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/hello-world/target-kotlin-javascript.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part1/output1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part1/output1.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part1/output2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part1/output2.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part1/output3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part1/output3.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part1/output4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part1/output4.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part1/output5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part1/output5.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part1/output6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part1/output6.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part1/output7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part1/output7.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part1/output8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part1/output8.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part1/output9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part1/output9.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part3/IDE-workspace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part3/IDE-workspace.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part3/add-as-library.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part3/add-as-library.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part3/lib-contains.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part3/lib-contains.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part3/bitnary-download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part3/bitnary-download.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part3/dl-bitnary-link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part3/dl-bitnary-link.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part3/kotlinx-download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part3/kotlinx-download.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part3/link-of-others-kotlinx-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part3/link-of-others-kotlinx-version.png -------------------------------------------------------------------------------- /src/working-with-the-dom-part3/choose-categories-of-selected-files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KotlinFarsi/OpenSourceTutorials-Browser/HEAD/src/working-with-the-dom-part3/choose-categories-of-selected-files.png -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # فهرست 4 | 5 | **1 - مقدمه** 6 | 7 | [1.1 ) یک Hello World ساده](./hello-world/README.md) 8 | 9 | **2 - مبانی کاتلین/JS** 10 | 11 | [2.1 ) کار با DOM - بخش اول](./working-with-the-dom-part1/README.md) 12 | 13 | [2.2 ) کار با DOM - بخش دوم](./working-with-the-dom-part2/README.md) 14 | 15 | [2.3 ) کار با DOM - بخش سوم](./working-with-the-dom-part1/README.md) 16 | 17 | **2 - همکاری با JS** 18 | 19 | [2.1 ) همکاری با JS](./javascript-introp/README.md) 20 | -------------------------------------------------------------------------------- /src/javascript-introp/README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # همکاری با JavaScript 4 | 5 | یکی از ویژگی­های کاتلین همکاری مستقیم با فایل JavaScript هه.حالا ما چرا باید بخوایم که با جاوا اسکریپت همکاری کنیم؟ زمانی پیش­خواهد اومد که ما بخوایم به صورت مستقیم با فایل­های جاوا اسکریپتیمون ارتباط برقرار کنیم، بخوایم مقدار متغیری رو بخونیم، بخوایم یک تابعی رو ازش صدا بزنیم یا این که اصلا بخوایم با یک کتابخونه که توی جاوااسکریپته استفاده کنیم. توی اینجاها خیلی مهمه که بتونیم مستقیم از فایل­های جاوااسکریپتیمون استفاده کنیم 6 | 7 | توی این قسمت می­خواییم یکسری اشاره­هایی به بحث همکاری با جاوا اسکریپت بکنیم. 8 | 9 |
10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Kotlin Farsi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/working-with-the-dom-part2/README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # کار با DOM - بخش دوم 4 | 5 | این قسمت کوتاهه و مثل قسمت قبل طولانی نیست. توی این قسمت میخوایم همین کد قبلی رو بنویسیم منتهی به یک روش دیگه. کد زیر رو نگاه کنین: 6 | 7 |
8 | 9 | ```kotlin 10 | fun main(args: Array) { 11 | println("Hello, World!") 12 | 13 | val root = document.getElementById("root") 14 | 15 | val div = document.createElement("div") 16 | val h1 = document.createElement("h1") 17 | val btn = document.createElement("button") 18 | 19 | h1.textContent = "KotlinFarsi" 20 | btn.textContent = "Click on Me" 21 | btn.addEventListener("click", { println("Clicked 2") }) 22 | 23 | div.appendChild(h1) 24 | div.appendChild(btn) 25 | 26 | root?.appendChild(div) 27 | 28 | println("The end") 29 | } 30 | ``` 31 | 32 |
33 | 34 | 35 | فکر نمیکنم نیاز زیادی به توضیح باشه، ولی اینجا همون کاری که دفعه قبل انجام دادیم رو به یک روش دیگه انجام میدیم. با استفاده مستقیم از خصیصه textContent مستقیما مقدار text رو بهش دادیم و بعدش هم با استفاده از تابع appendChild دوتا عنصر رو به div دادیم و در انتها هم اون div رو به root دادیم. همین. 36 | 37 | خب تا اینجا با دو روش آشنا شدیم که چجوری بتونیم از html داخل کدمون استفاده کنیم. توی قسمت بعد روش سومی رو میگم که از روش های قبلی باحال­تر و استفاده ازش توی ide راحت تره. 38 | 39 |
40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # OpenSourceTutorials-Browser 2 | 3 | [![Join the chat at https://gitter.im/KotlinFarsi/OpenSourceTutorials-Browser](https://badges.gitter.im/KotlinFarsi/OpenSourceTutorials-Browser.svg)](https://gitter.im/KotlinFarsi/OpenSourceTutorials-Browser?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | 5 | 6 | Pages of [Kotlin/JS Programming](https://kotlinfarsi.com/courses/) tutorial [In Progress] 7 | 8 | As we know kotlin covers Browser support, and this means that you can do your backend or frontend just with the help of kotlin, and it's not a joke, you realy can do that, even there are a lot of front-end and back-end framework to do that and in this course we will cover some of them for just a little to prove that we can do a lot with kotlin. 9 | 10 | 11 | 12 | Full course of this tutorial and another kotlin tutorials are accessible for free in KotlinFarsi.com website 13 | 14 | ## How to contribute on OpenSourceTutorials 15 | 16 | - install [git](https://git-scm.com/downloads) on your system 17 | - make a clone from this repo 18 | - make your changes 19 | - make a pull request and we will consider and accept your pull request 20 | 21 | ## How to be an Writer on KotlinFarsi 22 | 23 | for being a writer or a teacher in KotlinFarsi website you should first send us your resume to this link and then we will review and accept your memebrship. 24 | -------------------------------------------------------------------------------- /src/hello-world/README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # یک Hello World ساده 4 | 5 | امروز میخوام بهتون یادبدم چطور برنامه­های JavaScript ای با استفاده از زبون کاتلین بنویسین. همینطور که میدونید و شاید جاهای زیادی خونده باشین، کاتلین یکی از هدف­هاش ساختن اپ­های سمت سرور و هم سمت کلاینت با JavaScript هه. حالا بیشتر درمورد ویژگی­ها و توانایی­هاش توی این زمینه صحبت میکنیم ولی امروز میخوایم این دوره رو با ساختن یک برنامه Hello World ساده شروع کنیم. 6 | 7 | اولین کاری که باید انجام بدین اینه که IntelliJ IDEA رو بالا بیارین و روی دکمه Create New Project کلیک کنین. 8 | 9 | 10 | 11 | 12 | 13 | و بعدش از داخل صفحه­ای که ظاهر میشه Kotlin(JavaScript) رو به عنوان تارگت انتخاب کنین و برروی دکمه Next کلیک کنین. یادتون باشه که فعلا نمیخوایم از هیچگونه بیلدری غیر از بیلدر خود IntelliJ استفاده کنیم. بعدا توی دورمون به بیلد­هایی مثل gradle و یا maven اشاره میکنیم. 14 | 15 | 16 | 17 | 18 | 19 | برای شروع اسم پروژه رو KotlinJSHelloWorld میذاریم و بعدش Next رو فشار میدیم. 20 | 21 | 22 | 23 | 24 | 25 | و حالا بعد از چندتا پردازش محیط توسعه برامون ظاهر میشه و میتونیم کدهامون رو توش بزنیم. 26 | 27 | 28 | 29 | 30 | 31 | خب حالا باید یک پکیج داخل فولدر src درست کنیم و فایل `Main.kt` رو داخلش قرار بدیم. 32 | 33 | 34 | 35 | 36 | 37 | خب تا اینجا پروژمون آماده شد. بریم سراغ اصل قضیه یعنی کدنویسی. کد زیر رو توی فایل 38 | 39 | `Main.kt` میزنیم: 40 | 41 |
42 | 43 | ```kotlin 44 | fun main() { 45 | println("Hello, World!") 46 | } 47 | ``` 48 | 49 |
50 | 51 | یادتون باشه، توی این دوره نمیخوایم با سینتکس کاتلین آشنا بشیم و فرض میکنیم حداقل دوره Intruction to Kotlin رو گذروندین، ولی هر از چندگاهی یک اشاره هایی به سینتکس میکنیم که اگر فراموش کرده بودین یک یادآوری براتون بشه. بالا هم تنها کاری که کردیم ساختن یک main و چاپ کردن `Hello, World` بود.در حقیقت این متن توی کنسول جاوا اسکریپت ران میشه. 52 | 53 | خب حالا باید این فایل رو بیلد کنیم. از توی قسمت 54 | 55 | build توی نوار ابزار بالا، دکمه build Project رو پیدا کنین و فشارش بدین. 56 | 57 | 58 | 59 | و حالا اگه دقت کنین متوجه میشین که توی قسمت Project، سمت راست، یه فولدر جدید ایجاد شده که اگه اونو باز کنین متوجه میشین که خروجی هامون اونجا ریخته میشه! 60 | 61 | 62 | 63 | همینطور میتونین همونجا فایل `KotlinJSHelloWorld.js` رو هم ببینین، که خروجی جاوا اسکریپت ماهستش. بالای اون دوتا فولدر میبینین. بعدا به محتویات فولدر اول اشاره میکنیم ولی فعلا قسمت مهمی که نیاز به بررسی داره فولدر lib هستش. اگه اونو باز کنین متوجه میشین که یک فایل `kotlin.js` داخلش هست که درحقیقت کتابخونه استاندارد کاتلین مورد نیاز برای اجرای برنامه های جاوا اسکرپیتیمونه. علاوه بر اون یک سری فایل­ها میبینین که اخرش `*.meta.js` داره. درحقیقت ما فعلا نیازی به استفاده از این فایل ها نداریم، ولی در این حد بدونین که زمانی که مثلا میخواین از اون فایل .js به عنوان یک کتابخونه استفاده کنین، توسط کامپایلر مورد استفاده قرار میگیره. 64 | 65 | حالا بیاین برگردیم به محیط توسعه­امون و از این فایل خروجیمون استفاده کنیم. برای نشون دادن خروجی ما از یک فایل html استفاده میکنیم. برای همین ما توی مسیر root یک فایل html درست میکنیم و کدهای زیر رو داخلش میزنیم. 66 | 67 |
68 | 69 | ```html 70 | 71 | 72 | 73 | 74 | Kotlin JS Hello World 75 | 76 | 77 | 78 | 79 | 80 | 81 | ``` 82 | 83 |
84 | 85 | دو خط script که نوشتیم یکی فایل کتابخونه استاندارد رو به عنوان منبع قرار میده و دیگری هم اون فایل `.js` که درست کردیم رو. برای دیدن این فایل کافیه یکی از مرورگرها رو بالا بیاریم و به قسمت developers Tools بریم و در قسمت console نیجه خروجی رو ببینیم. 86 | 87 | 88 | 89 | 90 | 91 | توی قسمت بعدی میبینیم که چطور میتونیم در کاتلین با DOM کار کنیم. 92 | 93 |
94 | -------------------------------------------------------------------------------- /src/working-with-the-dom-part3/README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # کار با DOM - بخش سوم 4 | 5 | توی این قسمت میخوایم از روش دیگه ­ای برای ارتباط با `DOM` استفاده کنیم که استفاده ازش میتونه راحت­تر باشه. برای این کار میخوایم از یک کتابخونه که شرکت JetBrains درست کرده استفاده کنیم. اسم اون کتابخونه هم `kotlinx.html­`هه. 6 | 7 | لینک github این کتابخونه : [Kotlinx.html](https://github.com/Kotlin/kotlinx.html) 8 | 9 | خب ما الان از هیچ سیستم مدیریت بیلدی استفاده نمیکنیم، و مستقیما با استفاده از خود IDE بیلد میکنیم. پس نیاز داریم که فایل *.jar کتابخونه رو دانلود کنیم و توی پروژمون قرار بدیم.(روش ارائه شده ممکن درطول زمان تغییر کنه، اگه با مشکلی مواجه شدین مطلعمون کنین) 10 | 11 | برای دانلود فایل *.jar وارد صفحه github این کتابخونه میشیم و روی گزینه دانلود کلیک میکنیم. 12 | 13 | 14 | 15 | روی گزینه دانلود کلیک میکنیم و به یک صفحه دیگه منتقل میشیم. 16 | 17 | 18 | 19 | اگه بالا سمت راست دقت کنین متوجه یک لینک میشین، لینکی که در اصل با اون به صفحه بعد منتقل بشین. 20 | 21 | 22 | 23 | بعد از این کافیه به مقصدی که توی شکل زیر میبینین برسین: 24 | 25 | 26 | 27 | الان کافیه اخرین نسخه­ی موجود رو انتخاب کنین و بعدش توی صفحه­ای که ظاهر میشه فایل `kotlinx-html-js-.jar` رو انتخاب کنین، به عنوان مثال الان درحال حاظر که دارم این مقاله رو مینویسم اخرین نسخه 0.6.3 هه پس فایل `kotlinx-html-js-0.6.3.jar` رو انتخاب و دانلود می­کنم. 28 | 29 | بعد از این که فایل رو دانلود کردیم. باید این فایل رو به عنوان یک کتابخونه به IDE معرفی کنیم. برای این کار باید یک فولدر توی مسیر `root` پروژه درست کنیم و فایل `jar.` رو داخلش بریزیم. 30 | 31 | 32 | 33 | 34 | همینطور که میبینین یک فولدر باز کردیم به اسم `libs` و داخلش فایل کتابخونمون رو قرار دادیم.حالا کافیه اون فایلر رو به عنوان یک کتابخونه معرفی کنیم.برای این کار روی اون فایل کلیک راست کرده و گزینه add as library رو انتخاب میکنیم. 35 | 36 | 37 | 38 | بعد از این که این گزینه رو انتخاب میکنیم، صفحه­ای ظاهر میشه به شکل زیر: 39 | 40 | 41 | 42 | که باید بگیم این فایل jar حاوی چه چیزهاییه و ما با انتخاب classes میگیم که این فایل حاوی یک سری کلاسه و بعدش هم ok و دوباره ok و تمام. 43 | 44 | و حالا اگه دقت کنیم توی قسمت Project شما میتونین فایل `*.jar` رو به صورت زیر ببینین. 45 | 46 | 47 | 48 | خب تا اینجا پروژه رو اضافه کردیم، حالا نوبت نوشتن کد توی فایل `Main.kt` فقط قبل از این که ادامه بدیم، بذارین فایل `index.html` رو نشون بدم تا مطمئن شیم همه چی درسته 49 | 50 |
51 | 52 | ```html 53 | 54 | 55 | 56 | 57 | Working With Kotlinx 58 | 59 | 60 |
61 | 62 | 63 | 64 | 65 | 66 | ``` 67 | 68 |
69 | 70 | خط اول و دوم و سوم داخل `body` که تکراریه، اولی یک divهه که بهش ای دی `root` رو دادیم، دومی ادرس فایل `*.js` تولیدی از `Main­` امونه و سومی هم فایل کتابخونه استاندارد کاتلینه. ولی خط چهارم چیه؟ درواقع خط چهارم هم فایل بیلد شده از کتابخونه­ایه که به پروژه اضافه کردیم و یادتون باشه که به این فایل برای اجرای برنامه­مون احتیاج داریم. 71 | 72 | بریم سراغ `main` و شروع کنیم به کدزنی. میخوایم یک صفحه درست کنیم که توش یک نوشته داشته باشه و یک دکمه که وقتی روش کلیک میشه عملی رو انجام بده.کد زیر رو نگاه کنین: 73 | 74 |
75 | 76 | ```kotlin 77 | fun main(args: Array) { 78 | val root = document.getElementById("root") 79 | 80 | val div = document.create.div{ 81 | h1 { 82 | + "Hello KotlinFarsi" 83 | } 84 | button { 85 | + "Click Me" 86 | onClickFunction = { 87 | println("Clicked Again") 88 | } 89 | } 90 | } 91 | 92 | root?.appendChild(div) 93 | } 94 | ``` 95 | 96 |
97 | 98 | خط دوم خط آشناییه. در واقع داریم دنبال عنصری به `id` ی `root` میگردیم.خط چهارم داریم یک عنصر `div` میسازیم که داخلش حاوی یک `h1` و یک `button`هه.اگه دوره مقدماتی کاتلین رو گذرونده باشین متوجه هستین که این عنصرها تنها یکسری توابع هستن. و هرچی داخلش مینویسم تنها توابع لاندایی هستن که به اون تابع پاس داده میشن یعنی `h1` و `button` تنها یکسری توابع لاندایی هستن که به `div` پاس داده میشه. زمانی که داریم یک تکست رو به یک تابع پاس میده از تابع `plus` استفاده میکنیم که اینجا میتونین به صورت `+` ببینینش. و در انتها هم یک تابع به نام `onClickFunction` داریم که بهش یک تابع چاپ توی کنسول میدیم. این روشیه که ما رو قادر میکنه با `DOM` کارکنیم. 99 | 100 | درواقع این چیزی که اینجا استفاده کردیم `DSL` صدا زده میشه که مخفف `Domain Spcefic Language`هه.و در واقع این `DSL` ها داخل یک زبون استفاده میشنو انگار که داریم از یک زبون متفاوتی استفاده میکنیم. ولی واقعیت اینه که ما تنها یکسری تابع رو صدا میزنیم و یک ساختارهای متفاوت ندارن. 101 | 102 |
103 | -------------------------------------------------------------------------------- /src/working-with-the-dom-part1/README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # کار با DOM - بخش اول 4 | 5 | امروز بهتون یادمیدم که چطور بتونین با `DOM` از داخل برنامه جاوااسکریپتتون کارکنین. 6 | 7 | اگه یادتون باشه یک برانامه نوشتیم که کنسول رو صدا میزد و `Hello, World` رو داخلش چاپ میکرد و همینطور یک فایل `index.html` ساختیم که بتونیم نتیجه رو نمایش بدیم. خب حالا به قسمتی رسیدیم که میخوایم با `DOM` ارتباط برقرار کنیم. قبل از این که داخل `Main.kt` کدی بزنیم لازمه که یک سری تغییرات توی فایل `index.html` بدیم: 8 | 9 |
10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | Working With DOM 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | ``` 26 | 27 |
28 | 29 | خب کاری که کردیم درواقع تنها اضافه کردن یک `div` به فایل html­ امون بود که بتونیم از طریق کد جاوا اسکریپتمون باهاش ارتباط برقرار کنیم. 30 | 31 | حالا میتونیم از طریق کد کاتلین باهاش ارتباط برقرار کنیم. برگردیم به `Main.kt` و کد زیر رو اضافه کنیم: 32 | 33 |
34 | 35 | ```kotlin 36 | document.getElementById("root") 37 | ``` 38 | 39 |
40 | 41 | 42 | درواقع کدی که زدیم میاد عنصری که با ای دی `root` وجود داره رو صدا میزنه که بعدا میتونیم ازش استفاده کنیم. 43 | 44 | ولی یه سوال.... اینجا داریم با پاس دادن یه رشته یک عنصر رو صدا میزنیم.اگه اشتباه تایپی داشته باشیم و یا اصا به هر دلیلی یک عنصر `null` رو صدا بزنیم چه اتفاقی میفته. 45 | 46 | درواقع موقع صدازندش اتفاقی نمیفته، وقع استفاده کردنش منجر به بروز اتفاق میشه.مثلا کد زیر رو نگاه کنین: 47 | 48 | 49 |
50 | 51 | ```kotlin 52 | val root = document.getElementById("root1") 53 | root.innerHTML = "

Hello, World again!

" 54 | ``` 55 | 56 |
57 | 58 | توی کاتلین اگه همچین کدی رو بنویسین، کامپایلر توی خط دوم بهتون ارور میده! دلیلش هم اینه کا کاتلین امنه! کاتلین(اگه درست ازش استفاده کنین) امنه! اجازه نمیده از عنصری که ممکنه `null` باشه استفاده کنین. برای حل این مشکل چندین راه حل دارین. اولیش اینه که از روش قدیمی استفاده کنیم، یعنی : 59 | 60 |
61 | 62 | ```kotlin 63 | fun main(args: Array) { 64 | println("Hello, World!") 65 | 66 | val root = document.getElementById("root") 67 | if (root != null) { 68 | root.innerHTML = "

Hello, World again!

" 69 | } 70 | 71 | println("The end") 72 | } 73 | ``` 74 |
75 | 76 | الان اگه این کد رو بیلد کنین، نتیجه رو توی مرورگر اینجوری میبینین: 77 | 78 | 79 | 80 | اگه root به root1 تغییر کنه، یعنی مثلا کد زیر: 81 | 82 |
83 | 84 | ```kotlin 85 | val root = document.getElementById("root1") 86 | ``` 87 | 88 |
89 | 90 | نتیجه اینجوری ظاهر میشه: 91 | 92 | 93 | 94 | همینطور که میبینین چون عنصری رو صدا زدیم که `null` بود مقدارش چاپ نشد. ولی این خوبه اگه یادمون باشه که قبلش `null` رو چک کنیم و دقیقا زمان هایی به وجود میاد که یادمون میره همچین کاری انجام بدیم. 95 | 96 | راه حل دیگه استفاده از عملگر `!!` هه. درواقع این عملگر درکاتلین اومده که تنها ارور در زمان کامپایلرو از بین ببره و در واقع توسعه دهنده با صدازدن همچین عملگری به کامپایلر میگه: " تو کاریت نباشه، من میدونم چیکار دارم میکنم". بیاین ازش استفاده کنیم و نتیجه هارو ببینیم : 97 | 98 |
99 | 100 | 101 | ```kotlin 102 | fun main(args: Array) { 103 | println("Hello, World!") 104 | 105 | val root = document.getElementById("root") 106 | root!!.innerHTML = "

Hello, World again!

" 107 | 108 | println("The end") 109 | } 110 | ``` 111 | 112 |
113 | 114 | و نتیجه : 115 | 116 | 117 | 118 | همینطور که میبینین وقتی عنصر درستی رو صدا بزنیم، برنامه درست کار میکنه. ولی وقتی root1 رو صدا بزنیم: 119 | 120 | 121 | 122 | متوجه میشیم که به `NullPointerException` میخوریم و متاسفانه این مسئله خیلی از موقع ها پیش میاد و باعث بروز مشکل در سیستم میشه. به همین خاطر به این ارور ها، ارورهای میلیون دلاری هم گفته میشه. 123 | 124 | ولی راه حل درستی که کاتلین پیشنهاد میکنه استفاده از عملگر `?` هه . کد زیر رو نگاه کنین: 125 | 126 | 127 | 128 | 129 | 130 | در واقع وقتی کامپایلر به اون نقطه میرسه نگاه میکنه، اگه عنصری که داره ازش استفاده میشه `null` نبود، عمل لازم رو روش انجام میده، ولی اگر `null` بود از روی اون خط رد میشه. 131 | 132 | خب معلومه که اگه این کد رو اجرا کنیم نتیجه درست و دلخواهمون رو میگیریم.بذارین با `root1` اجرا کنیم و نتیجه رو ببینیم: 133 | 134 | 135 | 136 | 137 | 138 | خب همینطور که میبنین، همون نتیجه که میخواستیم رو گرفتیم و علاوه بر اون چون کامپایلر بهمون موقع کدنویسی ارور میده، خودمون قبل از اجرا متوجه میشیم و با استفاده از این عملگر از اجراش جلوگیری میکنیم. 139 | 140 | حالا اگه توسعه­دهنده که ما باشیم بخواد اگه `null` دریافت کرد کار دیگه ای رو انجام بده(مثلا موقعی که `null` دریافت کرد یک رشته رو چاپ کنه) اون موقع باید چیکار کنه. کاتلین اینجا هم راه حل داره. کد زیر رو نگاه کنین: 141 | 142 |
143 | 144 | 145 | ```kotlin 146 | fun main(args: Array) { 147 | println("Hello, World!") 148 | 149 | val root = document.getElementById("root1") 150 | println("root is $root") 151 | root?.innerHTML = "

Hello, World again!

" 152 | 153 | println("The end") 154 | } 155 | ``` 156 | 157 |
158 | 159 | در واقع یکی از خوبیای کاتلین اینه! کاتلین وقتی یک شی `null` رو برای `print` دریافت میکنه، مقدار `null` رو هم چاپ میکنه.یعنی میتونین نه تنها ارور `error` نمیده، بلکه میتونین ازش استفاده کنین.الان اگه این کد رو اجرا کنین نتیجه زیر رو میبینین: 160 | 161 | 162 | 163 | همینطور که میبینین مقدار `null` رو چاپ میکنه. 164 | 165 | حالا بیاین کد `html` ای که میخوایم به `div` اضافه کنیم رو یکم مشکل­تر کنیم، یک کد چندخطی استفاده کنیم. 166 | 167 |
168 | 169 | 170 | ```kotlin 171 | fun main(args: Array) { 172 | println("Hello, World!") 173 | 174 | val message = "KotlinFarsi" 175 | 176 | val html = """ 177 |

Hello, World again!

178 |

KotlinFarsi contains ${message.length} letters

179 | """ 180 | val root = document.getElementById("root") 181 | root?.innerHTML = html 182 | 183 | println("The end") 184 | } 185 | ``` 186 | 187 |
188 | 189 | توی این کد چندتا نکته جدید داریم. یکی این که از یک متغییر برای نوشتن کد چندخطی `html` استفاده کردیم و برای این که به کامپایلر بفهمونیم کدمون چندخطیه، کد `html` رو داخل یک جفت `"""` قرار دادیم. و همینطور فهمیدیم که اگه بخوایم میتونیم داخل رشته هم از مقدار یک متغیر استفاده کنیم. درواقع زمانی که از `{}$` استفاده میکنیم، کامپایلر هرچی داخل اکولادها بنویسین رو به عنوان یک کد حساب میکنه، نه رشته، و در انتها مقدار اون کدی که نوشتیم رو به صورت رشته چاپ میکنه. 190 | 191 | خروجی کد بالا : 192 | 193 | 194 | 195 | حالا بیاین یک دکمه به html اضافه کنیم. دکمه ای که وقتی روش کلیک شد یک عبارت رو چاپ کنه 196 | 197 | 198 |
199 | 200 | ```kotlin 201 | fun main(args: Array) { 202 | println("Hello, World!") 203 | 204 | val message = "KotlinFarsi" 205 | 206 | val html = """ 207 |

Hello, World again!

208 |

KotlinFarsi contains ${message.length} letters

209 | 210 | """ 211 | val root = document.getElementById("root") 212 | root?.innerHTML = html 213 | val btn = document.getElementById("btn") 214 | btn?.addEventListener("click",{ println("Clicked") }) 215 | 216 | println("The end") 217 | } 218 | ``` 219 | 220 |
221 | 222 | اومدیم به متغییر html یک دکمه اضافه کردیم و توی کدمون یک `EventListener` و زمانی که برروی دکمه کلیک میشه “Clicked” توی کنسول به نمایش در میاد. 223 | 224 | قبل از فشار دادن دکمه: 225 | 226 | 227 | 228 | 229 | و بعد از فشار دادن دکمه : 230 | 231 | 232 | 233 | 234 | 235 | همینطور که میبینین وقتی دکمه رو فشار دادیم Clicked چاپ شد. 236 | 237 |
238 | --------------------------------------------------------------------------------