Alokasi tempat untuk DOM

Topik sebelumnya Topik selanjutnya Go down

Alokasi tempat untuk DOM

Post  Admin on Sun Dec 09, 2012 6:46 pm

AWW

Rekans sekalians, inilah thread khusus untuk anda menuliskan tentang DOM. Perhatikan ketentuannya:

  • Pekerjaan individual, tiap peserta kuliah Web 1 wajib menuliskan jawabannya
  • 2 paragraf saja, + 1 paragraf contoh penggunaan (juga secara konseptual)
  • Tidak boleh sama persis dengan jawaban yang lain

Penjelasan: 2 paragraf jawaban agar tidak terlalu banyak, maks tiap paragraf berisi 5 kalimat (minimal 2 kalimat), panjang maks 10 baris tiap paragraf. Jawaban harus berupa pemikiran sendiri, ringkasan dari beragam sumber wacana yang anda dapatkan. Dilarang memindahkan isi suatu halaman web begitu saja sebagai jawaban anda. Karena merupakan ringkasan individual, maka kalau ada jawaban yang sama dengan jawaban yang sudah masuk sebelumnya otomatis jawaban berikutnya yang serupa itu tidak akan dianggap ada (nilai 0,00).

Mengapa meringkas menjadi penting? Ini dikarenakan anda harus paham dengan yang anda baca. Sehingga manakala dalam ujian muncul soal-soal yang didasarkan atas tugas yang pernah diberikan kepada anda, anda tidak akan kesulitan menjawabnya. Memang tidak akan sama persis seperti dalam tugas, tetapi bila anda telah memiliki pemahaman, tinggal dihubungkan saja jawabannya.

OK silakan mulai menuliskan, ditunggu sampai besok senin (10/12) maks jam 17.00 (extended/diperpanjang dari waktu sebelumnya).

WWW
by TTx
avatar
Admin
Admin

Jumlah posting : 959
Join date : 20.09.12
Lokasi : Yogyakartun

Lihat profil user http://blog.uad.ac.id/ttx

Kembali Ke Atas Go down

Apa itu Document Object Model (DOM)

Post  fendra mudanta on Sun Dec 09, 2012 11:10 pm

cheers Nama:Fendra Mudanta cheers
Nim:11016018
Prodi:Sistem Informasi


Pengertian dari Document Object Model (DOM)

Paragraf 1.
-Document Object Model (DOM) adalah object standar untuk HTML dan XML yang sifatnya platform independent.
-Web browser tidak harus terpaku menggunakan DOM kalau cuma untuk menampilkan HTML saja.
-Untuk tampilan website yang dinamis DOM menjadi peran penting yang akan diperlukan oleh JavaScript atau jelasnya Javascript bisa melihat suatu halaman HTML dengan menggunakan DOM.
-DOM adalah pengembangan yang dilakukan oleh W3C tahun 1990-an bulan Oktober 1998 dan DOM 1,pun dibuwat.
-Ada beberapa Tingkat dalam spesifikasi DOM W3C, pada halaman website harus ada syarat level untuk mendukung suatu level tersebut.
Paraagraf 2.
-Dengan tidak adanya DOM dari W3C, web browser akan memiliki DOM sendiri dan sebagai dampaknya, jika dalam website mau menampilkannya secara cross-browser compatible,solusinya harus merancang dalam setiap web browser yang akan di dukung.
-Dan dengan adanya DOM keuntungannya adalah yaitu sudah menjadi standar mempermudah kita dalam mengembangkan aplikasi di dalam web.
-DOM dibagi dalam 3 Level yaitu Core DOM adalah Model Standar untuk -Dokumen terstruktur, HTML DOM adalah Model Standar untuk Dokumen HTML, XML DOM adalah Model Standar untuk Doukumen XML.


Sampel penggunaan secara konseptual dari Document Object Model (DOM)


1. HTML DOM

Model Objek Standar untuk HTML, Standar Interface programming untuk HTML, Platform dan Bahasa Bebas/independent, Standard W3C.
Definisi objek dan properti dari semua elemen HTML dan ada method - method untuk mengakses semua elemen tersebut.
Bagan HTML DOM meliputi:dari Document,ke Root element:<html>,dan terbagi menjadi dua cabang yang pertama ke Element:<head>,Element:<title>,Text:"My title",Dan yang kedua ke bagan atau ke cabang Element:<body>,Samapai di sinipun masih terbagi menjadi dua yaitu ke Attribute:"href",Element:<a>, lau ke Text:"My link",Dan ke ELement:<h1>,lalu ke Text: "My header"
Adapun objek HTML DOM meliputi:Document object,Anchor object,Area object,Base object,Body object,Button object,Event object,Form object,Frame object,Frameset object,IFrame object,Image object,Input Button object,Input Checkbox object,Input File object,Input Hidden object,Input Password object,Input Radio object,Input Reset object,Input Submit object,Input Text object,Link object,Meta object,Object object,Option object,Select object,Style object,Table object,TableCell object,TableRow object,Textarea object
2. XML DOM
Definisi Sebuah standar akses dan memanipulasi XML.
tampilan Dokumen XML yaitu seperti Struktur pohon.DOM tree pun dapat membantu mengakses semua elemen.konten dari XML berupa teks dan atribut - atribut yang dapat dimodifikasi dan dihapus atau dapat dibuat elemen baru.Elemen - elemennya Teks dan atribut disebut Node.
sampel mendapatkan teks dari <to> sebuah elemen dengan:xmlDoc.getElementsByTagName(“to”)[0].childNodes[0].nodeValue.
xmlDoc – the XML document created by the parser,getElementsByTagName(“to”)[0] – the first <to> element,childNodes[0] – the first child of the <to> element (the text node),nodeValue – the value of the node (the text itself).
Untuk pastinya seperti contoh script tersebut:
<html>
<body>
<h1>W3Schools Internal Note</h1>
<p><b>To:</b> <span id=”to”></span><br />
<b>From:</b> <span id=”from”></span><br />
<b>Message:</b> <span id=”message”></span>
<script type=”text/javascript”>
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest()
}
else
{
xhttp=new ActiveXObject(“Microsoft.XMLHTTP”)
}
xhttp.open(“GET”,”note.xml”,false);
xhttp.send(“”);
xmlDoc=xhttp.responseXML;
document.getElementById(“to”).innerHTML=
xmlDoc.getElementsByTagName(“to”)[0].childNodes[0].nodeValue;
document.getElementById(“from”).innerHTML=
xmlDoc.getElementsByTagName(“from”)[0].childNodes[0].nodeValue;
document.getElementById(“message”).innerHTML=
xmlDoc.getElementsByTagName(“body”)[0].childNodes[0].nodeValue;
</script>
</body>
</html>


fendra mudanta

Jumlah posting : 17
Join date : 26.09.12
Age : 25
Lokasi : BANTUL,YOGYAKARTA

Lihat profil user http://fendramudanta.byethost11.com

Kembali Ke Atas Go down

TUGAS ALOKASI TENTANG DOM

Post  luqman noviantoro on Mon Dec 10, 2012 3:57 am

NAMA :: LUQMAN NOVIANTORO
NIM :: 09016021
PRODI :: SISTEM INFORMASI

Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.

W3C mulai mengembangkan DOM pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya.

Sebelum ada standar DOM dari W3C, masing-masing web browser memiliki DOM sendiri. Akibatnya, bila suatu website ingin ditampilkan secara cross-browser compatible, ia harus dirancang untuk setiap web browser yang akan didukung. DOM standar mempermudah pengembangan aplikasi web.

1. HTML DOM

Model Objek Standar untuk HTML
Standar Interface programming untuk HTML
Platform dan Bahasa Bebas/independent
Standard W3C

Definisi : objek dan properti dari semua elemen HTML dan ada mehod2 untuk mengakses semua elemen tersebut.

Bagan HTML DOM :http://www.w3schools.com/htmldom/htmltree.gif


Objek HTML DOM!

Document object
Anchor object
Area object
Base object
Body object
Button object
Event object
Form object
Frame object
Frameset object
IFrame object
Image object
Input Button object
Input Checkbox object
Input File object
Input Hidden object
Input Password object
Input Radio object
Input Reset object
Input Submit object
Input Text object
Link object
Meta object
Object object
Option object
Select object
Style object
Table object
TableCell object
TableRow object
Textarea object

2. XML DOM

Definisi : Sebuah standar untuk mengakses dan memanipulasi XML.

View dari Dokumen XML adalah seperti Struktur pohon.semua elemen dapat diakses melalui DOM tree. konten dari XML berupa teks dan atribut2 dapat dimodifikasi dan dihapus atau dapat dibuat elemen baru. Elemen2nya, Teks dan atribut dikenal dengan Node.

contoh untuk mendapatkan suatu teks dari <to> sebuah elemen :

xmlDoc.getElementsByTagName(“to”)[0].childNodes[0].nodeValue

xmlDoc – the XML document created by the parser.
getElementsByTagName(“to”)[0] – the first <to> element
childNodes[0] – the first child of the <to> element (the text node)
nodeValue – the value of the node (the text itself)

Untuk mengetahui secara pasti coba aja skrip ini :

<html>
<body>
<h1>W3Schools Internal Note</h1>
<p><b>To:</b> <span id=”to”></span><br />
<b>From:</b> <span id=”from”></span><br />
<b>Message:</b> <span id=”message”></span>

<script type=”text/javascript”>
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest()
}
else
{
xhttp=new ActiveXObject(“Microsoft.XMLHTTP”)
}
xhttp.open(“GET”,”note.xml”,false);
xhttp.send(“”);
xmlDoc=xhttp.responseXML;

document.getElementById(“to”).innerHTML=
xmlDoc.getElementsByTagName(“to”)[0].childNodes[0].nodeValue;
document.getElementById(“from”).innerHTML=
xmlDoc.getElementsByTagName(“from”)[0].childNodes[0].nodeValue;
document.getElementById(“message”).innerHTML=
xmlDoc.getElementsByTagName(“body”)[0].childNodes[0].nodeValue;
</script>

</body>
</html>[table]
[left]
avatar
luqman noviantoro

Jumlah posting : 13
Join date : 05.10.12
Age : 25
Lokasi : PURWOREJO JAWATENGAH

Lihat profil user http://www.luqman.byethost7.com

Kembali Ke Atas Go down

tugas DOM

Post  agung pribadi on Mon Dec 10, 2012 6:21 am

Pengertian DOM: Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independen. Javascript memerlukan DOM yang digunakan untuk mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.
DOM mulai dikembangkan oleh W3C pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya. DOM standar mempermudah pengembangan aplikasi web.


Contoh Penggunaan DOM dengan Javascript
Berikut adalah beberapa contoh kode javascript penggunaan akses DOM dengan penggunaan method getElementsById dan hasil eksekusinya.

________________________________________

<html>
<head>
<title>Contoh Penggunaan DOM</title>
</head>
<body>
<div>
<span id="pertama">
Halo
</span>
<span>
<font color="blue">Internet</font>
</span>
</div>
<script type="text/javascript">
alert(document.getElementById("pertama"));
</script>
</body>
</html>

Hasil Eksekusi dengan Google Chrome :

[You must be registered and logged in to see this link.]





Contoh di atas akan mengakses elemen HTML dengan atribut ID dan kemudian menampilkan nama objek DOM terkait, yaitu objek HTMLSpanElement.

Dan contoh berikut menampilkan isi teks HTML dari objek tersebut dengan menggunakan property innerHTML.

________________________________________

<html>
<head>
<title>Contoh Penggunaan DOM</title>
</head>
<body>
<div>
<span id="pertama">
Halo
</span>
<span>
<font color="blue">Internet</font>
</span>
</div>
<script type="text/javascript">
alert(document.getElementById("pertama").innerHTML);
</script>
</body>
</html>

Hasil Eksekusi dengan Google Chrome :

[You must be registered and logged in to see this link.]



agung pribadi

Jumlah posting : 26
Join date : 27.09.12

Lihat profil user http://agungpribadih.byethost3.com/

Kembali Ke Atas Go down

tugas DOM

Post  agung pribadi on Mon Dec 10, 2012 6:23 am

Nama : Agung Pribadi Hamid
Nim : 11B16011

Pengertian DOM: Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independen. Javascript memerlukan DOM yang digunakan untuk mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.
DOM mulai dikembangkan oleh W3C pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya. DOM standar mempermudah pengembangan aplikasi web.


Contoh Penggunaan DOM dengan Javascript
Berikut adalah beberapa contoh kode javascript penggunaan akses DOM dengan penggunaan method getElementsById dan hasil eksekusinya.

________________________________________

<html>
<head>
<title>Contoh Penggunaan DOM</title>
</head>
<body>
<div>
<span id="pertama">
Halo
</span>
<span>
<font color="blue">Internet</font>
</span>
</div>
<script type="text/javascript">
alert(document.getElementById("pertama"));
</script>
</body>
</html>

Hasil Eksekusi dengan Google Chrome :

[You must be registered and logged in to see this link.]





Contoh di atas akan mengakses elemen HTML dengan atribut ID dan kemudian menampilkan nama objek DOM terkait, yaitu objek HTMLSpanElement.

Dan contoh berikut menampilkan isi teks HTML dari objek tersebut dengan menggunakan property innerHTML.

________________________________________

<html>
<head>
<title>Contoh Penggunaan DOM</title>
</head>
<body>
<div>
<span id="pertama">
Halo
</span>
<span>
<font color="blue">Internet</font>
</span>
</div>
<script type="text/javascript">
alert(document.getElementById("pertama").innerHTML);
</script>
</body>
</html>

Hasil Eksekusi dengan Google Chrome :

[You must be registered and logged in to see this link.]



agung pribadi

Jumlah posting : 26
Join date : 27.09.12

Lihat profil user http://agungpribadih.byethost3.com/

Kembali Ke Atas Go down

Pengertian DOM

Post  M Maskhun Sofwan H.P on Mon Dec 10, 2012 9:02 am

DOM di sini merupakan singkatan dari Document Object Model. DOM adalah
standard atau platform terbaru dari W3C (World Wide Web Consortium)
yang memungkinkan untuk mengakses dan mengupdate dokumen HTML secara
dinamis. Tidak hanya konten dokumen saja yang bisa diakses dan diupdate
dengan DOM namun juga struktur beserta stylenya.Untuk menjembatani HTML dengan DOM, di dalam Javascript sudah mulai mendukung platform DOM ini.Konsep DOM dalam Javascript adalah memandang elemen dokumen sebagai suatu object. Seperti halnya konsep OOP, object ini bisa memuat method
dan properties. Selanjutnya untuk pemrosesan object-object dalam
dokumen HTML menggunakan method dan properties tersebut.
Sebagai gambaran aplikasi yang menggunakan DOM, perhatikan contoh dokumen HTML berikut ini

Penggunaan DOM dalam web


<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="pic_bulboff.gif";
}
else
{
element.src="pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" border="0" src="pic_bulboff.gif" width="100" height="180">
<p>Click to turn on/off the light</p>

</body>
</html>
avatar
M Maskhun Sofwan H.P

Jumlah posting : 14
Join date : 22.09.12
Lokasi : sleman,selomartani ,kalasan ,sleman

Lihat profil user

Kembali Ke Atas Go down

Re: Alokasi tempat untuk DOM

Post  Anggini Dian Oktami on Mon Dec 10, 2012 9:37 am

11016013 Anggini Dian Oktami
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

DOM adalah bahasa untuk mengakses dan memanipulasi dokumen HTML. DOM juga digunakan untuk memeriksa, browsing, dan mengedit Document Object Model dokumen - biasanya halaman web atau jendela XUL.

DOM dibagi menjadi tiga bagian yakni Core DOM (Model Standar untuk Dokumen terstruktur), HTML DOM (Model Standar untuk Dokumen HTML), XML DOM (Model Standar untuk Doukumen XML).

Contohnya :
...getElementById( ..
.. createElement ..
.. parentNode.removeChild( ...

<html>
<head><title>DOM</title>
</head>
<body>
Teks biasa <br>
<table id="dom"><tr><td>one</td>
<td>two</td>
<td>three</td></tr>
<tr><td>four</td>
<td>five</td>
<td>six</td></tr></table>
<br><br><br>
Ini text yang dihasilkan Dom :<br>
<script type="text/javascript">
x=document.getElementById("dom").getElementsByTagName("td");
for (i=0;i<x.length;i++){
document.write(x[i].innerHTML);
document.write("<br>");
}
</script>
</body>
</html>
avatar
Anggini Dian Oktami

Jumlah posting : 22
Join date : 25.09.12
Age : 25
Lokasi : Galagahsari, Yogyakarta

Lihat profil user http://Anggini13.webatu.com

Kembali Ke Atas Go down

tugas DOM

Post  utari puspitarini on Mon Dec 10, 2012 10:33 am

Nama : Utari Puspitar
Nim : 10016009






DOM adalah standard atau platform terbaru dari W3C (World Wide Web Consortium) yang memungkinkan untuk mengakses dan mengupdate dokumen HTML secara dinamis. Tidak hanya konten dokumen saja yang bisa diakses dan diupdate dengan DOM namun juga struktur beserta stylenya. Konsep DOM dalam Javascript adalah memandang elemen dokumen sebagai suatu object. Seperti halnya konsep OOP, object ini bisa memuat method dan properties. Selanjutnya untuk pemrosesan object-object dalam dokumen HTML menggunakan method dan properties tersebut.


Kita dapat mengakses DOM dengan Javascript seperti berikut ini:
/* Mendapatkan element <div id="teknik"> */
var teknik = document.getElementById('teknik');

/* Mendapatkan element <div id="fakultas"> */
var fakultas = document.getElementById('fakultas');

/*
* Mendapatkan semua element div, dengan hasil
* array element berikut:
*
* Array(<div id="fakultas">,
* <div id="teknik">,
* <div id="if">,
* <div id="mi">)
*
*/
var divs = document.getElementsByTagName('div');

/* Mengambil Element dari hasil getElementsByTagName */
var fakultas_2 = divs[0];
var teknik_2 = divs[1];
var if = divs[2];
var mi = divs[3];

/* Mengambil parent dari fakultas, yaitu <body> */
var el_body = fakultas.parentNode;

/* Mengambil parent dari mi, yaitu <div id="teknik"> */
var el_body = mi.parentNode;

/* Mengambil firstChild dari teknik, yaitu <b>Ekonomi</b> */
var ekonomi = fakultas.firstChild;

/* Mengambil tetangga dari ekonomi, yaitu <b>Bahasa</b> */
var bahasa = ekonomi.nextSibling;

/* Mengambil tetangga dari bahasa, yaitu <a href="/">Hukum</a> */
var hukum = bahasa.nextSibling;

utari puspitarini

Jumlah posting : 4
Join date : 28.09.12

Lihat profil user http://utarinii.beythost33.com

Kembali Ke Atas Go down

TUGAS DOM

Post  aga rahmatullah on Mon Dec 10, 2012 10:47 am

Nama : Aga Rahmatullah
NIM : 10016005 (10016005)



Setahu saya Document Object Model yang disingkat dengan (DOM) semacam jembatan antara bahasa pemrograman dengan documen.

DOM akan menyusun hirarki document (yang notabene adalah html, xml bahkan javascript sendiri(JSON)) sebagai bentuk object yang dapat diakses dengan bahasa pemrograman javascript misalnya.

Contoh penerapan HTML DOM
Validasi isian (medan, field, input-teks) kosong

<html>
<head>
<script type="text/javascript">
function cek()
{
if(document.getElementById("id_nomhs").value=="")
alert("Ora oleh kosong lho");
}
</script>
</head>
<body>
Nomor Mahasiswa <input type="text" name="nm_nomhs" id="id_nomhs">
<input type="button" value="OK" onClick="cek()">
</body>
</html>



aga rahmatullah

Jumlah posting : 9
Join date : 24.09.12

Lihat profil user

Kembali Ke Atas Go down

Tugas DOM

Post  Atma Turida on Mon Dec 10, 2012 10:51 am

nama : Atma Turida
Nim : 11016017

Document Object Model (DOM) adalah rekomendasi dari W3C untuk melakukan proses terhadap dokumen terstruktur seperti XML dan HTML. DOM didefinisikan sebagai sebuah spesifikasi Application Programming Interface (API) yang bebas bahasa dan platform. DOM mendefinisikan struktur lojik dokumen serta cara untuk melakukan manipulasi dan akses terhadap dokumen tersebut. Saat ini W3C telah mengeluarkan tiga buah rekomendasi untuk DOM yaitu DOM Level 1, DOM Level 2 dan DOM Level 3. DOM akan membentuk representasi logik dokumen terstruktur yang akan dimanipulasi dalam struktur pohon. Manipulasi terhadap bagian isi dari dokumen dilakukan dengan manipulasi terhadap elemen-elemen pohon ini. W3C telah menspesifikasikan beberapa prosedur untuk melakukan manipulasi terhadap struktur pohon DOM. Prosedur tersebut meliputi penambahan (adding), penghapusan (deleting) dan pemutakhiran (updating).

Untuk memanipulasi dokumen dengan DOM, suatu parser akan membentuk representasi logik dari bagian isi dokumen XML dalam bentuk struktur pohon. DOM tidak menjelaskan bagaimana melakukan parsing terhadap dokumen, pembuatan dokumen baru ataupun melakukan serialisasi terhadap dokumen. Hal ini dikarenakan DOM adalah spesifikasi yang bebas bahasa. Untuk melakukan fungsi-fungsi tersebut dibutuhkan DOM parser yang diimplementasikan kedalam berbagai bahasa pemrograman tertentu seperti C, C++, atau Java. Beberapa contoh DOM parser adalah Apache Xerces, Crimson, Oracle XML Parser for Java atau MsXML.

Contoh Penggunaan DOM
Cntohh: menggunakan konsep Jquery

$(document).ready(function(){
$('a').bind('click', function(){
//fungsi di sini ketika sebuah link diklik
});
});

Namun sayangnya, konsep bind ini hanya bisa dipakai pada batasan tertentu. Karena jQuery hanya mengikat DOM yang direload pertama kali, bind pada jQuery tidak akan mengikat DOM yang dibentuk setelah halaman ditampikan. Contohnya:

$(document).ready(function(){
$('a.add').bind('click', function(){
$(body).append("<p>Hello world</p>"); // menambahkan paragraf di akhir body
});
$('a.remove').bind('click', function(){
$('p:last').remove(); // this will not work Very Happy
});
});

Sebagai gantinya, jQuery menyediakan fungsi on() untuk memantau event secara terus menerus pada DOM yang saat ini digunakan. Contoh penggunakan live() dan on() diberikan pada potongan kode berikut.

$(document).ready(function(){
/* Contoh dengan menggunakan fungsi live() */
$("a.remove").live('click',function(){
$('p:last').remove();
});
/* Contoh dengan menggunakan fungsi on() */
$(document).on('click', "a.remove", function(){
$('p:last').remove();
});
});

avatar
Atma Turida

Jumlah posting : 21
Join date : 22.09.12

Lihat profil user http://atma.byethost17.com/

Kembali Ke Atas Go down

DOM

Post  Jesica indiarti on Mon Dec 10, 2012 11:04 am

Nama : Jesica Indiarti
Nim : 11016012

DOM (Document Object Model) adalah standard terbaru dari W3C (World Wide Web Consortium) ,DOM standar mempermudah pengembangan aplikasi web. DOM Sering di gunakan pada sebuah web ataupun app yang berjalan di atas web, karena dom merupakan suatu object model yang dapat memudahkan pengguna dalam meletakkan object itu. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya.Sebelum ada standar DOM dari W3C, masing-masing web browser memiliki DOM sendiri. Akibatnya, bila suatu website ingin ditampilkan secara cross-browser compatible, ia harus dirancang untuk setiap web browser yang akan didukung.

Activitas pengembangan DOM di W3C sudah ditutup sejak tahun 2004 dengan lengkapnya pengembangan DOM Level 3 Recommendations. Tapi saat ini W3C Web Applications Working Group sudah mulai bergerak untuk melakukan revisi.

Contoh Penggunaan DOM

<html>
<head>
<script type="text/javascript">
function ubahMerah()
{
document.body.style.backgroundColor="red";
}
function ubahKuning()
{
document.body.style.backgroundColor="yellow";
}
function ubahHijau()
{
document.body.style.backgroundColor="green";
}
</script>
</head>
<body>
<h1>Ubah Warna Halaman dengan DOM</h1>
<input type="button" name="merah" onclick="ubahMerah()" value="Ubah Jadi Merah" /><input type="button" name="merah" onclick="ubahKuning()" value="Ubah Jadi Kuning" />
<input type="button" name="merah" onclick="ubahHijau()" value="Ubah Jadi Hijau" />.
</body>
</html>

Script diatas kita gunakan untuk membuat aplikasi untuk dapat mengubah warna background,Untuk mengubah warna background dokumen dengan konsep DOM, kita menggunakan object ‘document’.Dalam halaman HTML tersebut terdapat tiga buah tombol untuk mengubah warna yaitu tombol pertama untuk mengubah warna background menjadi merah, tombol kedua untuk mengubah menjadi kuning dan hijau untuk yang ketiga.Pada tombol pertama, diberikan event onclick yang selanjutnya akan memanggil function ubahMerah(). Maksudnya adalah bila tombol ini diklik maka akan mentrigger function ubahMerah(). Hal yang sama juga diberikan pada tombol kedua dan ketiga.

Berikut Hasil Screenshoot ny di browser :

Sebelum tombol di klik

[You must be registered and logged in to see this link.]



Ketika Tombol “ubah jadi merah di klik”
[You must be registered and logged in to see this link.]



Ketika Tombol “ubah jadi kuning di klik”
[You must be registered and logged in to see this link.]



Ketika Tombol “ubah jadi hijau di klik”
[You must be registered and logged in to see this link.]



avatar
Jesica indiarti

Jumlah posting : 16
Join date : 23.09.12
Age : 23
Lokasi : yogyakarta

Lihat profil user

Kembali Ke Atas Go down

Tgas DOM

Post  Baiq Widya Desita on Mon Dec 10, 2012 11:14 am

Nama : Baiq Widya Desita N
NIm : 11016010
Prodi : Sistem informasi

DOM adalah cara standar untuk merepresentasikan (menampilkan) dokumen-dokumen XML termasuk XHTML (XHTML termasuk dalam turunan dari XML). Standar ini dibuat oleh W3C (World Wide Web Consortium). Sebelum ada standar DOM dari W3C, masing-masing web browser memiliki DOM sendiri. Akibatnya, bila suatu website ingin ditampilkan secara cross-browser compatible, ia harus dirancang untuk setiap web browser yang akan didukung. DOM standar mempermudah pengembangan aplikasi web. Tetapi sekarang semua browser modern sudah compatible dengan standar DOM yang dibuat oleh W3C.

Walaupun DOM bukan merupakan cara yang tercepat, teringan, atau paling mudah untuk digunakan tetapi DOM adalah cara yang paling banyak dipakai oleh sebagian besar bahasa pemrograman web misalnya PHP, Javascript, Python, dan sebagainya. DOM dirancang sedemikian rupa sehingga lebih intuitif bagi programmer untuk menelusuri/mengekplorasi hierarki elemen dalam dokumen XML.

Contoh penggunaan Dom didalam javascript
<div id="coba">Ini adalah div coba</div>
<script>
function ubah(){
x=document.getElementById('coba');
x.innerHTML='Sekarang telah berubah';
}
function balik(){
x=document.getElementById('coba');
x.innerHTML='Ini adalah div coba';
}

</script>

<input type="submit" name="a" value="Ubah" onclick="ubah()"><input type="submit" name="b" value="Kembalikan" onclick="balik()">

Hasilnya :
[You must be registered and logged in to see this link.]

avatar
Baiq Widya Desita

Jumlah posting : 16
Join date : 25.09.12

Lihat profil user

Kembali Ke Atas Go down

pengertian DOM dan Penggunaannya...

Post  adhy sanjaya on Mon Dec 10, 2012 12:57 pm

Nama : Adhy Sanjaya
NIM : 11016001
Prodi : Sistem Informasi

1. Pengertian DOM :
DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.DOM standar mempermudah pengembangan aplikasi web.
DOM : (document object model) XML DOM mendefinisikan sebuah cara standard untuk mengakses dan memanipulasi dokumen XML dan DOM merepresentasikan dokumen XML sebagai tree-structure.

Berikut ini contoh penggunaan DOM menggunakan javascript menggunakan function getElementById().

<html>
<head>
<script type="text/javascript">
function getHTMLText()
{
var x=document.getElementById(" elem1 ");
alert(x.innerHTML);
}
</script>
</head>
<body>
<a href="#" id="elem1" onclick="getHTMLText()">Klik di sini!</a>
</body>
</html>

Selain menggunakan getElementById(), kita juga bisa menggunakan getElementByTagName() untuk mengakses elemen DOM. Dengan menggunakan framework javascript seperti JQuery, kita bisa mengakses elemen DOM dengan cara yang lebih mudah dan sederhana.
avatar
adhy sanjaya

Jumlah posting : 9
Join date : 23.09.12

Lihat profil user

Kembali Ke Atas Go down

Tugas DOM

Post  DEWI ARUM SARI 1 on Mon Dec 10, 2012 3:05 pm

Like a Star @ heaven DOM = tag-tag HTML itu sendiri, cuman karena yang menggunakannya adalah javascript maka dikasih nama dengan DOM
Like a Star @ heaven DOM adalah cara JavaScript melihat suatu halaman HTML.
Like a Star @ heaven DOM bisa disimpulkan sebagai interface dari tiap browser yang digunakan untuk merujuk elemen-elemen tertentu pada halaman web / HTML. 
Like a Star @ heaven Struktur objek-objek DOM biasanya bersifat hierarkis karena banyak elemen HTML adalah "anak" atau bagian dari elemen lainnya. Sebagai contoh, elemen text input adalah anak dari elemen form.
Like a Star @ heaven Struktur DOM
Struktur DOM sangat erat kaitannya dengan susunan struktur elemen-elemen pada dokumen HTML dan XML. Hanya saja elemen-elemen tersebut "diterjemahkan" sebagai objek yang memiliki atribut / properti tertentu.
Sebagai contoh berikut adalah contoh komposisi beberapa elemen HTML.

<div>
<span>
Halo
</span>
<span>
<font color="blue">Internet</font>saq
</span>
</div>

Like a Star @ heaven DOM Document Object Model merupakan objek yang terdapat dalam halaman Web/HTML berupa element-element tag html, atribut tag, sampai style css suatu element tersebut.
Mengakses Element DOM dengan Javascript
Untuk mengakses element HTML dengan menggunakan Javascript ada beberapa cara, diantaranya dengan menggunakan beberapa perintah di bawah ini:
* document.getElementById('id_element') - dengan perintah ini Kita akan mendapatkan objek dari element yang dimaksud secara langsung, dan dapat digunakan secara langsung juga.
* document.getElementsByTagName('NAMA_TAG') - dengan perintah ini Kita akan mendapatkan array dari semua objek pada halaman yang memiliki nama tag sesuai dengan parameter yang dimasukan.
* element.parentNode - dengan perintah ini, Kita bisa mendapatkan object dari parent element (element di atasnya) untuk element yang dimaksud.
* element.firstChild - dengan perintah ini, Kita bisa mendapatkan object dari child element (element anaknya) pertama untuk element yang dimaksud.
* element.nextSibling - dengan perintah ini, Kita bisa mendapatkan object tetangga untuk element yang dimaksud.
Untuk lebih jelasnya, lihat contoh berikut:

<html>
<body>
<div id="fakultas">
<b>Ekonomi</b>
<b>Bahasa</b>
<a href="/">Hukum</a>
<div id="teknik">
<div id="if">Informatika</div>
<div id="mi">Manajemen Informatika</div>
<b>Teknik Komputer</b>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
/* Mendapatkan element <div id="teknik"> */
var teknik = document.getElementById('teknik');

/* Mendapatkan element <div id="fakultas"> */
var fakultas = document.getElementById('fakultas');

/*
* Mendapatkan semua element div, dengan hasil
* array element berikut:
*
* Array(<div id="fakultas">,
* <div id="teknik">,
* <div id="if">,
* <div id="mi">)
*
*/
var divs = document.getElementsByTagName('div');

/* Mengambil Element dari hasil getElementsByTagName */
var fakultas_2 = divs[0];
var teknik_2 = divs[1];
var if = divs[2];
var mi = divs[3];

/* Mengambil parent dari fakultas, yaitu <body> */
var el_body = fakultas.parentNode;

/* Mengambil parent dari mi, yaitu <div id="teknik"> */
var el_body = mi.parentNode;

/* Mengambil firstChild dari teknik, yaitu <b>Ekonomi</b> */
var ekonomi = fakultas.firstChild;

/* Mengambil tetangga dari ekonomi, yaitu <b>Bahasa</b> */
var bahasa = ekonomi.nextSibling;

/* Mengambil tetangga dari bahasa, yaitu <a href="/">Hukum</a> */
var hukum = bahasa.nextSibling;


avatar
DEWI ARUM SARI 1

Jumlah posting : 19
Join date : 22.09.12
Age : 24

Lihat profil user

Kembali Ke Atas Go down

Pengertian dan Contoh Penggunaan DOM

Post  Bayu Ikhsan Nugraha on Mon Dec 10, 2012 3:20 pm

Dari pengamatan saya DOM(Document Object Model) Sebuah objek yang memungkinkan kita dalam mempermudah tampilan dalam program java script yang secara dinamis agar kita bisa menikmati tampilan tersebut.

DOM adalah sebagai cara dalam memberikan kemudahan terhadap kontrol web browser anda atas Dokumen Objek.

CONTOH PENGGUNAAN DOM

<html>
<head>
<script type="text/javascript">
function cek()
{
if(document.getElementById("id_nomhs").value=="")
alert("Ora oleh kosong lho");
}
</script>
</head>
<body>
Nomor Mahasiswa <input type="text" name="nm_nomhs" id="id_nomhs">
<input type="button" value="OK" onClick="cek()">
</body>
</html>

mungkin itu saja yang saya Tahu
Terima Kasih Very Happy
avatar
Bayu Ikhsan Nugraha

Jumlah posting : 12
Join date : 22.09.12

Lihat profil user http://www.bayuikhsan.webatu.com

Kembali Ke Atas Go down

tugas DOM

Post  faris amrullah on Mon Dec 10, 2012 3:24 pm

ASSALAMUALAIKUM PAK,
NAMA:FARIS AMRULLAH UMAR
nim :11016009
DOM atau Document Object Model adalah object model standar yang digunakan untuk HTML dan XML yang bersifat platform independen yang memungkinkan program dan script untuk secara dinamis mengakses dan memperbaharui konten, struktur, dan gaya dari dokumen.

Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML, tapi DOM diperlukan oleh Javascript untuk mengubah tampilan sebuah website secara dinamis, dengan kata lain, DOM adalah cara Javascript melihat suatu halaman HTML.
ONTOH DOM
/home/labkom/Downloads/JKDOM.SVG.png
avatar
faris amrullah

Jumlah posting : 8
Join date : 28.09.12

Lihat profil user

Kembali Ke Atas Go down

RAMADHAN ANSYARI

Post  RAMADHAN ANSYARI on Mon Dec 10, 2012 3:38 pm

DOM, singkatan dari Document Object Model, adalah sebuah cross-platform dan sebuah
bahasa independen untuk merepresentasikan dan berinteraksi dengan objek dalam HTML,
XHTML, dan dokumen XML.
HTML DOM adalah cara baku untuk mengakses dan memanipulasi dokumen HTML.
Setiap dokumen HTML yang ditampilkan pada browser akan menjadi sebuah Document
Object.
Sebuah Document Object menyediakan akses ke semua elemen HTML di dalam halaman.
Setiap elemen HTML dapat diakses dengan JavaScript atau bahasa pemrograman lain.

Contoh dari penggunaan DOM adalah :
<html>
the title of the document is :
<script type="text/javascript">
document.title="HTML DOM";
ocument.write(document.title);
</script>

contoh 2;
<div id="pesan"></div>
<button onclick="tampiPesan()">Pesan</button>
<script type="text/javascript">
function tampilPesan()
{
var pesan = document.getElementById('pesan');
pesan.innerHTML = "<h3>SElamat Datang</h3>";
}
</script>
[You must be registered and logged in to see this link.]
avatar
RAMADHAN ANSYARI

Jumlah posting : 22
Join date : 26.09.12
Lokasi : Yogyakarta, Indonesia

Lihat profil user http://ramadhanansyari.net84.net

Kembali Ke Atas Go down

Pengertian Dom beserta samplenya

Post  Ruspandi on Mon Dec 10, 2012 5:10 pm

Nama: Ruspandi
Nim: 11016005

Untuk berbagai browser modern saat ini, objek teratas dari struktur DOM adalah Document. Dan kita dapat mengambil referensi dan mengakses berbagai objek lainnya pada halaman HTML dengan objek ini, karna dom memungkinkan kita untuk membuat script itu berjalan dengan semstinya dan dapat di baca oleh browser yang kita gunakan, tentu saja browser yang kita gunakan tidak semuanya bisa membaca script yang kita gunakan, makanya kita membutuhkan DOM

Document secara standar memiliki dua method untuk mengambil referesi dari objek HTML, yaitu :
getElementById : berfungsi mengambil objek tunggal dengan pengenal berupa atribut id dari objek tersebut.
getElementsByTagName : berfungsi mengembalikan daftar node (objek Nodelist) dari elemen-elemen dengan nama tag tertentu.

samplenya sbb:

<html>
<head>
<title>Sample DOM</title>
</head>
<body>
<div>
<span id="Terimaksih">
Halo
</span>
<span>
<font color="yellow">Internet</font>
</span>
</div>
<script type="text/javascript">
alert(document.getElementById("Terimakasih"));
</script>
</body>
</html>
avatar
Ruspandi

Jumlah posting : 7
Join date : 26.09.12
Age : 23

Lihat profil user

Kembali Ke Atas Go down

TUGAS DOM(DOCUMENT OBJECT MODEL)

Post  Hafni Dewi K on Mon Dec 10, 2012 10:27 pm

Nama : Hafni Dewi K
Nim : 09016032
Prodi : Sistem Informasi

-Document Object Model (DOM) adalah object model standar untuk HTML dan XML yang bersifat platform independent. Sebuah web browser tidak harus menggunakan DOM untuk menampilkan dokumen HTML. Namun DOM diperlukan oleh JavaScript yang akan mengubah tampilan sebuah website secara dinamis. Dengan kata lain, DOM adalah cara JavaScript melihat suatu halaman HTML.
-W3C mulai mengembangkan DOM pada awal 1990-an. Pada bulan Oktober 1998, DOM 1 diluncurkan. Spesifikasi DOM W3C terbagi menjadi beberapa tingkat. Sebuah halaman yang mendukung suatu level harus menerapkan semua persyaratan level tersebut dan di bawahnya.
-DOM akan membentuk representasi logik dokumen terstruktur yang akan dimanipulasi dalam struktur pohon. Manipulasi terhadap bagian isi dari dokumen dilakukan dengan manipulasi terhadap elemen-elemen pohon ini. W3C telah menspesifikasikan beberapa prosedur untuk melakukan manipulasi terhadap struktur pohon DOM. Prosedur tersebut meliputi penambahan (adding), penghapusan (deleting) dan pemutakhiran (updating).
• Berikut contoh bagaimana mengakses konten dokumen dengan menggunakan DOM , dengan contoh sederhana mengakses sebuah tag HTML <SPAN> dengan diberi ID=area dan mengubah warna text menjadi merah ketika mouse melintas pada area <SPAN>.
<head>
<title>Belajar DOM</title>
<script language="javascript">

function makeRed()
{
var obj = document.getElementById('area');
obj.style.color="red";
}

</script>
</head>

• Sintaks document.getElementById() digunakan untuk mengambil object yang ada pada Object document yang beinisial ID=area
<body>

<span style="color:green" id="area" onMouseOver="makeRed()">
Memulai Belajar JavaScript Document Object Model
</span>

</body>

• Anda juga dapat mengambil object konten web berdasarkan jenis TAG HTML nya, dengan menggunakan sintaks document.getElementsByTagName() , berikut contoh penggunaannya :
function makeBlue()
{
var obj = document.getElementsByTagName('span');
// diasumsikan adalah tag span yang pertama setelah tag <body>
obj[0].style.color="blue";
}

Hafni Dewi K

Jumlah posting : 6
Join date : 28.09.12

Lihat profil user

Kembali Ke Atas Go down

Mengenai DOM

Post  yuliaswandari on Tue Dec 11, 2012 8:27 am

Nama : Yulia Swandari
NIM : 10016020


DOM singkatan dari Document Object Model merupakan sebuah pemrograman antarmuka (API) yang memungkinkan programmer untuk mengakses dan memodifikasi dokumen HTML dan XML. DOM dikembangkan oleh World Wide Web Consortium (W3C) dan diperkenalkan pada tahun 1998. Dalam spesifikasi DOM, XML digunakan sebagai cara untuk mewakili berbagai macam informasi yang dapat disimpan dalam sistem yang beragam dan sebagian besar secara tradisional yang lebih terlihat sebagai data daripada dokumen.

DOM berasal sebagai spesifikasi untuk memungkinkan JavaScript script dan program Java untuk menjadi portabel antara browser web. Document Object Model terdiri dari dua tingkat implementasi antarmuka, yaitu DOM Core, yang mendukung XML dan merupakan dasar untuk tingkat berikutnya, dan DOM HTML, perluasan model untuk dokumen HTML.


Contoh penggunaan DOM pada HTML adalah mengubah atribut target pada sebuah link. Skrip javascriptnya sebagai berikut :
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><!DOCTYPE html> <html> <head> <script> function changeTarget() { document.getElementById('w3s').target="_blank"; } </script> </head> <body> <a id=w3s</span> <html> <head> <script> Fungsi changeTarget () {document.getElementById ('w3s') target = "_blank".;} <DOCTYPE html!> </ Script> </ head> <body> <a id = w3s</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">W3Schools</a> <br><br> <input type=button onclick=changeTarget() value="Change target"> <p>Try the link before and after you have pressed the button!</p> </body> </html></span> W3Schools </ a> <br> <input type=button <p> onclick=changeTarget() target"> value="Change Coba link sebelum dan setelah Anda menekan tombol </ p>! </ Body > </ html></span>
avatar
yuliaswandari

Jumlah posting : 10
Join date : 28.09.12

Lihat profil user http://tuliskoding.blogspot.com

Kembali Ke Atas Go down

Re: Alokasi tempat untuk DOM

Post  Sponsored content


Sponsored content


Kembali Ke Atas Go down

Topik sebelumnya Topik selanjutnya Kembali Ke Atas

- Similar topics

 
Permissions in this forum:
Anda tidak dapat menjawab topik