Más contenido relacionado La actualidad más candente (20) Workshop Teknis Javascript SMK Telkom Sandhy Putra Malang1. Belajar Ajax dengan jQuery dan VueJs
By : Edi Santoso
Events :
Workshop teknis javascript
7 November 2015
SMK Telkom Sandhy Putra Malang
2. About me...
Nothing special …
Backend Developer
PHP (Laravel Framework & Ruby On Rails)
Frontend Developer
(jQuery, Vue.js, AngularJs, Bootstrap and
Material Design)
4. The preparation (source code)...
Clone the repo
https://github.com/cyberid41/belajar-ajax-dengan-
jquery-dan-vuejs
6. jQuery...
● memanipulasi DOM
● Memisahkan JavaScript dan HTML
● Syntax Singkat dan Jelas
● Mengatasi masalah kompatibilitas
antar-browser
● Ekstensibel
http://ekajogja.com/jquery-definisi-fitur-penggunaan
-jquery-dalam-pengembangan-website/
8. .text() .removeClass .addClass()
function changeClass() {
var name = $("#class-name").val();
$("#display-class-
name").text(name).removeClass('help-
block').addClass("text-success");
console.log(name);
}
10. .removeClass() .addClass()
// remove class hide
function showForm() {
$("#myForm").removeClass("hide");
}
// add class hide
function hideForm() {
$("#myForm").addClass("hide");
}
11. .onkeyup()
// Event key up
function eventKeyUp(val) {
console.log(val);
$("#display-cari").text(val);
}
// html
<input id="cari" class="form-control"
onkeyup="eventKeyUp(this.value)">
12. .onkeypress()
// Event key down
function eventKeyDown(val) {
console.log(val);
$("#display-cari1").text(val);
}
// html
<input id="cari1" class="form-control"
onkeypress="eventKeyDown(this.value)">
16. Two way data binding...
// js
new Vue({
el: '#way',
data: {
message: 'Hello Vue.js!'
}
});
// html
<div class="form-group" id="way">
<label>Text Input</label>
<input class="form-control" v-model="message">
<p class="help-block">{{ message }}</p>
</div>
17. Render a list...
// Menampilkan list data
new Vue({
el: '#list',
data: {
todos: [
{text: 'Learn JavaScript'},
{text: 'Learn Vue.js'},
{text: 'Build Something Awesome'}
]
}
});
// html
<div class="panel-body" id="list">
<ul class="list-group">
<li class="list-group-item" v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
18. Render a list (part 1)...
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{text: 'Add some todos'}
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({text: text})
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})
19. Render a list (part 2)...
<div class="form-group" id="app">
<input class="form-control" v-model="newTodo" v-on:keyup.enter="addTodo">
<span class="clearfix"><hr></span>
<ul class="list-group">
<li class="list-group-item" v-for="todo in todos">
{{ todo.text }}
<span class="pull-right">
<button v-on:click="removeTodo($index)"
class="btn btn-danger fa fa-trash-o">
</button></span>
</li>
</ul>
</div>