JS ჩაინიკური კითხვები

X2D3T9
ჩემი აზრით ფრეიმვორქის ცოდნა აუცილებელია. დღესდღეობით ტენდენცია არის 1 გვერდიანი აპლიკაციების წერის. ანუ ფიზიკურად 1 გვერდია და ჯავასკრიპტ აპლიკაციაა ჩატვირთული, "ვირტუალური" გვერდებით.

ფრეიმვორქით მუშაობის დროს სპაგეტი კოდი არ გამოგდის და ყველაფერი დაყოფილია ლამაზად და გასაგებად.

ერთ ერთი დიდი პლიუსი ის არის რომ მოდელზე (ანუ ინფორმაციაზე, მაგალითად ობჯექტზე) ახდენ მანიპულაციას რის შედეგადაც შემდეგ view-ში DOM იცვლება. ანუ MVC (model view controller) დიზაინისკენ ილტვიან ფრეიმვორქები. თუმცა უმეტეს შემთხვევაში MVVM სახელი უფრო შეესადაგებათ. ანუ model-view-viewmodel.

გიბიძგებს იმისკენ რომ დააცალკევო ერთმანეთისგან ეს 3 კომპონენტი.

ფრეიმვორქებს შორის გარდა მათი იმპლემენტაციისა, განსხვავება არის დეველოპერის "თავისუფლება".

მაგალითად, ჩემი ერთ ერთი ფავორიტი ფრეიმვორქი - Mithril.js შედგება დაახლოებით 10 ძირითადი ფუნქციისგან. ეს ფუნქციები კოდის წერის დროს შეიძლება არც გამოიყენო საერთოდ, ანუ შეზღუდული არ ხარ არანაირად როდესაც  mithril.js -ში მუშაობ. შეიძლება სულ რაღაც 2 ფუნქცია გამოიყენო და დანარჩენი vanilla js -ში წერო. ანუ უბრალო ჯავასკრიპტში.

mithril.js გიბიძგებს იმისკენ რომ functional ჯავასკრიპტი წერო, ანუ თითოეული პატარა ლოგიკა, ცალკეულ, გამოყენებად ფუნქციებად დაყო (როგორც უნდა იწერებოდეს წესით ჯავასკრიპტი). და რადგანაც "ჩარჩოებში" არ გსვამს და გაძლევს იმის უფლებას რომ წერო რაც გინდა და როგორც გინდა, თუკი შენთვითონ ვერ მოიფიქრებ როგორ დაახარისხო და დაყო ყველაფერი ისე რომ MVC დიზაინი დაიცვა, შეიძლება ეგრეთწოდებული სპაგეტი კოდი გამოგივიდეს, ანუ სრული ქაოსი.

mithril-ს დამუღამება თითქმის არ ჭირდება, რადგანაც ჩვეულებრივ ჯავასკრიპტში მუშაობ, უბრალოდ რამდენიმე ფუნქციას წაგაშველებს იმისთვის რომ უფრო დახვეწილი კოდი დაწერო. და ჩემი აზრით ეს დიდი პლიუსი აქვს - რეალურად, ჯავასკრიპტს სწავლობ.

ასევე ყველაზე პატარა ფრეიმვორქია და ყველაზე სწრაფი. აი აქ run test -ს თუ გააკეთებ, ნახავ შედეგებს:
https://jsperf.com/angular-vs-knockout-vs-ember/308

აი ანგულარის შემთხვევაში, ჯავასკრიპტს არ სწავლობ, არამედ ანგულარს სწავლობ. ანუ ჯავასკრიპტს აღარ წერ, ანგულარს წერ რა. დოკუმენტაციაში თუ არ წაიკითხავ აი ეს როგორ კეთდება, ისე ვერ გააკეთებ.

ასევე დოკუმენტაცია გეუბნება რომ აი ამის გაკეთება თუ გინდა, მაშინ აი ასე უნდა დაწერო, ეს უნდა ქნა, ის უნდა ქნა.. ანუ რაღაცნაირად "ჩარჩოებში" გსვამს რა..

მე პირადად მიმუშავია Backbone.js, Backbone.Marionette.js, Angular.js, React.js, Ember.js, Vue.js, Mithril.js, soma.js, Meteor.js.

და გირჩევდი Vue.js-ს და Mithril.js -ს და Meteor.js.

Vue-ს დაახლოებით იგივე სინტაქსი აქვს რაც ანგულარს, მაგრამ ბევრად უფრო დახვეწილია, ბევრად უკეთესი დოკუმენტაცია აქვს და ბევრად უფრო მარტივია.

Meteor.js სულ სხვა დონეა. Meteor-ში სერვერსაც და კლიენტსაც ჯავასკრიპტში წერ. და ძალიან მაგარი რამეა. აი სულ სხვა სამყაროა.. )

This post has been edited by Ruritania on 10 Dec 2015, 06:26

ჯერ ჯავასკრიპტში გაიღრმავე ცოდნა და იქამდე 2.0 გამოვა. მთლიანად იცვლება სინტაქსი და ბარემ ის ისწავლე
იქამდე უბრალოდ საწყისებს და აზრს რომ გადახედო კარგი იქნება

Ruritania


მადლობა ასეთი ვრცელი ინფოსთვის

amon_amarth


მადლობა... 2 ვერსიაში სულ ცვლიან სინტაქსს?

ხალხო ვინმემ ამიხსენით რა
რას წარმოადგენს class ჯავასკრიპტში???

ნუ ზოგადად ვხვდები რაც არის და აქაც ვნახე
https://developer.mozilla.org/en-US/docs/We...ference/Classes

მაგრამ კლასის მაგივრად $.fn რომ გამოვიყენო ხოლმე უკთესი არ იქნება??
რა სხვაობას მომცემს???

ნუ გასაგებია კლასი რომ ობიექტია და ა.შ.
მაგრამ მაინც
ჯავასკრიპტში თუ იყო კლასები არც ვიცოდი...

ანგულართან ვისაც გაქვთ შეხება მომეშველეთ რა მოთხოვნას ვაგზავნი პჩპ ში

ვამოწმებ if ($this->input->is_ajax_request()) გაიშვას მაგრამ არ აღიქვამს აჯაქს რექუესტათ მოაქვს ელსე ბლოკი

headers: {
"Content-Type" : "application/json"
}

ეს ხომ მაქვს ჩასმული და რა უნდა ვერ მეტყვით?

აი ჯქუერიში როგორც არის dataType: 'json' ეგ როგორ გავაკეთო ანგულარში?

ასეთ პატარა პრობლემას წავაწყდი, სლაიდში ჩვეულებრივად button -ი გავაკეთე მაგრამ Hover ი არ მუშაობს სანამ მაუსით არ დაკლიკებ სლაიდზე, Js -ს ამბავია მგონი როგორ მოვაგვარო ეს პრობლემა ხომარიცით?

აქ მეორე ფოტოზე სლაიდზე რომ გამოდის კნოპკა ამაზე მაქვს საუბარი , tourgeorgia.ru (როცა თავისით გადადის მაშინ არ აკეთებს hover ეფექტს) არაფერს რომ არ დაკლიკო და მიიტანო მაუსი

This post has been edited by iloilo603 on 11 Dec 2015, 16:16

ShalvaSoft

იმავეს რასაც სხვა ენებში, ჯავასკრიპტის განსხავებებით, ცხადია.

ცნობისთვის, ჯიქვერი დაწერილი არის კლასებით.
ჯიქვერის ფუნქცია თავისთავში მოიცავს კონსტრუქტორსაც, მეთოდებსაც, თვისებებსაც, იძახებს კიდეც საკუთარ კონსტრუქტორს და გიბრუნებს $ ობიექტს, რომელიც არის ჯიქვერის კლასის ეგზემპლარი.
iloilo603
onMouseOver event-ის გადაჭერა სცადე.

ესობიექტები რა პონტია? ამიხსენით ვინმემ 2 სიტყვით თუ არ დაგეზარებათ

X2D3T9

ობიექტი არის მეხსიერება, რომელსაც მნიშვნელობა შესაძლოა ჰქონდეს დამოწმებული იდენტიფიკატორი. ობიექტი შეიძლება იყოს ცვლადი, მონაცემთა სტრუქტურა, ან ფუნქცია.
კლასი დაფუძნებულია ობიექტზე ორიენტირებული პროგრამირების პარადიგმაზე,
მაგალითად, კლასს, სადაც ობიექტი შეიძლება იყოს კომბინაცია ცვლადებისა, ფუნქციებსა და მონაცემთა სტრუქტურებისა.
რელაციურ მონაცემთა ბაზის მართვის ობიექტი შეიძლება იყოს ცხრილი ან სვეტი, ან ასოციაცია მონაცემებსა და მონაცემთა ბაზას შორის.
ობიექტის მთავარი მიზანია კოდის ხელახლა გამოყენება...

ეხლა მარტივი სიტყვებით რომ აგიხსნა
წარმოიდგინე ბევრ უჯრებიანი მაგიდა
ეს მაგიდა არის ობიექტი
ამ ობიექტში კიდე არის ობიექტები (უჯრები)
თითოეულ უჯრაში არის ქაღალდები
თითოეულ ქაღალდზე წერია რაღაც ტექსტი

აი ეგაა ობიექტი...

ჩემი სიტყვებიდან ობიექტი ძალიან ჰგავს მასივს
მაგრამ სხვაობა ისაა რომ მასივი შეიძლება დაიშალოს
ობიექტი არ იშლება
უბრალოდ ხელახლა იძახებ...

P.S.
php-ში გვაქვს ასეთი მაგიური ფუნქცია კლასებზე
__destruct
რეალურად ეს აღნიშნავს კლასის გამოყენების დასრულებას და არა დაშლას...

ShalvaSoft

მადლობა

გამარჯობა, დახმარება მჭირდება... (( სკრიპტი დავწერე მაგრამ ჩემდა საუბედუროდ, დაუდგენელი მიზეზის გამო არ მუშაობს :/
ახლა დავიწყე სწავლა და "მინი" დავალებაა და არ დამცინოთ ))
პ.ს ძებნისას, ნაპოვნი ტექსტის გრაფას უნდა უცვლიდეს ფერს და ეგ ნაწილი ვერ გავაკეთე :/

<html>
<head>

<script type="text/java[ertad]script">
var x = document.querySelectorall(".painters");

var y = document.querySelectorall(".painters");

function r()

{
for (var i = 0; i < x.length; i++)
{
y[i].style.backgroundColor = '';
if (txt.value == x[i].innerHTML)
{

y[i].style.backgroundColor = "red";

x[i].style.backgroundColor = "blue";
}
}
}
</script>


<body>
<div>

<img src = "http://www.picz.ge/img/s4/1512/12/5/56287a2a5b6b.jpg" style = "width:251px; heigth:326px; float:left"/>

</div>

<div style="clear:both"></div>
<div style = "float:left; font-size:larger;" >Nato Davitelashvili</div>

<div style="clear:both"></div>

<style type="text/css">
td.painters {
background-color: grey; border-width: 1px; }

.search {

margin: 100px 0px 0px 100px;
background: #E2E2E2;
width:270px;
height:50px;
padding:25px 0px 0px 20px;

}

#text {

width: 200px;
height:20px;
color:gray;
}

#submit {

border:none;
width:50px;
height:24px;
background: #B9B9B9;
cursor:pointer;
}

#submit:hover {
background: #9d226d;
color: #ffffff;
}

</style>
</head>
<body>

<table>
<thead>
<tr>
<td class="painters">Names</td>
<td class="painters">biography</td>
<td class="painters">dates</td>
</tr>
</thead>
<tbody>
<tr>
<td class="painters">Pablo Picasso</td>
<td class="painters">
espaneli mxatvari da skulptori. me-20 saukunis xelovnebis ert-erti yvelaze cnobili figura,
kubizmis damfudznebeli.
</td>
<td class="painters">
25/10/1881-08/04/1973
</td>
</tr>
<tr >
<td class="painters">Amadeo Modiliani</td>
<td class="painters">

italieli mxatvari da moqandake. me-19 saukunis bolosa da me-20 saukunis dasawyisis ert-erti cnobili mxatvari,
eqspresionizmis tvalsachino warmomadgeneli.

</td>
<td class="painters">
10/07/1884-24/01/1920

</td>

</tr>
</tbody>
</table>


<div class="search">
<input type = "text" id = "txt">
<input type = "submit" value = "GO" onclick="r();">


</div>

</body>
</head>
</html>

Natalie15
გამარჯობა

ძალიან მეზარება ეგ კოდი დაგიტესტო... და თან მინდა გირჩიო [code ] ტაგები გამოიყენო ფორუმზე...

ერთი რამე სევამჩნიე შენ კოდში...
შექმნილი გაქვს ფუნქცია r და მერე არსად არ იყენებ... ანუ თუ ფუნქცია გინდა მაშინვე მუშაობდეს უბრალოდ არ დაარქვა სახელი და
function r() მაგივრად function () დაწერე კოდში...
წარმატებები...

პ.ს. ბოდიში მეტს ვერ გეხმარები

Roofus
დიდი მადლობა. )
<input type = "submit" value = "GO" onclick="r();"> <---- აქ მაქვს გამოძახებული. :/

მადლობა. შენც ასევე

Natalie15

ეს ერთი და იგივე ელემენტთა სიაა, რატომ აწვალებ ბრაუზერს ?

document.querySelectorAll

1.txt ცვლადი საიდან მოგაქვს ?
2. ერთ სიტყვას ადარებ მთლიან ტექსტს , ეგ არასდროს არ დაემთხვევა.

x[i].style.backgroundColor = "transparent";

დიდი შეცდომა :

document.querySelectorAll
აბრუნებს ცარიელ სიას.
იმიტომ, რომ გამოძახების მომენტში არ არსებობს td ელემენტი კლასით .painters.
ამიტომ, სკრიპტი ყოველთვის ჩაიტანე ქვემოთ, რათა უკვე დასრულებულ DOM-ზე იმუშაოს.

ჩასწორებული
<html>
<head>
<body>
<div>

<img src = "http://www.picz.ge/img/s4/1512/12/5/56287a2a5b6b.jpg" style = "width:251px; heigth:326px; float:left"/>

</div>

<div style="clear:both"></div>
<div style = "float:left; font-size:larger;" >Nato Davitelashvili</div>

<div style="clear:both"></div>

<style type="text/css">
td.painters {
background-color: grey; border-width: 1px; }

.search {

margin: 100px 0px 0px 100px;
background: #E2E2E2;
width:270px;
height:50px;
padding:25px 0px 0px 20px;

}

#text {

width: 200px;
height:20px;
color:gray;
}

#submit {

border:none;
width:50px;
height:24px;
background: #B9B9B9;
cursor:pointer;
}

#submit:hover {
background: #9d226d;
color: #ffffff;
}

</style>
</head>
<body>

<table>
<thead>
<tr>
<td class="painters">Names</td>
<td class="painters">biography</td>
<td class="painters">dates</td>
</tr>
</thead>
<tbody>
<tr>
<td class="painters">Pablo Picasso</td>
<td class="painters">
espaneli mxatvari da skulptori. me-20 saukunis xelovnebis ert-erti yvelaze cnobili figura,
kubizmis damfudznebeli.
</td>
<td class="painters">
25/10/1881-08/04/1973
</td>
</tr>
<tr >
<td class="painters">Amadeo Modiliani</td>
<td class="painters">

italieli mxatvari da moqandake. me-19 saukunis bolosa da me-20 saukunis dasawyisis ert-erti cnobili mxatvari,
eqspresionizmis tvalsachino warmomadgeneli.

</td>
<td class="painters">
10/07/1884-24/01/1920

</td>

</tr>
</tbody>
</table>


<div class="search">
<input type = "text" id = "txt">
<input type = "submit" value = "GO" onclick="r()">
</div>
<script>
var x = document.querySelectorAll(".painters");
function r(){
var txt=document.getElementById("txt");
for (var i = 0; i < x.length; i++){
x[i].style.backgroundColor = "transparent";
if (x[i].innerHTML.indexOf(txt.value)!=-1){
x[i].style.backgroundColor = "blue";
}
}
}
</script>
</body>
</head>
</html>

This post has been edited by Cocka-Cola on 13 Dec 2015, 20:25

Cocka-Cola
ვერ წარმოიდგენ რა მადლიერი ვარ :დ
უღრმესი მადლობა. გაიხარეე... ყველა რჩევისთვის დიდი მადლობა )

წარმატებები))

This post has been edited by Natalie15 on 13 Dec 2015, 20:28