Nasıl javaScript'te bir işlev oluşturun? Bu soru acemi programcılar arasında oldukça yaygındır. Ve bu makale sadece yeni başlayanlar için yazılmıştır. Öncelikle şu soruyu anlamanız gerekir: fonksiyon nedir? Bununla başlayalım.

Okuldan bir fonksiyonun ne olduğunu hatırlamalısın. Değilse, size hatırlatırım. İşlevin, işlediği ve sonucu döndürdüğü belirli parametreleri vardır. Örneğin, y \u003d 2 * x +5 işlevi. Burada x \u003d 3 ayarlayabiliriz ve karşılığında y \u003d 11 elde ederiz. Bu matematikten bir fonksiyon örneğidir. Kesinlikle benzer işlevler JavaScript, sadece burada bir fonksiyon, sadece bir ifadenin hesaplanması değil, sevdiğiniz herhangi bir şey olabilir.

Önce mesajı yazdıran bir işlev oluşturalım " Merhaba".

İlk satır, dilde bir senaryo olduğunu söylüyor JavaScript... Sonraki satır bir işlev bildirir. Gördüğünüz gibi, her şey bir anahtar kelimeyle başlar işlevi... Parametreler parantez içinde gösterilir, ancak bu durumda parametre yoktur, bu nedenle parantez içindeki her şey boştur. Ardından, çağrıldığında çalıştırılması gereken bir işlev kodunun bulunduğu küme parantezleri vardır. Bu kod, işlevi kullanır uyarmak (), parametre tarafından belirtilen metnin yazıldığı bir bilgi penceresi açar. Parametre olarak, uyarmak () (bu yerleşik bir işlevin örneğidir) dizeyi iletin " Merhaba". İşlev uyarmak () üç kez arıyoruz.

Fonksiyon yazıldığında, bir kapanış küme ayracı koymanız gerekir. Bir sonraki satırda fonksiyonu diyoruz merhaba ()... Umarım fonksiyonun ne olduğunu anlarsınız. Belki bazılarınız şunu soracaktır: "Avantajları nelerdir? Sonuçta, sadece üç kez yazabiliriz uyarmak () ve sonuç aynı olacaktır. "Haklısınız ve bu kodu yalnızca bir kez kullanmanız gerekiyorsa bunu yapmalısınız. Buna 3, 4 veya daha fazla kez ihtiyacınız olduğunu hayal edin. Elbette, bunu tekrarlamak uygun değildir. her zaman kodlayın. Bir kelime merhaba () yazmak çok daha kolay Katılıyorum? Öyle sanıyorum Makalenin sonunda buna dayanarak çok önemli bir sonuç çıkaracağım, bu yüzden sonuna kadar okuyun.

Şimdi parametreli fonksiyonlardan bahsedelim. Bu tür örneklerden birini oluşturalım (etiketi olmadan hemen bir işlevi ve çağrısını yazacağım.<senaryo>).

Fonksiyon toplamı (x, y) (
var toplamı \u003d x + y;
document.write (toplam);
}
toplam (5, 4);

Kod oldukça şeffaf, ancak bir yorum yapalım. Yine anahtar kelime işlevi, ardından işlevin adı (bu durumda, toplam). Parantez içinde, gerekli olan iki parametreyi belirttim ( x ve y). Fonksiyonun içinde başka bir değişken yaratıyorum toplam (değişkenleri ve fonksiyonları aynı şekilde çağırmak tamamen uygundur), buna toplamı atadığım x ve y (transfer edilenler). Ve sonra sonucu tarayıcı penceresinde görüntülüyorum. Fonksiyondan sonra parametreleri geçerek çağırıyorum 5 ve 4 ... Kontrol edebilirsiniz ve tarayıcı penceresinde göreceksiniz - 9 .

Ve son olarak, size dönüş değerlerini anlatacağım. Yukarıdaki örnekte, sonucu hemen yazdırdık, ancak bu işlev için en mantıklı şey hiçbir şeyi yazdırmamak, ancak sonucu döndürmektir. Ve bundan sonra ne yapılacağı başka bir sorudur. İşlevi şu şekilde yeniden yazalım:

Fonksiyon toplamı (x, y) (
var toplamı \u003d x + y;
getiri toplamı;
}
var z \u003d toplam (4, 5) + toplam (1, -3);
document.write (z);

Anahtar kelimeye dikkat edin dönüş... Sonucu döndürür (bizim durumumuzda, iki sayının toplamı). Böylece, toplam (4,5) İadeler 9 ... Bu sayıyı fonksiyonun sonucuyla ekliyoruz toplam (1, -3)yani -2 ... Sonuç olarak, alırız 7 ... Ve ancak o zaman sonucu tarayıcıda yazdırırız.

Umarım işlevlerin yeteneklerini takdir edersiniz, bu nedenle javaScript'te işlevler oluşturun ve kullanın emin olmalı. Ve şimdi önemli bir sonuca varacağım, her zaman uyulması gereken bir ilke: tekrar eden herhangi bir kod - ayrı bir işleve ayrılmalıdır... Aynı 5 satırı 20 kez görüntülüyorsanız (örneğin), bu 5 satırı ayrı bir işlevde seçmeniz gerekir. Bu nedenle, 100 satır (20 kez * 5 satır) yerine, yalnızca 20 satır yazın ve daha da anlaşılır (işlevin adı 5 satır koddan çok daha kolaydır). Bu kurala uyulmadığı takdirde programın boyutunun onlarca, belki yüzlerce kat artabileceğini söylemek isterim.

Size pratik yapmanızı ve örneğin tüm temel matematiksel işlemler için (toplama, çıkarma, çarpma ve bölme) işlevler oluşturmanızı öneririm.

24 Mayıs 2011, 01:13 AM

Bir işlevi çağırmanın beş yolu

• JavaScript

• Aktar

Sık sık JavaScript koduyla karşılaşıyorum, bu hatalar JavaScript'te işlevlerin nasıl çalıştığının yanlış anlaşılmasından kaynaklanıyor (bu arada, bu kodun önemli bir kısmı kendim yazmıştı). JavaScript, çok paradigmalı bir dildir ve işlevsel programlama mekanizmalarına sahiptir. Bu olasılıkları keşfetme zamanı. Bu makalede, JavaScript'te fonksiyonları çağırmanın beş yolunu size anlatacağım.

JavaScript öğrenmenin ilk aşamalarında, yeni başlayanlar genellikle içindeki işlevlerin, örneğin C # ile aynı şekilde çalıştığını düşünürler. Ancak JavaScript işlev çağrı mekanizmalarının bir dizi önemli farklılığı vardır ve bunların cehaleti, bulunması zor olan hatalara yol açabilir.

Üç öğeden oluşan bir dizi döndüren basit bir işlev yazalım - şu anki bu değer ve işleve iletilen iki argüman.
function makeArray (arg1, arg2) (return [this, arg1, arg2];)

En yaygın yol: küresel arama

Yeni başlayanlar genellikle yukarıdaki örnekte gösterildiği gibi işlevleri bildirirler. Bu işlevi çağırmak kolaydır:
makeArray ("bir", "iki"); // \u003d\u003e [pencere, "bir", "iki"]
Bekle. Pencere nesnesi nereden geldi? Bu neden pencereye eşittir?

JavaScript'te, komut dosyasının bir tarayıcıda veya başka bir ortamda çalıştırılması önemli değildir, her zaman tanımlanır genel nesne... Komut dosyamızdaki hiçbir şeye "bağlı" olmayan (yani, nesne bildiriminin dışında) herhangi bir kod, aslında genel nesne bağlamındadır. Bizim durumumuzda makeArray sadece kendi başına "yürüyen" bir işlev değildir. Aslında makeArray (kod bir tarayıcıda çalıştırılıyorsa) genel nesne penceresinin bir yöntemidir. Bunu kanıtlamak çok kolay:
alert (typeof window.methodThatDoesntExist); // \u003d\u003e tanımsız uyarı (typeof window.makeArray); // \u003d\u003e işlev
Yani makeArray ("bir", "iki") çağırmak; window.makeArray ("bir", "iki") çağırmaya eşdeğerdir; ...

Bu fonksiyon çağırma metodunun en yaygın olanı olması beni üzüyor, çünkü global bir fonksiyonun varlığını ima ediyor. Ve hepimiz küresel fonksiyonların ve değişkenlerin iyi programlama tavrı olmadığını biliyoruz. Bu özellikle JavaScript için geçerlidir. Küresel tanımlardan kaçının ve pişman olmayacaksınız.

İşlev çağrısı kuralı 1: İşlev, bir nesne belirtilmeden doğrudan çağrılırsa (örneğin, myFunction ()), bunun değeri genel nesne olacaktır (kod bir tarayıcıda çalıştırılıyorsa pencere).

Yöntem çağrısı

Basit bir nesne oluşturalım ve makeArray'i bir yöntem yapalım. Nesneyi değişmez gösterimi kullanarak bildiririz ve ardından yöntemimizi çağırırız:
// bir nesne oluşturun var arrayMaker \u003d (someProperty: "bir değer", make: makeArray); // make () yöntemini çağırın arrayMaker.make ("bir", "iki"); // \u003d\u003e [arrayMaker, "bir", "iki"] // alternatif sözdizimi, köşeli parantez kullanın arrayMaker ["make"] ("bir", "iki"); // \u003d\u003e [arrayMaker, "bir", "iki"]
Farkı görüyor musun? Bu durumda bu değer nesnenin kendisidir. İşlev bildirimi değişmediğine göre, önceki durumda olduğu gibi pencere neden olmasın? İşin sırrı, işlevlerin JavaScript'te nasıl iletildiğidir. İşlev, aslında bir nesne olan standart bir JavaScript türüdür ve diğer nesneler gibi işlevler de aktarılabilir ve kopyalanabilir. Bu durumda, argüman listesi ve gövde dahil tüm işlevi kopyaladık ve elde edilen nesneyi arrayMaker nesnesinin make özelliğine atadık. Bu, şunu beyan etmekle eşdeğerdir:
var arrayMaker \u003d (someProperty: "Bir değer"; make: function (arg1, arg2) (return [this, arg1, arg2];));
İşlev çağrısı kuralı # 2: Obj.myFunction () veya obj ["myFunction"] () gibi yöntem çağrısı sözdizimi kullanılarak çağrılan bir işlevde, bu obj olacaktır.

Genel olarak bu basit ilkenin anlaşılmaması, genellikle olayların ele alınmasında hatalara yol açar:

İlk düğmeye tıklamak bir mesaj gösterecektir "Btn1"çünkü bu durumda işlevi bir yöntem olarak çağırıyoruz ve bu işlevin içinde bu yöntemin ait olduğu nesnenin değerini alacaktır. İkinci düğmeye tıklamak görüntülenecektir "Pencere"çünkü bu durumda doğrudan buttonClicked'i çağırıyoruz (yani obj.buttonClicked () olarak değil). Üçüncü düğmede olduğu gibi, element etiketine bir olay işleyicisi atadığımızda da aynı şey olur. Üçüncü düğmeye tıklamak, ikinciyle aynı mesajı gösterecektir.

JQuery gibi kitaplıkları kullanırken, bunu düşünmenize gerek yoktur. jQuery, bu değeri olay işleyicisine yeniden yazarak ilgilenir, böylece bu değer, olayı ortaya çıkaran öğe olur:
// jQuery kullanarak $ ("# btn1"). click (function () (alert (this.id); // jQuery, "bu" düğmesinin olduğundan emin olacaktır));
JQuery bu değeri nasıl değiştirir? Alttarafı oku.

İki yol daha: apply () ve call ()

İşlevleri ne kadar sık \u200b\u200bkullanırsanız, bunları o kadar sık \u200b\u200bgeçirmeniz ve farklı bağlamlarda çağırmanız gerektiği mantıklıdır. Genellikle bunun değerini geçersiz kılmak gerekir. Hatırlarsanız, JavaScript'teki işlevler nesnelerdir. Pratikte bu, işlevlerin önceden tanımlanmış yöntemlere sahip olduğu anlamına gelir. application () ve call () bunlardan ikisidir. Bu değeri geçersiz kılmanıza izin verir:
var araba \u003d (yıl: 2008, model: "Dodge Bailout"); makeArray.apply (araba, ["bir", "iki"]); // \u003d\u003e [araba, "bir", "iki"] makeArray.call (araba, "bir", "iki"); // \u003d\u003e [araba, "bir", "iki"]
İki yöntem çok benzer. İlk parametre bunu geçersiz kılar. İkisi arasındaki farklar sonraki argümanlardadır: Function.apply () işleve iletilecek bir dizi değer alırken, Function.call () bağımsız değişkenleri alır. Uygulamada, bence, apply () kullanmak daha uygun.

İşlev çağrısı kuralı 3: İşlevi başka bir nesneye kopyalamadan bunu geçersiz kılmak istiyorsanız, myFunction.apply (obj) veya myFunction.call (obj) kullanabilirsiniz.

İnşaatçılar

JavaScript'te yerel türleri bildirme konusunda ayrıntıya girmeyeceğim, ancak JavaScript'te sınıf olmadığını ve herhangi bir kullanıcı tanımlı türün bir kurucuya ihtiyacı olduğunu hatırlatmayı gerekli buluyorum. Ek olarak, özel tür yöntemlerini yapıcı işlevinin bir özelliği olan prototip aracılığıyla bildirmek daha iyidir. Kendi tipimizi oluşturalım:
// bir yapıcı işlevi bildirme ArrayMaker (arg1, arg2) (this.someProperty \u003d "önemi yok"; this.theArray \u003d [this, arg1, arg2];) // yöntemleri bildirme ArrayMaker.prototype \u003d (someMethod: function () ( alert ("BazıYöntem Çağrıldı");), getArray: function () (this.theArray döndür;)); var am \u003d new ArrayMaker ("bir", "iki"); var diğer \u003d new ArrayMaker ("birinci", "ikinci"); am.getArray (); // \u003d\u003e [am, "bir", "iki"]
Bu örnekte önemli olan şey, işlev çağrısından önce yeni operatörün varlığıdır. Onun için değilse, bu global bir çağrı olurdu ve kurucuda yaratılan özellikler global nesneyi ifade ederdi. Buna ihtiyacımız yok. Ayrıca, kurucular genellikle değerleri açıkça döndürmez. Yeni işleç olmadan, kurucu undefined döndürür ve bununla birlikte bunu döndürür. Yapıcılardan çıkar sağlama iyi bir stil olarak kabul edilir; bu, yeni operatöre ihtiyacınız olduğunu hatırlamanıza yardımcı olacaktır.

Aksi takdirde, kurucunun içindeki kod başka bir dilde yazacağınız koda benzer olacaktır. Bu durumda bu değer, yaratmakta olduğunuz yeni nesnedir.

İşlev çağrısı kuralı 4: New operatörüyle bir işlevi çağırdığınızda, bunun değeri JavaScript çalışma zamanı tarafından oluşturulan yeni nesne olacaktır. Bu işlev açıkça herhangi bir nesne döndürmezse, bu örtük olarak döndürülür.

Sonuç

Umarım, işlevleri çağırmanın farklı yolları arasındaki farkı anlamak, JavaScript kodunuzu geliştirmenize yardımcı olur. Bu değerle ilgili hataları yakalamak bazen zordur, bu nedenle bunları önceden tahmin etmek mantıklıdır.

Her programcı hangi işlevlerin ve neden gerekli olduğunun farkındadır. Bununla birlikte, Javascript'teki işlevlerin bazı özellikleri vardır. Bu dilde uzun süredir programlama yapıyorsanız, muhtemelen farklı dillerin olduğunu biliyorsunuzdur. Başka bir dilden geliyorsanız, bazı makaleleri okurken, büyük olasılıkla bunu ilk bakışta bir işlevin garip bildirimini görmüşsünüzdür:

Var add \u003d fonksiyon (arg1, arg2) (var toplam \u003d arg1 + arg2; dönüş toplamı;) var sonuç \u003d add (5, 2); // sonuç şimdi 7

Yani, her şeyden önce işlevin adı yoktur. İkincisi, bir değişkene atanır, ancak sadece atanmaz, ancak gövdesi hemen gider. Şahsen, daha önce VB, C ++ gibi dillerde yazmış olan benim için böyle bir açıklama, nasıl çalıştığı ve neden böyle yazılması gerektiği konusunda şaşkınlığa ve yanlış anlaşılmalara neden oldu.

"Klasik" işlev bildirimine ve şöyle çağırmaya alışkınım:

İşlev add (arg1, arg2) (var toplam \u003d arg1 + arg2; dönüş toplamı;) var sonuç \u003d add (5, 3); // sonuç şimdi 8

Ve Javascript'teki fonksiyonların özelliklerine geldiğimiz yer burasıdır. Anlama kolaylığı için, JS'deki bir işlevin sayı veya dize gibi sıradan bir değer olduğunu hayal edin. 5 sayısını sonuç değişkenine yazabilir misin? Veya bir dizi gibi daha karmaşık bir şey ve sonra onu ekranda görüntülemek? Yapabilirsin. Öyleyse, bir fonksiyonun çok karmaşık bir yapı olmasına rağmen sıradan bir değer olduğunu hayal edersek, onu açıklamanın ilk yolu artık inanılmaz bir şey gibi görünmüyor.

Bir sonraki ilginç gerçek, ilkinin mantıksal bir devamıdır. Verileri bir değişkene koyduktan sonra, veriyi bu değişkenin adı üzerinden başka bir değişkene aktarabiliriz:

Var a \u003d 5; var b \u003d a; uyarı (b); // 5 yazdıracak

Her zamanki şey. Şimdi şu koda bir göz atın:

Var add \u003d fonksiyon (arg1, arg2) (var toplam \u003d arg1 + arg2; dönüş toplamı;) var calcSum \u003d add; uyarı (calcSum (5, 6)); // 11 yazdırır

Zaten tahmin etmeye başladın mı? Bir fonksiyon bir değişken gibi olduğu için, onu normal atama yoluyla diğer değişkenlerle "çarpabiliriz" ve onları fonksiyonlara da çevirebiliriz. CalcSum artık iki sayı da ekleyebilir. Ancak kod

Var calcSum \u003d add (1, 1); // calcSum artık 2'ye eşittir, bu bir işlev değil, sayı uyarısı olan bir değişkendir (calcSum (5, 6)); //hata

Çalıştırılmayacaktır, çünkü ilk satırda işlevin kendisini değil, çalıştırılmasının sonucunu atadık (parantezler, işlevi atamamız değil, yürütmemiz gerektiğini belirtir).

Kendi başına bir işlevi çağırmanız gerekiyorsa, bu şu şekilde yapılır:

Var calcFact \u003d function fact (val) (if (val \u003d\u003d 1)? Val: val * fact (val - 1); // özyineleme kullanarak faktöryel hesaplama) alert (calcFact (4)); // 24 yazdırır

Burada, bir değişkene bir fonksiyon atarken, ona fact adını verdik. Ancak bu ad yalnızca işlevin içinde bulunacak ve başka hiçbir yerde kullanılamayacaktır. Bunun nedenleri tercümanın çalışma prensibinde yatmaktadır ve dersin kapsamı dışındadır.

Merak ediyor olabilirsiniz, "Hmm, ilginç bir fırsat! Ama bu yöntemin avantajı nedir? Onsuz yapılamayacağı durumlar var mı, yoksa en azından normal bir reklamdan daha uygun mu?" Böyle bir yaklaşımdan vazgeçilemeyecek durumlar olduğunu iddia etmeyeceğim, ancak kod miktarını azalttığı bir örnek verebilirim. Diyelim ki günün saatine bağlı olarak bir kişiyi selamlamanız gerekiyor:

Var tarih \u003d yeni Tarih (); var merhaba \u003d (date.getHours ()< 12) ? function() {alert("Доброе утро!")} : (date.getHours() < 18) ? function() {alert("Добрый день!")} : function() {alert("Добрый вечер!")}; hello();

Gördüğünüz gibi, işlevler tek bir uyarı komutuyla son derece basittir.

"Klasik yoldan" gitmeye karar verseydik, o zaman üç ayrı işlev yazmamız ve ardından bunları bir zaman kontrolü koşulunda çağırmamız gerekirdi:

İşlev günaydın () (alert ("Günaydın!");) İşlev iyi öğleden sonra () (alert ("İyi günler!");) İşlev iyiEvning () (alert ("İyi akşamlar!");) Var tarih \u003d yeni Tarih (); (date.getHours ()< 12) ? goodMorning() : (date.getHours() < 18) ? goodAfternoon() : goodEvning();

Koşullu işleç için kısa bir gösterim biçimi kullandığımızı düşünsek bile, kod görsel olarak önemli ölçüde büyüdü. Dosyanın hesaplamaları gerçekleştiren gerçekten önemli işlevler içerdiğini varsayarsak, listeyi önemli bir mantık taşımayan ve büyük olasılıkla yalnızca bir kez kullanılan bu tür mini işlevlerle doldurmak iyi bir fikir değildir. Ek olarak, her işleve benzersiz bir ad vermek ve arama sırasında bunu belirtmek zorundayız. Bu nedenle, birinin adını değiştirmeniz gerekirse, iki yerde değiştirmeniz gerekecektir, bu da hata olasılığını artırır.

İkinci olarak, "klasik" yöntemi kullanırsak, o zaman bir değişkene bir fonksiyon atama yeteneğimizi kaybederiz. Yani yaz

İşlev add (a, b) (return a + b;) var calcSum \u003d add; calcSum (5, 5);

Artık mümkün değil. Bu nedenle, örneğimizde, misafiri hala birden fazla kez selamlamamız gerekiyorsa, bu parçayı her seferinde kopyalamamız gerekecek:

(date.getHours ()< 12) ? goodMorning() : (date.getHours() < 18) ? goodAfternoon() : goodEvning();

Ve ilk durumda, sadece merhaba () yazmak yeterli olacaktır; ve sonuç aynı olacaktır.

JS fonksiyonlarının ilginç bir özelliğinden bahsettim ve örnekler verdim. Yani bunu gördün javascript'te işlevleri çağırmanın yollarıtek bir türle sınırlı değildir. Projelerinizde bu fırsatlar için hemen başvuru bulamasanız bile en azından böyle imkanların olduğunu bileceksiniz. Ve gerçekten iyi şans geldiğinde, kod miktarını azaltabilir ve gereksiz kafa karışıklığı ve hataları önleyebilirsiniz.!

9 yanıt

HTML / DOM kullanarak olayları işlemenin birkaç yolu vardır. Gerçek doğru ya da yanlış yol yoktur, ancak farklı durumlarda farklı yollar yararlıdır.

1: HTML'de tanımlar:

2: Javascript'teki etkinliğin DOM özelliğine ekleyin:

// - Bir işlev işaretçisi kullanma: document.getElementById ("clickMe"). Onclick \u003d doFunction; // - Anonim bir işlev kullanma: document.getElementById ("clickMe"). Onclick \u003d function () (alert ("merhaba!"););

3: Ve Javascript kullanarak olay işleyiciye bir işlev ekler:

Var el \u003d document.getElementById ("clickMe"); if (el.addEventListener) el.addEventListener ("click", doFunction, false); else if (el.attachEvent) el.attachEvent ("onclick", doFunction);

Hem ikinci hem de üçüncü yöntemler satır içi / anonim işlevlere izin verir ve her ikisi de öğe belgeden ayrıştırıldıktan sonra bildirilmelidir. İlk yöntem geçersiz XHTML'dir çünkü onclick niteliği XHTML spesifikasyonunda belirtilmemiştir.

Birinci ve ikinci yöntemler birbirini dışlar, yani birini (ikinci) kullanmak diğerini (1.) geçersiz kılar. Üçüncü yöntem, birinci veya ikinci yöntem de kullanılmış olsa bile, istediğiniz kadar işlevi aynı olay işleyicisine bağlamanıza olanak tanır.

Büyük olasılıkla sorun CapacityChart () işlevinizin bir yerindedir. Bağlantınızı ziyaret edip komut dosyanızı çalıştırdıktan sonra, CapacityChart () işlevi tetiklenir ve iki açılır pencere açılır (betiğe göre biri kapanır). Aşağıdaki satıra sahipseniz:

CapacityWindow.document.write (s);

Bunun yerine şunu deneyin:

CapacityWindow.document.open ("metin / html"); CapacityWindow.document.write (s); CapacityWindow.document.close ();

DÜZENLE
Kodunuzu gördüğümde, onu özellikle IE için yazdığınızı düşünmüştüm. Belirtildiği gibi, document.all üzerindeki referansları document.getElementById ile değiştirmeniz gerekecektir. Ancak, bunu yaptıktan sonra, betiği yine de düzeltmeniz gerekiyor, bu yüzden en azından IE'de çalışmasını tavsiye ederim, çünkü kodu tarayıcılar arası çalışacak şekilde değiştirirken yaptığınız herhangi bir hata daha da fazla kafa karışıklığına neden olabilir. IE'de çalıştıktan sonra, kodu güncellerken diğer tarayıcılarda çalışıp çalışmadığını bilmek daha kolay olacaktır.

Göze batmayan bir şekilde javascript eklemenin daha iyi olacağını söyleyebilirim ...

jQuery kullanıyorsanız aşağıdaki gibi bir şey yapabilirsiniz:

HTML'niz ve düğmeden işlevi çağırma biçiminiz doğru görünüyor.

Sorun CapacityCount işlevindedir. Firefox 3.5'teki konsolumda şu hatayı alıyorum: bendelcorp.js'nin 759. satırında "document.all tanımsız".

Görünüşe göre document.all yalnızca IE'dir ve DOM'a erişmenin standart olmayan bir yoludur. Document.getElementById () kullanıyorsanız bu çalışmalıdır. Örnek: document.getElementById ("RUnits"). Document.all.Capacity.RUnits.value yerine değer

Karşılaştığınız temel sorunlardan biri, iyi bir neden olmadan tarayıcı koklamayı kullanıyor olmanızdır:

If (navigator.appName \u003d\u003d "Netscape") (vesdiameter \u003d document.forms ["Volume"]. Elements ["VesDiameter"]. Değer; // daha fazla malzeme alıntılandı) else (vesdiameter \u003d eval (document.all.Volume. VesDiameter.value); // daha fazla şey kesildi)

Chrome'dayım, bu yüzden navigator.appName Netscape olmayacak. Chrome, document.all'ı destekliyor mu? Belki, ama sonra tekrar, belki değil. Peki ya diğer tarayıcılar?

Kodun Netscape şubesindeki sürümü, 1996'daki Netscape Navigator 2'nin tersi sırayla herhangi bir tarayıcıda çalışmalıdır, bu nedenle muhtemelen buna bağlı kalmalısınız ... bunun dışında çalışmayacaktır (veya çalışacağı garanti edilmemiştir) çünkü girdi öğelerinde bir ad özniteliği belirtmediniz, bu nedenle bunlar, adlandırılmış öğeler olarak dizideki öğelere eklenmeyecekler:

Ya onlara bir isim verin ve öğeler dizisini kullanın ya da (daha iyi) kullanın

Var vesdiameter \u003d document.getElementById ("VesDiameter"). Değer;

tüm modern tarayıcılarda çalışacak - dallanma gerekmez. Güvenli tarafta olmak için, bu koklamayı 4 veya daha büyük bir tarayıcı sürümüyle değiştirin ve getElementById desteğini kontrol edin:

Eğer (document.getElementById) (// NB: parantez yok; yöntemin varlığını test ediyoruz, onu çalıştırmıyoruz // şeyler yapıyoruz ...)

Muhtemelen girdinizi de doğrulamak istiyorsunuz; bir çeşit

Var vesdiameter \u003d parseFloat (document.getElementById ("VesDiameter"). Value); if (isNaN (vesdiameter)) (alert ("Çap sayısal olmalıdır"); dönüş;)

Bununla başlayalım javaScript dili, OOP konseptini destekler (nesne yönelimli programlama). Bu kavram, nesneler gibi öğeler olduğu ve bu nesnelerin onları değiştirmenize izin veren çeşitli özelliklere ve yöntemlere (işlevlere) sahip olmasıdır.

Fonksiyon bir veya daha fazla ifadeden oluşan ayrı bir kod bloğudur. Kendi (benzersiz) adı vardır ve bir veya daha fazla işlemi gerçekleştirebileceğine bağlı olarak çeşitli parametreler alabilir.

Yöntem - bu aynı zamanda bir işlevdir, ancak zaten bir sınıfa veya nesneye aittir.

Amacıyla bir yöntem çağır, önce nesnenin adını yazmalı, ardından yöntemin adını bir noktadan yazmalısınız. Bu kuralın bir istisnası, pencere nesnesinin alert (), confirm () ve istem () yöntemlerini çağırmaktır. Nesnenin adı belirtilmeden çağrılabilirler. Bu yöntemleri daha önce bu yazıda gördük.

Ayrıca, önceki makalelerde tanıştık çıktı yöntemi document.write ()belge nesnesine ait olan.

Bu nedenle, programlamada çok önemli bir fırsat vardır. kendi işlevlerinizi yaratın.

İşlev sözdizimi şuna benzer:

Örneğin, aktarılan metni bir paragrafa ekleyecek ve görüntüleyecek basit bir işlev oluşturalım. Ayrıca onu kalın ve italik yapacaktır.

Function writeText (text) (// Paragrafa metin ekleyin ve bunu yazdırın document.write ("

"+ metin +"

");) // Oluşturulan writeText (" Merhaba! ") İşlevini çağırın;

Belgeyi kaydedip bir tarayıcıda açıyoruz.

Yorum Yap! Bir işlevi bildirirken, kaç operatör olursa olsun, küme parantezleri gerekli olmalıdır.

Programlamadaki işlevler ne içindir?

Bu işlevi kullanmanın ana avantajı, komut dosyasının kaynak kodunun boyutunu küçültmek.

Diyelim ki üç tek boyutlu diziyi yinelememiz gerekiyor. Bu makaleden bildiğimiz gibi, dizi bir döngü kullanılarak yinelenir. Bir işlev olmadan, bu komut dosyasının kodu şöyle görünecektir:

// üç dizi bildiriniz var arr1 \u003d; var arr2 \u003d ["b", 5, 9,2, "h", 8, 2]; var arr2 \u003d; için (var i \u003d 0; i< arr1.length; i++){ document.write("

Dizinli Arr1 öğesi "+ i +" eşittir: "+ arr1 [i] +"

");) for (var i \u003d 0; i< arr2.length; i++){ document.write("

Dizinli Arr2 öğesi "+ i +" eşittir: "+ arr2 [i] +"

");) for (var i \u003d 0; i< arr3.length; i++){ document.write("

Dizinli Arr3 öğesi "+ i +" eşittir: "+ arr3 [i] +"

"); }

Bu nedenle, her dizi için kendi döngünüzü yazmamak için, diziyi geçirdiğimiz bir işlevi kullanmak daha iyidir ve zaten tüm öğelerini gösterecektir. Böylelikle öncelikle kodun boyutunu küçültüyoruz, ikincisi ise tekrar eden koddan kurtuluyoruz.

Function printArr (arr) (for (var i \u003d 0; i< arr.length; i++){ document.write("

Dizinli dizi öğesi "+ i +" eşittir: "+ dizi [i] +"

");)) // üç dizi bildiriniz var arr1 \u003d; var arr2 \u003d [" b ", 5, 9.2," h ", 8, 2]; var arr2 \u003d; // Her diziyi yinelemek için oluşturulan işlevi çağırın printArr (dizi1); baskıArr (dizi2); baskıArr (dizi3);

Fonksiyon parametreleri

İşlev, herhangi bir sayıda parametreyi kabul edebilir., birden sonsuza. Veya tamamen parametresiz olabilir.

Haydi hadi parametresiz bir fonksiyon oluşturalımbasitçe klasik "Merhaba dünya" ifadesini gösterecektir.

Function helloWorld () (document.write ("Hello World");) // Fonksiyonu parametresiz çağırın, helloWorld helloWorld ();

Herhangi bir işlev parametresinin kendi varsayılan değeri olabilir. Bu, işlevi çağırırken, bu parametreye bir değer iletmezsek, varsayılan olarak ayarlanan kendi değerini kullandığı anlamına gelir.

Örneğin, geçirilen iki sayıyı ekleyecek bir fonksiyon oluşturalım. Yalnızca bir sayı iletirsek, varsayılan olarak ikinci sayı 4 olacaktır.

İşlev toplamı (sayı1, sayı2 \u003d 4) (document.write ("

"+ Sayı1 +" (İlk parametre) ve "+ sayı2 +" (İkinci parametre) sayılarının toplamı şuna eşittir: "+ (sayı1 + sayı2) +"

");) // Varsayılan olarak, geçirilen sayının eklenmesinin sonucunu 4. basamak ile gösterecek olan işlevi çağırın. Summa (5); // Sonuç: 9 // İkinci parametreyi de geçersek, fonksiyonu her iki parametreden sayıların eklenmesinin sonucunu gösterecektir. summa (5, 20); // Sonuç: 25

Ayrıca, bazı işlevlerin içinde başka bir mevcut işlevi çağırmanın mümkün olmasına izin verilir.

Örneğin, önceki summa () işlevi içinde oluşturduğumuz ilk writeText () işlevini çağıralım. WriteText () işlevi, sayıların eklenmesinin sonucunu iletir. Bu durumda, summa () işlevinin kodu şöyle görünecektir:

İşlev toplamı (sayı1, sayı2 \u003d 4) (writeText (sayı1 + sayı2);) // summa summa (5) işlevini çağırın; // Sonuç: 9 summa (5, 20); // Sonuç: 25

Bir değer döndüren işlevler

Şimdiye kadar, sonucu hemen ekranda görüntüleyen fonksiyonlar yazdık.

Şimdi nasıl yazılacağını öğrenelim bir tür sonuç döndüren bir işlev... Bu sonucu bazı değişkenlere ekleyebilir ve onunla daha fazla çalışabiliriz.

Neden bahsettiğimizi daha iyi anlamak için, komut istemi () ve onayla () gibi yöntemleri hatırlayalım. Bu yöntemler, kullanıcıdan alınan değeri döndürür ve görüntülemez.

Örneğin, kendi dizinin son öğesini döndürecek bir işlevparametre olarak geçti.

Function lastElement (arr) (// Geçilen dizinin son elemanını döndürür return arr;) // diziyi bildirin var otherArr \u003d ["iphone", "asus", 2000, 9.8, "twix"]; // Oluşturulan lastElement işlevini çağırın ve oluşturulan diziyi otherArr parametresi olarak iletin var lastEl \u003d lastElement (otherArr); // Dizinin alınan son öğesini göster uyarısı (lastEl);

Sonuç olarak, bu kelime otherArr dizisinin son elemanı olduğu için "twix" kelimesini elde ederiz.

Alert () yöntemi hiçbir şey döndürmez... Yani, alert () yöntemini çağırmanın sonucunu içeren bir değişkeni görüntülemeye çalışırsak, değerini göreceğiz tanımsız... Bu, boş bir değişkenin değerini çıkarmaya çalışmakla aynıdır.

Örneğin, önceki örnekteki son alert () çağrısının sonucunu alın, resAlert değişkenine koyun ve oluşturduğumuz writeText fonksiyonunu kullanarak sonucu görüntülemeye çalışın.

// Dizinin alınan son öğesini görüntüle var resAlert \u003d alert (lastEl); var testi; writeText (resAlert); // tanımsız writeText (test); // Tanımsız

Gördüğünüz gibi, her iki durumda da değer tanımsızdır.

Global ve yerel değişkenler

Global Değişkenler işlevin dışında bildirilen değişkenlerdir. Yani, tüm bu değişkenler işlevin içinde beyan edilmemiştir, küreseldir... Belge boyunca görülebilir (geçerli).

Yerel Değişkenler bu değişkenler mi işlevin içinde beyan edildi... Ve sadece verilen fonksiyon içinde geçerlidirler. Bunun dışında yerel değişkenler artık çalışmayacaktır.

Yerel ve global değişkenler hiçbir şekilde ilişkili değildir.

Resimdeki örnekte, x değişkeninin içeriğini görüntülemeye çalışırsak, mesajı alırdık tanımsızçünkü other () işlevini çağırmayı unuttuk.

Bu nedenle fonksiyon içerisinde yapılan değişikliklerin çalışabilmesi için bu fonksiyonu çağırmak gerekir.

İşlevi diğer () olarak adlandırıyoruz ve şimdi x değişkeninin değerini görüntülemeye çalışırsak, sonuç olarak 4 sayısını göreceğiz.

Bir fonksiyonun içinden global bir değişkene erişmek için hiçbir şey yapmanız gerekmez, sadece onu kullanmanız gerekir. Global değişkenlerde yapılan değişiklikler, fonksiyonun dışında görünecektir.

Var x \u003d 8; function increment () (x ++;) // function increment () increment () çağırın; uyarı (x); // Sonuç: 9

Global değişkenin değişmesini istemiyorsak, yerel bir değişken bildirmek gerekir (global olanla aynı isimle mümkündür) ve tüm eylemler onun üzerinde gerçekleştirilecektir.

Var g \u003d 100; function func () (var g \u003d 14; g * \u003d 2; // Bu, g \u003d g * 2 ile aynıdır alert (g); // Sonuç: 28) // İşlevi çağırın. func (); alert (g); // Sonuç: 100

Hepsi bu kadar sevgili okuyucular, şimdi biliyorsun işlev nedir, işlevinizi nasıl yaratırsınızişlevin nasıl çağrılacağı ve hangi tür işlevlerin mevcut olduğu. Ne olduğunu da öğrendin genel ve yerel değişkenler.

Yazının başında yazdığım gibi fonksiyonlar çok önemli unsurlardırbu yüzden onları çok iyi tanımalısınız.

Görevler

1. Parametre olarak iki sayıyı alan ve bu sayıların çarpımını döndüren bir işlev oluşturun.
2. Alınan sonucu yazdırın.