update doc

Getting-Started.html

@@ -0,0 +1,40 @@
+<div class="hero">
+    <div class="container">
+        <article class="message is-primary">
+            <div class="message-header">
+                <p>Clone</p>
+                <button class="delete" aria-label="delete"></button>
+            </div>
+            <div class="message-body">
+                <code>
+           git clone https://github.com/lamhotsimamora/GF-Javascript.git 
+        </code>
+            </div>
+        </article>
+        <hr>
+        <article class="message is-default">
+            <div class="message-header">
+                <p>CDN</p>
+                <button class="delete" aria-label="delete"></button>
+            </div>
+            <div class="message-body">
+                <code>
+             https://cdn.rawgit.com/lamhotsimamora/GF-Javascript/master/JS/GF-1.js
+          </code>
+
+            </div>
+        </article>
+        <article class="message is-default">
+            <div class="message-header">
+                <p>Enable / Disable Console Log</p>
+                <button class="delete" aria-label="delete"></button>
+            </div>
+            <div class="message-body">
+                You can enabled or disabled console log, if you want enabled the console log change the value of variabel
+                <code>
+          const run_console = false;
+        </code> True is enabled, and False is Disabled
+            </div>
+        </article>
+    </div>
+</div>

code/part-one.html

@@ -0,0 +1,90 @@
+<div class="container">
+		<div class="control">
+				<input type="text" class="input is-primary" placeholder="Username" id="txt_username" name=""></br></br>
+				<input type="text" class="input is-info" placeholder="Email" id="txt_email" name=""></br>
+				</br>
+				<button class="button is-info is-outlined" id="my_btn">Save</button>
+				<button class="button is-primary is-outlined" id="clear_btn">Clear</button>
+				<hr>
+		</div>
+
+		<article class="message is-primary">
+				For set focus to input text </br>
+				<code>
+					_focus("txt_username");
+				</code>
+				<hr>
+				For get value of input text
+				</br>
+				<code>
+					var txt_username = _getValById("txt_username");
+				</code>
+
+				<hr>
+				For clear input text
+				</br>
+				<code>
+					_clear("txt_username");
+				</code>
+				<hr>
+				For set value of input text
+				</br>
+				<code>
+					_setValue("txt_username","Lorem Ipsum");
+				</code>
+				<hr>
+
+		</article>
+
+		<article class="message is-success">
+			    For Inner HTML to element <button class="button is-info is-outlined" id="btn_print">Show</button>
+				</br>
+				<code>
+					_printTo("alert_display","Lorem Ipsum");
+				</code>
+				<div id="test_print"> </div>
+
+				<hr>
+				For clear element HTML <button class="button is-info is-outlined" id="btn_remove">Remove</button>
+				</br>
+				<code>
+					_clear("test_print",true);
+				</code>
+				</br>
+
+				<hr>
+				For give event on click to button <button class="button is-success is-outlined" id="btn_click">Click</button>
+				</br>
+				<code>
+					_onClick("btn_click",function(){
+					   alert("Do something here");
+					});
+				</code>
+				<hr>
+				For give event on double click to button <button class="button is-success is-outlined" id="btn_d_click">Double Click</button>
+				</br>
+				<code>
+					_onDClick("btn_d_click",function(){
+					   alert("Double Click, something here");
+					});
+				</code>
+
+				<hr>
+				For custom console log
+				</br>
+				<code>
+					_writeLog("This is Custom Console Log ! Color Red");
+				</code>
+				<hr>
+				<code>
+					_writeLog("This is Custom Console Log ! Color Green",false);
+				</code>
+				<hr>
+				For Inner HTML to Body Element <button class="button is-success is-outlined" id="btn_body">Body</button>
+				</br>
+				<code>
+					_writeBody("Lorem Ipsum");
+				</code>
+		</article>
+
+</div>

code/part-one.js

@@ -0,0 +1,64 @@
+_focus("txt_username");
+_setValue("txt_username","Lorem Ipsum");
+_setValue("txt_email","LoremIpsum@gmail.com");
+
+var txt_username = _getValById("txt_username");
+var txt_email    = _getValById("txt_email");
+
+
+_onClick("my_btn",function(){
+
+
+		if (txt_username==='')
+		{
+			_focus("txt_username");
+			return;	
+		}
+		else
+		{
+			 alert(txt_username);
+		}
+
+	   if (txt_email==='')
+	   {
+	   	   _focus("txt_email");
+
+	   	   return;	
+	   }
+	   else
+	   {
+
+	      alert("Your email "+txt_email);
+	   }
+
+});
+
+
+_onClick("clear_btn",function(){
+	_clear("txt_username");
+	_clear("txt_email");
+});
+
+
+_onClick("btn_print",function(){
+	_printTo("test_print",'<article class="message is-danger"> <div class="message-header"> <p><strong>Danger</strong>! <a>Learn more</a></p> <button class="delete" aria-label="delete"></button> </div> <div class="message-body"> Lorem Ipsum ! </div> </article>'); 
+});
+
+_onClick("btn_click",function(){
+alert("Do something here");
+});
+
+_writeLog("This is Custom Console Log ! Color Red");
+
+_writeLog("This is Custom Console Log ! Color Green",false);
+
+_onClick("btn_remove",function(){
+	_clear("test_print",true);
+});
+
+_onDClick("btn_d_click",function(){
+   alert("Double Click, something here");
+});
+_onClick("btn_body",function(){
+	_writeBody("Lorem Ipsum");
+});

code/part-three.html

@@ -0,0 +1,30 @@
+<div class="container">
+
+
+	<hr>
+	<div id="result_event"></div>
+	<hr>
+	<input type="text" class="input is-info" placeholder="Username" name="" id="my_text">
+
+	</br>
+	</br>
+	<article class="message is-primary">
+		  For give event onfocus 
+		  </br>
+		  <code>
+		  	  _onFocus("my_text",function(res){
+		  	  		_printTo("result_event","On Focus "+ res);
+		  	  });
+		  </code>
+			 <hr>
+			For give event resize screen
+			</br>
+		  <code>
+				_onResize(function(r){
+					_writeLog("Resize Screen : "+r);
+				});
+		  </code>
+	</article>
+
+
+</div>

code/part-three.js

@@ -0,0 +1,12 @@
+function message(a,b)
+{
+	return '<article class="message is-success"><div class="message-body"> <p>'+a+'</p>  '+b+' </div> </article>';
+}
+
+_onFocus("my_text",function(res){
+	_printTo("result_event",message("On Focus",res));
+});
+
+_onResize(function(x,y){
+	_printTo("result_event","Resize Screen : "+x  +" "+ y);
+});

code/part-two.html

@@ -0,0 +1,48 @@
+<div class="container">
+
+	<article class="message is-primary">
+
+		For load document from another file / page </br> <button class="button is-info is-outlined" id="btn_load_doc">Load Document</button>
+		<hr>
+		<div id='display_document'></div>
+		<hr>
+		<code>
+			_loadDoc("./server/page.php",function(r){
+			if (r)
+			{
+				_printTo("display_body",r);
+			}
+			});
+		</code>
+		<hr>
+		For load document from another file / page with GET </br> <button class="button is-info is-outlined" id="btn_get">Load GET</button>
+		<hr>
+		<div id='display_get'></div>
+		<hr>
+		<code>
+			var my_name = "Lorem";
+			_requestGET("./server/profile.php?name="+my_name+"",function(r){
+			if (r)
+			{
+				_printTo("display_body",r);
+			}
+			});
+		</code>
+		<hr>
+		For load document from another file / page with POST </br> <button class="button is-info is-outlined" id="btn_post">Load POST</button>
+		<hr>
+		<div id='display_post'></div>
+		<hr>
+		<code>
+			var my_name = "Lorem";
+			_requestPOST("./server/profile.php","name="+my_name+"",function(r){
+			if (r)
+			{
+				_printTo("display_body",r);
+			}
+			});
+		</code>
+
+	</article>
+
+</div>

code/part-two.js

@@ -0,0 +1,29 @@
+
+
+_onClick("btn_load_doc",function(){
+		_loadDoc("./server/page.html",function(r){
+		if (r)
+		{
+			_printTo("display_document",r);
+		}
+		});
+});
+
+
+var my_name = "Lorem Ipsum !";
+_onClick("btn_get",function(){
+	_requestGET("./server/profile.php?name="+my_name+"",function(r){
+		if (r)
+		{
+			_printTo("display_get",r);
+		}
+	});
+});
+_onClick("btn_post",function(){
+	_requestPOST("./server/profile.php","name="+my_name,function(r){
+		if (r)
+		{
+			_printTo("display_post",r);
+		}
+	});
+});

component/intro.gf

@@ -0,0 +1,10 @@
+
+I was created simple query of javascript code. You can easy write code of Javascript and you can easy to do DOM (document object manipulation).  
+
+If you familiar with jQuery, gQuery can be used with jQuery. You can modify the source code. 
+
+Garuda Query has an identical symbol with underscore in front of function name, So you can also use this library with another framework javascript.
+
+Everything has been tested and support much browser like Chrome, Firefox, Opera , Safari & Internet Explorer. 
+
+gQuery is not kaleng-kaleng library . You can create a professional web with gQuery.