Динамик жагсаалттай ажиллах боломжуудын тухай авч үзье. Манай хичээлийн програм App, Car компонентуудтай болоод байгаа.

App компонентийн Toogle car товч машиний мэдээллийн жагсаалтыг нээх, хаах ажиллагааг хийх бол Car компонентийн Дарах товчоор App компонентод h1 гарчигаар үзүүлж буй текстийг машиний нэрээр сольдог. Динамик жагсаалттай ажиллах практик болгон програмд Car компонентийн Дарах товчийг input -ээр солиод input -д оруулсан мэдээллээр Car компонентоос машиний нэрийг өөрчлөх машиний мэдээллийг жагсаалтаас хасах ажиллагаануудыг хэрэгжүүлье.

Утга олгох үйлдэлд хоёр операнд оролцох бөгөөд зүүн операнд зөвхөн өөрчлөгдөж болох илэрхийлэл байх ёстой. Жишээ нь хувьсагч. C# -д бусад програмийн хэлүүдэд байдаг утга олголтын (=) суурь үйлдэл байдаг бөгөөд үйлдэл баруун операндийн утгыг зүүн операндад олгдог.  Жишээ нь

int number = 23;

Дээрх мөр number хувьсагчид 23 утгыг олгож байгаа. Энд number хувьсагч зүүн операнд буюу оролцогч.

Jsx -д жагсаалтыг циклээр оруулан ирэх ажиллагааг мэдсэн тул зарим элементүүдийг нөхцлөөс хамааран үзүүлэх аргыг сурцгаая. Үүний тулд App компонентийн state обьектод

  state = {
    cars: [
      { name: 'Toyata Prius', year: '2018' },
      { name: 'Toyata Camry', year: '2019' },
      { name: 'Ford', year: '2015' }
    ],
    pageTitle: 'App компонент',
    showCars: false
  }

Битийн үйлдлүүд онцгой үйлдлийн ангилал. Үйлдлүүд тоонуудын бит бүр дээр хийгддэг. Ийм учраас тоонуудыг хоёртын системд авч үздэг. Жишээ нь 2 хоёртын системд 10 бөгөөд хоёр биттэй харин 7 - 111 гээд гурван битээр илэрхийлэгдэнэ.

Жич: Програмийн код бичиж сурахын тулд тооллын системийн ерөнхий ойлголтыг сайн ойлгосон байхыг зөвлөе. Ухагдхуун тийм ч төвөгтэй биш тул тооллын системийн талаар интернетээд судлан мэдээрэй.

Төслийн App компонентийн кодыг харвал

class App extends Component {

  state = {
    cars: [
      { name: 'Toyata Prius', year: '2018' },
      { name: 'Toyata Camry', year: '2019' },
      { name: 'Ford', year: '2015' }
    ],
    pageTitle: 'App компонент'
  }

  changeTitleHandler = (newTitle) => {
    this.setState({
      pageTitle: newTitle
    })
  }

  ChangeHandle = (event) => {
    this.setState({
      pageTitle: event.target.value
    })
  }

  render() {
    const divStyle = {
      textAlign: 'center'
    }

    const cars = this.state.cars

    return (
      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>

        <input type="text" onChange={this.ChangeHandle} />

        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>
        <Car
          name={cars[0].name}
          year={cars[0].year}
          onChangeTitle={this.changeTitleHandler.bind(this, cars[0].name)}
        />
        <Car
          name={cars[1].name}
          year={cars[1].year}
          onChangeTitle={() => this.changeTitleHandler(cars[1].name)}
        />
        <Car
          name={cars[2].name}
          year={cars[2].year}
          onChangeTitle={() => this.changeTitleHandler(cars[2].name)}
        />
      </div>
    )
  }
}

болсон байгаа.

C# -д бусад програмчлалын хэлүүдэд хэрэглэгдэг ихэнх операторуудыг ашигладаг. Үйлдэл гэдэг нь оролцогчид (операндууд) дээр тодорхой үйлчлэл хийхийг хэлнэ. Оролцогчоор хувьсагч эсхүл ямар нэгэн утга (жишээ нь тоо) байж болно. Үйлдэл нэгдмэл (унар) буюу нэг оролцогч (операнд) дээр, бинар буюу хоёр оролцогч дээр, тернар буюу гурван оролцогчийнх гэж байдаг.

Програмийн кодчлолийг тусгайлан заалгаж сурдаг зүйл биш. Ямарч зүйлийг өөрөө бие даан сурах боломжтой. Энэ талаар Бие даан сурах нийтлэлийг үзээд эрэгцүүлэн бодоорой. Энэ удаад Input талбарын боловсруулалтын талаар судлая.

Өмнөх хичээлүүдэд хуудасны элементүүдэд үйл явцын сонсогчийг тавин, түүнд параметр дамжуулан хүлээн авах аргуудыг сурсан. Энэ хичээлээр Input талбарт үүссэн үйл явцыг хэрхэн боловсруулахыг судлая. Үүний тулд App компонентийн h1 гарчигийн доор input талбарыг

      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>
        <input type="text"/>
        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>

оруулан өгөөд хөтөч дээрх хуудсаа харвал

Мэдээллийн технологийн салбарын хөгжлийг дагаад кодлогчийн хэрэгцээ жилээс жилд өссөөр байна. Програмийн кодлогч болоход туслах зорилгоор сайтад орчин үед өндөр эрэлттэй байгаа хэлүүдийн хичээлүүдийг цувралаар оруулсаар байх болно. Аливаа зүйлийг сурах суурь бол таны хүсэл эрмэлзлэл гэдгийг Суралцах хир хэцүү вэ? нийтлэлийг уншаад эргэцүүлэн бодоорой.

Хичээлээр консолоос өгөгдөл оруулах, консолд өгөгдлийг үзүүлэхийг судлах болно.

Консолийн гаралт

Өмнөх хичээлүүдэд консолд мэдээлэл үзүүлэхдээ компиляторын Console.WriteLine аргыг хэрэглэсэн. Хэрвээ консолд мэдээллийг гаргах хэрэгтэй түүнийг Console.WriteLine аргад дамжуулах хэрэгтэй. Жишээ нь төслийн Program.cs файлд

string hello = "Сайн уу Монгол";
Console.WriteLine(hello);
Console.WriteLine("C# -д тавтай морил!");
Console.WriteLine("Баяртай Монгол...");
Console.WriteLine(24.5);

командуудыг (statement) өгөөд төслийг ажлуулбал консолд

гэж харуулна.

React -д үйл явцыг хэрхэн боловсруулах талаар гүнзгийрүүлэн судлая. Үүний тулд Car компонентийн кодод Дарах нэртэй товчийг

import React from 'react'

const car = props => <div>
  <h3>Машиний нэр: {props.name}</h3>
  <p>Он: <strong>{props.year}</strong></p>
  <button>Дарах</button>
</div>

export default car

нэмэн өгөөд хуудсаа харвал

гэж харагдана.

Зөвлөмж: Хичээлийн материалыг бүрэн ойлгохын тулд React JS сан хичээлийн багцыг бүхэлд нь үзэхийг зөвлөе.

Програмчлалын бусад хэлүүдийн адилаар C# -д хувьсагчийг үүсгэхэд ашиглах өөрийн өгөгдлийн төрлүүд бий. Өгөгдлийн төрөл обьект авч болох, обьектод хэрэглэж болох үйлдлүүдийн өгөгдлийн дотоод илэрхийлэл, утгын олонлогийг тодорхойлдог тул өгөгдлийн төрлүүдийг маш сайн ойлгон зөв хэрэглэж сурах нь програмийн код бичихид маш чухал зүйл гэдгийг сануулъя.