HOW TO CREATE JAVASCRIPT FRAMEWORK .insert() BY YOURSELF | JAVASCRIPT | INSERTED TEXT OR HTML

Diposting oleh pada tanggal
HOW TO CREATE JAVASCRIPT FRAMEWORK .insert() BY YOURSELF | JAVASCRIPT | INSERTED TEXT OR HTML




What is framework .insert() ?
The framework .insert() is used for inserting "text" or "HTML". Usually, In javascript we using InnerHTML and appendChild(), in this tutorial we learn to insert text or html using one of them in framework.

How to create javascript framework .insert() ?
The demo below is easy in use for presentation the framework .insert(). You enter text or HTML and click insert, and it's will displayed on div element. On this demo the system using insert() to inserting them. We will discuss one by one after you try this demo.
Remember in this article we not discuss framework .click(). You have to read about framework click() on this blog before you read all article about framework, because we using .click() to call .insert() or other framework.





<br />




Hello guys, Welcome to
KarimMuhaimin.blogspot.com
. This is the example of framework .Insert()







Step by step to create framework .insert() :

1. First, create a HTML file. Next, write a form with button and a div element (Don't forget to add id and class).
Example:




<div class="wrapper">
< form onsubmit="return false">
<input type="text" name="text" id="txt" placeholder="Enter something" class="text" value="">
<button id="myBt" class="myBtn"> Insert
</button>
<form>
</div>

<div class="myDemo" id="myD"> Hello guys, Welcome to
KarimMuhaimin.blogspot.com. This is the example of framework .Insert()
</div>


2. After that, create a css file to make the form, button and div element more cool.
Example:




.wrapper
{
width : 100%;
padding : 6px 12px;
margin-bottom : 15px;
}

input
{
background-color : #f5f5f5;
color : #222222;
border-radius : 2px;
border : none;
padding : 6px 12px;
width : 50%;
-webkit-box-shadow : inset 0px 3px 5px rgba(0,0,0,.5);
box-shadow : inset 0px 3px 5px rgba(0,0,0,.5);
}

.myBtn
{
width : 30%;
padding : 6px 12px;
background-color : #ffbb00;
border : none;
border-radius : 2px;
margin : auto;
-webkit-box-shadow : inset 0px 3px 5px rgba(0,0,0,.5);
box-shadow : inset 0px 3px 5px rgba(0,0,0,.5);
}

.myDemo
{
min-height : 16px;
padding : 6px 12px;
color : #787878;
background-color : #f5f5f5;
border : none;
margin : 5px;
-webkit-box-shadow : 0px 3px 9px rgba(0,0,0,.5), inset 0px 3px 5px rgba(0,0,0,.5);
box-shadow : 0px 3px 9px rgba(0,0,0,.5), inset 0px 3px 5px rgba(0,0,0,.5);
}

3. And than, create a framework .insert(). Remember We not discuss an article about framework click(), we direct to discuss the framework .insert().
Create two variable, that is: var KarimMuhaiminBlog (or other name what you like) and var $ (dollars).

Example:



var KarimMuhaiminBlog; var $

4. And than, insert a function with selector into KarimMuhaiminBlog variable.
Example:



var KarimMuhaiminBlog = function(selector){}

5. Next, insert the DOM ( Document Object Model) into the function. Use document.querySelector() or document.getElementById(). Don't forget to create e or element variable.

Example:


var KarimMuhaiminBlog = function(selector) {
var e = document.querySelector(selector) || document.getElementById(selector);

}

6. After that, create an object and function with selector but use different name, We direct to this.insert() (to create object) = function(text){} (to create a function).

Example:




var KarimMuhaiminBlog = function(selector) {
var e = document.querySelector(selector) || document.getElementById(selector);
this.insert = function(text) {
};
};


7. And than, insert element.innerHTML or element.appendChild() ( not recomended) into this.insert = function(text){ code here } .
Example:



var KarimMuhaiminBlog = function(selector) {
var e = document.querySelector(selector)
|| document.getElementById(selector);
this.insert = function(text) {
return e.innerHTML = text;
};
};

8. Next, if the framework is callback, create a new function using var $.

Example:



var $ = function(selector){
return new KarimMuhaiminBlog(selector);}

9. Finally, test your framework code using
$('button id or class').click(function() {
var el = document.getElementById('txt').value;
el ? $('id or class').insert(el) : $('id or class').insert('Enter text or HTML');
;
});

. this code is like the demo above, but if you want to insert text or HTML on load you can test using this code
$('#myD').insert('Enter your text or HTML');
.
Example:




$('#myBt').click(function() {
var el = document.getElementById('txt').value;
el ? $('#myD').insert(el) : $('#myD').insert('Enter text or HTML');
;
});

What is the full code of this tutorial ?
You can copy the code below for free. Try it yourself.



What's next ?
How to create javascript framework .append() by yourself (coming soon)

Komentar

Posting Komentar