welcome Anonymous
This is the left dummy section that maintains the three grid system.
Coding...
  • Topics
  • HTML Intro
    •
  • HTML Elements
    •
  • HTML Attributes
    •
  • HTML Headings
    •
  • HTML Marquee
    •
  • HTML Paragraphs
    •
  • HTML Span/Div
    •
  • HTML Style
    •
  • HTML Comments
    •
  • HTML Links
    •
  • HTML Tables
    •
  • HTML List
    •
  • HTML Iframe
    •
  • HTML Images
    •
  • HTML Video
    •
  • HTML Audio
    •
  • HTML Form
    •
  • HTML Inputs
    •
  • HTML Textarea
    •
  • HTML Button
    •
  • HTML Select
    •
  • HTML Javascript
    •
  • css intro
  • css syntax
  • CSS Backgrounds
  • CSS Margins
  • CSS Paddings
  • CSS Borders
  • CSS Text
  • CSS font
  • CSS display
  • CSS Position
  • CSS Colors
  • Sage.js Intro
  • Hiding elements
  • Showing elements
  • Togging elements
  • Getting input/textarea values
  • Setting input/textarea values
  • Getting HTML content
  • Setting HTML content
  • Toggling HTML content
  • Appending HTML content
  • Prepending HTML content
  • Getting attribute value
  • Setting attribute value
  • Event handling using when()
  • Selecting elements using document.querySelector()
  • Getting CSS using getStyle()
  • Setting CSS with setStyle()
  • Adding a class with addClass()
  • Removing a class with removeClass()
  • Toggling a class with toggleClass()
  • Slide show with slideShow()
  • Loading data with loadData()
  • Sending data with sendData()
  • File previewing with filePreview()
  • Getting location with myLocation()
  • Getting location by ip adress with locationByIp()
  • Copying text with copyText()
  • Making a clock with clock()
  • Making a count down with countDown()
  • Calling a function after sometime using after()
  • Calling a function every after sometime using every()
  • Stoping the executing function using stop()
  • Dragging & Dropping elements with dragDrop()
  • Creating a file with createFile()
  • Randomising numbers with random()
  • Creating a single page app (SPA) with createSPA()

Sage.js Introduction

Sage.js is a javascript library created by chanda fungamwango mark. In addition to everything that jquery can do, Sage.js comes with its own unique features which includes the following:

What you can do with sage.js:

  • You can create an advanced single page application (SPA) using createSPA() function
  • You can drag and drop element using dragDrop() function
  • You can preview files such as images on upload filePreview() function
  • You can get the location of the user just by using myLocation() function
  • You can get the location of the user through an ip address using locationById() function
  • You can create files in both txt and html formats using createFile() function
  • You can toggle html content using toggleHTML() function
  • You can make a simple clock using clock() function
  • You can randomise numerical data using random() function
  • You can create a count down system using countDown() function
  • You can slide show elements such as images using slideShow() function
  • You can load data from the server using loadData() function
  • You can send data to the server using sendData() function
  • You can copy text using copyText() function
  • You can set and get CSS using setStyle() and getStyle() functions
  • You can set and get the input value using setValue() and getValue() functions
  • You can set and get element's attributes using setAttr() and getAttr() functions
  • You can set and get the inner content of the element using setHTML() and getHTML() functions
  • You can append and prepend content on an element using appendHTML() and prependHTML() functions
  • You can add, remove and toggle a class onto an element using addClass() and removeClass() and toggleClass() functions
  • Sage.js can do much more than what has been highlighted, just start learning and find out!

hide() | hiding HTML

Hiding html elements or content very easy, all you need to do is to call the function called hide() which accepts a parameter which can be an element tag name, id, class or other selector.The following example shows how we can hide the html content when a button is clicked.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div hide="hide-text">Hide me please</div>
<div class="code-btn">
<button onclick="hide('#hide-text')">
Click to hide
</button>
</div>
</body>
</html>
Hide me please
Example explained: When the button was clicked using the onclick event listener, the element with an id name of hide-text was selected and then it was hidden (the display was set to none). Here we used the id as the element selector which is prefixed with a # hashtag, however, you can use any valid html element selector such as class name, attributs or all the css selectors.

show() | Showing hidden HTML

Showing hidden html elements or content is very easy, all you need to do is to call the function called show() which accepts a parameter which can be an element tag name, id, class or other selector.The following example shows how we can show hidden html content when a button is clicked.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="show-text">Am now showing!</div>
<div class="code-btn">
<button onclick="show('#show-text')">
Click to show
</button>
</div>
</body>
</html>
Example explained: When the button was clicked using the onclick event listener, the element with an id name of show-text was selected and then it was shown (the display was set to block). Here we used the id as the element selector which is prefixed with an hash-tag (#show-text), however, you can use any other valid html element selector such as id or all the css selectors.

toggle() | Toggling HTML elements

Toggle() is used to switch between hidden and visible html elements or content. If the element is hidden, using toggle() will show them and if the elements are visible, when the toggle() is used, they will be hidden.The following example shows how we can use toggle() function to either show or hide html elements when a button is clicked.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="toggle-text">Toggle me please!</div>
<div class="code-btn">
<button onclick="toggle('#toggle-text')">
Click to toggle
</button>
</div>
</body>
</html>
Toggle me please!
Example explained: When the button was clicked using the onclick event listener, the element with an id name of toggle-text was selected, it checked if it's display is equal to block and if it's true, it was hidden else it was shown. Here we used the id as the element selector which is prefixed with an hash-tag (#toggle-text), however, you can use any other valid html element selector such as id or all the css selectors.

getValue() | Getting the input/textarea value

The value entered by the user in the inputs or textarea can be gotten by using getValue() function which gets whatever value from the inputs. You can then store the returned value in the variable if you want.The following example shows how we can use the getValue() function to get the value from the input element.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<input id="get-value" placeholder="Enter your name">
<div class="code-btn">
<button onclick="alert( getValue('#get-value') )">
Get value
</button>
</div>
</body>
</html>
Example explained: When the button is clicked using the onclick event listener, the element with an id name of get-value was selected, then its value was gotten and printed out using the javascript alert() function. Here we used the id as the input element selector which is prefixed with an hash-tag (#get-value).You can also store the returned value in a variable a later use for example: var value=getValue('#get-value')

setValue() | Setting the input/textarea value

You can easily set the value of the input or textarea by using the setValue() function which sets whatever value is passed in its parenthesis. This function accepts two parameters: the input selector and the value to be set: setValue(selector, value).Selector is the element which will receive the values while value is any string or number that you wanna set and it can even be a variable. The following example shows how we can use the setValue() function to set the value of the input element.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<input id="set-value" >
<div class="code-btn">
<button onclick="setValue('#set-value' , 'Hello world' )">
Set value
</button>
</div>
</body>
</html>
Example explained: When the button is clicked using the onclick event listener, the element with an id name of set-value which is the input element was selected and then the text Hello world was set as its value. Here we used the id as the input element selector which is prefixed with an hash-tag (#set-value).

getHTML() | Getting the innerHTML content

The inner content of the html elements can be gotten by using getHTML() function which gets all content from the selected element. You can then store the returned content in the variable if you want.The following example shows how we can use the geHTML() function to get the the inner content from the element.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="get-html">Am the html content!</div>
<div class="code-btn">
<button onclick="alert( getHTML('#get-html') )">
Get html
</button>
</div>
</body>
</html>
Am the html content!
Example explained: When the button is clicked using the onclick event listener, the element with an id name of get-html was selected, then its html content was gotten and printed out using the javascript alert() function. Here we used the id as the input element selector which is prefixed with an hash-tag (#get-html).You can also store the returned value in a variable a later use for example: var html=getHTML('#get-html')

setHTML() | Setting the innerHTML content

The inner content of the html elements can be set by using setHTML() function which removes all the existing content in the selected element and updates it with the new given/set values. This function however accepts two parameters which is the element selector and html value: setHTML(selector, content).The following example shows how we can use the setHTML() function to set the inner html content.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="set-html">new content will appear here!</div>
<div class="code-btn">
<button onclick="setHTML('#set-html' ,'hello am a new content!' )">
set html
</button>
</div>
</body>
</html>
new content will appear here!
Example explained: When the button is clicked using the onclick event listener, the element with an id name of set-html which was selected and then the text hello am a new content! was set as its new content. you can include any valid html tags or styling in the new content and it will be updated with no problems. for example setHTML('#set-html', '<p> new paragraph</p>') this will create a new paragraph in the selected element.

appendHTML() | appending the innerHTML content

The inner content of the html elements can be appended by using appendHTML() function which concatenates the new content onto the selected element.This does not affect the existing content in the selected element as it just only adds the new content.This function accepts two parameters which is the element selector and html value: appendHTML(selector, content).The following example shows how we can use the appendHTML() function to add new content to the element.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="append-html">Append some content here!</div>
<div class="code-btn">
<button onclick="appendHTML('#append-html' ,'<br> I have been appended!' )">
append html
</button>
</div>
</body>
</html>
Append some content here!
Example explained: When the button is clicked using the onclick event listener, the element with an id name of append-html is selected and then the text I have been appended! was added to the existing content. you can include any valid html tags or styling in the appended content and it will be updated with no problems. for example appendHTML('#append-html', '<p> new paragraph</p>') this will create a new paragraph in the selected element.In the example we added the <br> break tag to set the content on the new line.

prependHTML() |prepending the innerHTML content

The new html content can be added before the existing content in the selected element by using prependHTML() function which inserts the new content onto the selected element before the existing content.This does not affect the existing content in the selected element as it just only adds the new content. pre means "Before" therefore the new content is inserted at the begining of the selected element.This function accepts two parameters which is the element selector and html value: prependHTML(selector, content).The following example shows how we can use the prependHTML() function to insert new content at the begining of the element.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="prepend-html">prepend some content here!</div>
<div class="code-btn">
<button onclick="appendHTML('#prepend-html' ,' I have been prepended!<br>' )">
prepend html
</button>
</div>
</body>
</html>
Prepend some content here!
Example explained: When the button is clicked using the onclick event listener, the element with an id name of append-html is selected and then the text I have been prepended! was added to the existing content at the begining of the element. you can include any valid html tags or styling in the prepended content and it will be updated with no problems. for example prependHTML('#prepend-html', '<p> new paragraph</p>') this will create a new paragraph in the selected element.In the example we added the <br> break tag to set the content on the new line.

toggleHTML() | Toggling html content of the element

You can easily toggle between new and existing innerHTML content of an element just by using toggleHTML() function. This function checks if the given html content (text) exists and if yes, it gets removed else it gets added and removes the existing content. This function has three parameters which is the element selector, old content and new content : toggleHTML(selector, old_text, new_text).
The selector is the element which will have its innerHTML content toggled, old_content is the existing content (text) in the element and new_content is the new text that will be toggled (added or removed) in the element.
The following example shows how we can use the toggleHTML() function to toggle some text.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
<style>
.new-class{background: teal;}
</style>
</head>
<body>
<div id="toggle-html">How are you?</div>
<div class="code-btn">
<button onclick="toggleHTML('#toggle-html','new-class')">
Toggle content
</button>
</div>
</body>
</html>
How are you?
Example explained: When the button is clicked using the onclick event listener, the element with an id name of toggle-html is selected and then the new text "Am ok thanks!" is checked if it is the existing innerHTML of the selected element and if yes, it gets removed else it gets added by replacing the old content (existing content).

getAttr() | Getting the attribute value

The value of the attribute be can gotten by using getAttr() function which gets the given value of the attribute from the element. You can then store the returned value in the variable if you want.This function takes two parameters which are: selector and attibute name where "Selector" is the element where the targeted attribute is located while the "Attribute name" is actually name of the attribute where you want to get the value from : getAttr(selector, attribute name).The following example shows how we can use the getAttr() function to get the value from any targeted attribute.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<input id="get-attr" placeholder="Enter your name">
<div class="code-btn">
<button onclick="alert( getAttr('#get-attr', 'placeholder') )">
Get attribute
</button>
</div>
</body>
</html>
Example explained: When the button is clicked using the onclick event listener, the element with an id name of get-attr was selected, then its attribute name was retrived according to the name which was set. In our example, the attribute name we set was the placeholder then its value ("Enter your name..") was gotten and printed out using the javascript alert() function.

setAttr() | Setting the Element's attribute

Attribute is the value that adds more information and capabilities to the element . You can easly set a new attribute or modify the exsiting attribute using the setAttr() function. This function accepts two parameters which is the element selector and the attribute object: setAttr(selector, {name:value}). The attribute object takes the "name:value" pair where "name" is the name of the attribute such as "href" and value is the value of the attribute's name such "www.web.com". You need to be familiar with objects to work well with this function. You can add as many attributes as you want separated by a comma. The following example shows how we can use the setAttr() function to set or modify the element's attributes.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<input id="set-attr" >
<div class="code-btn">
<button onclick="setAttr('#set-attr' ,{'placeholder':'Am disabled' , 'disabled':true})">
set html
</button>
</div>
</body>
</html>
Example explained: When the button is clicked using the onclick event listener, the element with an id name of set-attr is selected which is an input element and then the attributes defined in the through the object were added.The attributes which were added is the placeholder with a value of "Am disabled" and disabled with a value of true.Here we have just set two attributes however, there is no limit to how many attributes you can set as illustrated earier. Note: you can only set the attributes which are supported by the selected element as some will fail.

E() | HTML selector using E()

You can simply select any valid html element by tag name, id,class,attribute or by using any valid css selecting format using the E() function which stands for "Element".This function replaces the use of long html query selectors such as: document.getElementById(), document.getElementsByTagName(), document.getElementsByClassName() and many more.The following example shows how we can use the E() function to select the any html element and apply some function.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="set-html">new content will appear here!</div>
<div class="code-btn">
<button id="BTN" >click me</button>
</div>
<script>
E('#BTN').addEventListener('click', function(){ alert('You have clicked the button!')}
</script>
</body>
</html>
Example explained: The button with an id called btn was selected E('#BTN') and an event listener was set using the javascript function called addEventListener() which accepts two parameters: an event and a function. Then the click event was set which should is fired when a button is clicked. lastly we added some codes in the function which should be executed when the button is clicked and in our cas we just added an alert() function with some text "You have clicked the button!";

when() | Event handling using when()

You can simply select any valid html element by tag name, id,class,attribute or by using any valid css selecting format and add the event listener such as click event and append a function that should be excuted when that event is fired just by using the when() function.This function has two required parameters which are: the element selector and an object with an event as a property and function as the value.
when(selector, {event:function(){} })
selector is the element selector such as an id or class name and this is where an event will be fired from, object has a pair of an event and function separated by a full colon, the event is the "thing" that will be done on a selected elements such as a click, focus, blur, mouseover and many more. The function is the action that should be done when an event is fired. For example when a button is clicked, some functions must be executed.
You can chain as many event listeners such as "click, keyup, blur, focus etc" to a selected element separated by a comma in the same way object's data is separated.
The following example shows how we can use the when() function to excute some function when an event is fired.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div class="code-btn">
<button id="btn" >click me</button>
</div>
<script>
when('#btn', { click: function(){
alert('You have clicked the button!')
} })
</script>
</body>
</html>
Example explained: When the button with the an id name of #btn is clicked using the click event listener, The function was executed which had a javascript alert function which says "You have clicked the button!";

Note: You can add as many event listeners as possible to the selected element like this:
when('#btn', {click: function(){some codes here..},
mouseover:function(){some codes here..},
focus: function(){some codes here..} })
This has added three event listeners to a button which means that different functions will be executed when the button is clicked, when it gets focus and when the mouse hovers over it.

getStyle() |Getting the style property value

The style property value such as the color value can be gotten by using getStyle() function which gets the value of the given CSS property name such as color. You can then store the returned value in the variable if you want.This function takes two parameters which are: element selector and property name where "element selector" is the element where the targeted style property is located while the "property name" is actually name of the style where you want to get the value from: getStyle(selector, property name).The following example shows how we can use the getStyle() function to get the value from any targetedn element.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="style">What is the value of my background color? click to find out!</div>
<div class="code-btn">
<button onclick="alert( getStyle('#get-style', 'background-color') )">
Get style value
</button>
</div>
</body>
</html>
What is the value of my background color? click to find out!
Example explained: When the button is clicked using the onclick event listener, the element with an id name of get-style was selected, then its style property was retrived according to the name which was set.In our example, the property name we set was the background-color then its value (green) was gotten and printed out using the javascript alert() function.

setStyle() | Styling the HTML(CSS)

You can easly set a new style or modify the exsiting styles to the html elements using the setStyle() function. This function accepts two parameters which is the element selector and the styles object: setStyle(selector, {property:value}). The styles object takes the "property:value" pair where "property" is the name of the style such as "color" and "value" is its value such as "red".eg:setStyle(selector, {'color':'red'}). You need to be familiar with objects to work well with this function. You can add as many style as you want separated by a comma(,) and not a semi-colon(;) and as you do in typical styling. The following example shows how we can use the setStyle() function to set or modify the element's a style.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="style">Style me up!</div>
<div class="code-btn">
<button onclick="setStyle('#style' ,{'background':'green' , 'color':'white'})">
Click to style
</button>
</div>
</body>
</html>
Style me up!
Example explained: When the button is clicked using the onclick event listener, the element with an id name of style is selected and then the styles defined through the object were added.The styles which were made is the background-color with a value of "green" and text color with a value of white.Here we have just set two style however, there is no limit to how many styles you can set as illustrated earier. Note: you should not terminate the styling using a semi-colon, in short, it's not needed at all. All the properties and their values should be enclosed in single qoutes (' ') unless they are variables.

addClass() | Adding Classes to The Elements

A class is an element's attribute that can be used as its element selector and can also be used to apply some functions.You can add classes to the elements by using the addClass() function. This function accepts two parameters which is the element selector and the class name to be added: addClass(selector, class name). Multiple class names can be added separated by a comma (,) eg:addClass('#add-class', 'new-class,another-class'). The following example shows how we can use the addClass() function to add classes to the element.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
<style>
.new-class{background: teal;}
</style>
</head>
<body>
<div id="add-class">Give me another class please!</div>
<div class="code-btn">
<button onclick="addClass('#add-class','new-class')">
Click to style
</button>
</div>
</body>
</html>
Give me another class please!
Example explained: When the button is clicked using the onclick event listener, the element with an id name of add-class is selected and then the class name which is set in the function is added to it. This new-class which has been added has some predefined styles and therefore the element inherits those styles and changes the backgroud-color to teal.Here we have just added one class name however, there is no limit to how many classes you can add just separate them with a comma.Note: Class names should be added without a dot(.) prefix.

removeClass() | Removing Classes From The Elements

You can remove existing classes from the selected element by using the removeClass() function. This function takes two parameters which is the element selector and the class name to be removed: removeClass(selector, class name). Multiple class names can be removed separated by a space.The following example shows how we can use the removeClass() function to remove classes from the element.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
<style>
.new-class{background: teal;}
</style>
</head>
<body>
<div id="remove-class">Remove a class from me please!</div>
<div class="code-btn">
<button onclick="removeClass('#remove-class','old-class')">
Click to remove
</button>
</div>
</body>
</html>
Remove a class from me please!
Example explained: When the button is clicked using the onclick event listener, the element with an id name of remove-class is selected and then the class name which is set in the function is removed from it. This "new-class" which has been removed has some predefined styles and they were also removed leaving the element with the default background color.Here we have just removed one class however, there is no limit to how many classes you can remove just separate them with a comma.

toggleClass() | Toggling Classes onto The Elements

You can either add or remove existing classes from the selected element by using the toggleClass() function. This function checks if the given class exists and if yes, it gets removed else it gets added. This function accepts two parameters which is the element selector and the class name to be removed or added (toggled): toggleClass(selector, class name). Multiple class names can be toggled just separate them with a comma.The following example shows how we can use the toggleClass() function to toggle classes.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
<style>
.new-class{background: teal;}
</style>
</head>
<body>
<div id="toggle-class">Toggle a class from me please!</div>
<div class="code-btn">
<button onclick="toggleClass('#toggle-class','new-class')">
Click to toggle
</button>
</div>
</body>
</html>
Toggle a class from me please!
Example explained: When the button is clicked using the onclick event listener, the element with an id name of toggle-class is selected and then the class name which is set in the function is checked if it's existing and yes it was existing as the result it was removed else it was added. This "new-class" which has been toggle (removed or added) has some predefined styles which also getting toggled.Here we have just toggled one class however, there is no limit to how many classes you can toggle just separate them with a comma.

slideShow() | Automatic element slide show

You can make your own image or other content automatic slide show using the slideShow() function .This function accepts three attributes which is the selector,duration (in miliseconds) and an optional random bolean value. The selector must only be a class name of the elements, duration must only be in miliseconds (1000ms=1sec) and the third parameter is the bolean which accepts a true or false value. when true is set, you will get a randomised slide show and when a false value is set, you will get a normal slide show: slideShow('class_name', duration, randomise). You need to add the same class name to all the elements which you want slide else it will not work.The following example shows how we can use the slideShow() to auto slide the images.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
<style>
.new-class{background: teal;}
</style>
</head>
<body>
<div id="img-wrapper">
<img class="slide" src="photos/pic-1"/>
<img class="slide" src="photos/pic-2"/>
<img class="slide" src="photos/pic-3"/>
</div>
<div class="code-btn">
<button onclick="slideShow('.slide',1000, false)">
Click to slide
</button>
</div>
</body>
</html>
Example explained: When the button is clicked using the onclick event listener, all the elements with a class name of slide were selected and then they were put in an array so that they are only called by their index values (0,1,2 etc). Then the duration was set which was just 1 second (1000ms) and randomising was set to false so that the slide goes normal. You can set any duration value in miliseconds but remember that the higher the duration, the slower the slideshow and vise verse.You can try to randomise the slideshow by setting the third parameter to true.Note: Always use the class name as the element's selector.

loadData() | Loading Data From the Server/File

You can load new data from the server or any file without reloading the page just by using loadData() function. This function takes two required parameters which is the selector and URL and one optional parameter which is the interval: loadData(selector, url, interval).The selector is the element where the data is going to be loaded (innerHTML) while the URL is the pathname of the file which you want to load, the third optional parameter is the interval which is used to load the data every after the specified duration in miliseconds (1000ms=1sec). When you set the duration, the loadData() will be checking for any new information from the file and load the results in the selected element. Only use intervals when you want to make some real time updates such as live web text editor.You can leave the interval parameter empty if you want. The following example shows how we can use the loadData() function to load new information.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="load-data">New data will loaded here!</div>
<div class="code-btn">
<button onclick="loadData('#load-data', 'data.txt')">
Load data
</button>
</div>
</body>
</html>
New data will loaded here!
Example explained: When the button is clicked using the onclick event listener, the function loadData() was called which had two argurments: the element selector and the URL. We ignored the last interval parameter. Then the file (data.txt) whose path was specified in the URL was loaded and got inserted into the selected element through the id name. loadData() hides and solves all the complications of using Ajax. This function can be used to perform some server side functions such as: getting live updates, making live text editors and more.

sendData() | Sending Data to the Server

You can send new data to the server without reloading the page just by using sendData() function. This function takes four parameters which is the selector , URL ,data and an optional timer(count-down): sendData(selector , url , {data} , timer).The selector is the element where the response is going to show (innerHTML) if successful while the URL is the pathname of the server-side file such as php files which will receive and process the data, data is the object of values made in a "name:value" pair. The last parameter is timer(count-down) which can be used to send the request after the specified time in miliseconds (1000ms=1sec) elapses. For example, when the timer is set to 2000, it means that the request will be sent after 2 seconds, in short, it will wait for 2 seconds and then sends the request. sendData(selector, 'file.php', {name:'mark'} ,2000).This function uses POST method to send and process data.Therefore, to get the value of the name from the data, we can use the PHP global variable $_POST['name'] which takes the name as the index and print its value.The following example shows how we can use the sendData() function to send data to the server.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="send-data">The response will show here!</div>
<input id="name" placeholder="Enter your name" >
<input id="pass" placeholder="Enter your password" >
<div class="code-btn">
<button onclick="sendData('#send-data', 'data.php',{ ,name:getValue('#name'), pass:getValue('#pass')})">
Send data
</button>
</div>
Data getting processed using php in (data.php)
<?php
echo "Hello, your name is".$_POST['name']."

and password is ".$_POST['pass'];
?>
</body>
</html>
The response will show here!
Example explained: When the button is clicked using the onclick event listener, the function sendData() was called which had three argurments: the element selector ,the URL and data object. We ignored the last timer parameter. Then the file (data.php) whose path was specified in the URL was set and this is the file that received and processed the data. Then we set the data in the object as a name:value pair: The name can be written without any single quotes while its value should be enclosed in single quotes unless it's a variable.We then retrived the values from the input elements using the getValue() functions. and the last parameter was ignored which is the timer which sends the request after the specified period of time measured in miliseconds(1000ms=1sec). The element with an id of send-data was used to get the response from the server. Importance: this function sendData() can be used to both send and receive the data from the server in real time without reloading the page. Besides, it can also be used to send requests to the server after a specific period of time using timer parameter.

filePreview() | Previewing the file on upload

You can preview files such as pictures, videos and songs before uploading them to the server just by using filePreview() function. This function takes three parameters which is the file_input_id , target_id and an optional index: filePreview(file_input_id , target_id ,index).The file_input_id is the id of the input element which will receive the files. The id name of the file_input_id should be set without an hashtag (#) in single quotes. target_id is the id of the media element such as img, video or audio elements where the preview is going to take place.Target id should be set without an hashtag in single quotes.in short target elements should support the src attribute in order for the preview to be successful.
Only use img, audio and video as the target elements. The last parameter which is the index is not required unless you have idea on how to loop through the selected files in case you have selected multiple files. By default, this function only shows a preview for only one file with an index of 0. Therefore, if you have selected more than one file, only the first file will have the preview. However, you can preview all the selected files using the E('#your-file-id').files.length which will give you the number of all the selected files and then you can loop them and just update the index parameter in the function. This function can simply be used in this way:filePreview('file-id','target-id') You can just ignore the last index parameter.The following example shows how we can use the filePreview() function to preview an image to be uploaded.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="img-wrapper">
<img id="image" style="display:none"/>
</div>
<input type="file" id="file" onchange="filePreview('file', 'image'); show('#image'); " >
</body>
</html>
The preview will show here!
Example explained: When the file input button "choose file" was clicked, the file dialog showed and we selected the desired picture, then the onchange event listener was used to detect if the input has received any values. Then we selected the file input's id "file" and set it as the first parameter of the function and we also set the target_id which was the image (img) element's id called "image". As you can see, both element's id were set in single qoutes without hashtags(#).The image (img) element was initially hidden and so we showed it by using the show('#image') function so that we get the preview.
Importance: This function filePreview() can be used to allow your website users to see or preview the files they are uploading before sending them to the server for a permanent storage. With this function, users can play a song, watch a video and see pictures before uploading them to the server.

myLocation() | getting your current location

You can get your current location using myLocation() function. This function has only one optional parameter which is the element selector where the results will show: myLocation(selector). This will print your district, province, country and continent. You must allow the web browser to access your location and have internet connection else this will not work.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="location-result">Your location will show here</div>
<div class="code-btn">
<button onclick="myLocation('#location-result')">
Get my location
</button>
</div>
</body>
</html>
Your location will show here!
Example explained: When the button "Get my location" was clicked, the function myLocation() was called which had the element selector called #location-result as its argument where the results was shown.Then the function checked if the browser allows the API to access the user's location. If it does not, the user was asked to either allow or block accessing their location. If the user allows the web browser to access their location, then the longitude and latitudes values will be retrieved and sent to some external APIs that will help to get the current location of the user. myLocation() function only gets the district, province, country and continent of the user which you can later split into single strings using the javascript split() function where you have to separate them by comma (,)
For example: myLocation().split(',').
Note: the results of your location especially the district and province/state may be incorrect due to the kind of the device you are using or due to the geographical area tracking issues. However, the country and the continent will always be 100% correct.
Importance: This function myLocation() can be used to get the current location of the user which can then be used to customise and personalise the experience and content of each user depending on their location.

locationByIp() | getting user location by ip address

You can get the user location through an ip address just by using locationById() function. This function takes two parameter which are the ip address and an optional element selector where the results will show: locationByIp(ip, selector). This will print the user's district, province, country and continent. This function locationById() will get the user's location without their consent as it does not ask users to either allow or block the web browser to access the location.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="ip-location-results">The location will show here!</div>
<input id="ip_address" placeholder="Enter ip address" >
<div class="code-btn">
<button onclick="locationByIp(getValue('#ip_address'),'#ip-location-results')">
Get location
</button>
</div>
</body>
</html>
The location will show here!
Example explained: When the button "Get location" was clicked, the function locationById() was fired which had the getValue() function as its first argument which was used to retrieve the ip address from the input element with an id of #ip-address, then the second argument was the element selector called #ip-location-result which was used to show the results.Then the function went directly into retriving the user's latitude and longitudes without even asking about their consent. Then the latitudes and longitudes were sent to some external APIs that helped to get the location. locationById() function only gets the district, province, country and continent of the user which you can later split into single strings using the javascript split() function where you have to separate them by comma (,)
For example: locationById(ip_address).split(',').please don't include the second argument (selector) when spliting the strings.
Note: the results of the user's location especially the district and province/state may be incorrect due to the kind of the device of the user or due to the geographical area tracking issues or wrong api address. However, the country and the continent will always be 100% correct.
Importance: This function locationById() can be used in tracking the user's location just by using their ip address. This can also be used to track the location of users who refuse to allow an access to their locations especially cyber criminals such as black hat hackers. It can also be used to customise and personalise the experience and content of each user depending on their location such as adverts.

copyText() | copying the text

You can easily copy the text in the web browser just by using copyText() function. This function takes only one required paramenter which is the text input selector where the text will be copied from: copy('input_selector').The input selector can either be a textarea or input element where their value attributes should have text to be copied.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<input id="text-value" value=hello world.. >
<div class="code-btn">
<button onclick="copyText('#text-value')">
Copy text
</button>
</div>
<input id="ip_address" placeholder=paste here.. >
</body>
</html>
Example explained: When the button "Copy text" was clicked, the function copyText() was called with an id selector called #text-value which selected the input element and retrived its value. Then the text were selected behind the scene using the javascript function called select(). Then another javascript function called execCommand(), was used to execute a command on a selected element and in our case it is to copy the text therefore, it executed a "copy" command like this: document.execCommand('copy').
Note: This function uses the javascript experimental function called execCommand('copy') which is on the testing mode and it therefore might not work on all the web browsers
Importance: This function copyText() will help both the developer and an end user to execute a copy command on the text in the browser with ease.

clock() | making a simple digital clock

You can easily create a simple digital clock using the clock() function. This function takes only one required paramenter which is the element selector where the results will show: clock('selector').The function will print hours, minutes and seconds. This function gets the time settings of the device's system. Therefore, to set the clock to any time, just set the device's time to anything and it will take the effects.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="clock-results">The clock will show here</div>
<div class="code-btn">
<button onclick="clock('#clock-results')">
Start the clock
</button>
</div>
</body>
</html>
The clock will show here!
Example explained: When the button "start clock" was clicked, the function clock() was called with an element selector called #clock-results which was used to print/show the clock data in the browser.
Note: To change the clock time settings, just change the time of your device's system
Importance: This function clock() will help you to create a very basic clock that may be used for so many things.

countDown() | making a simple count down

You can easily create a count down system just by using countDown() function. This function has four paramenter which is the element selector, start, stop and callback function: countDown(selector, start, stop, callback).The selector is the element where the count down will show, start is the number where the count down will start from, stop is the number where the count down will stop and callback is the function that will run when count down has stopped. The callback is optional.
The following example shows how the countDown() function can be used to create a simple count down.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="count-down-results">Lets count down from 5</div>
<div class="code-btn">
<button onclick="countDown('#count-down-results', 5, 2, function(){ alert('The count down has finished') })">
Start count down
</button>
</div>
</body>
</html>
Lets count down from 5
Example explained: When the button "start count down" was clicked, the function countDown() was called with an element selector called #count-down-results, start=5, stop=0 and an optional callback function which was used to alert user. The counting down started at 5 and stopped at 0 and then function was executed to alert the user that the count down has finished.
Importance: This function countDown() will help you to create a very nice counting down system where you can allow users to set their own starting and ending points and then execute some functions when it stops.

after() | calling a function "after" some time

You can call or execute some functions after a specified time has elapsed just by using after() function. This function has two required paramenters which is the duration and the function to execute: after(duration, function).The duration should be in miliseconds. note (1000ms==1second). The function if not Anonymous, should be written without parenthesis '()'.
The following example shows how the after() function can be used to execute some functions after a given duration.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="after-results">The results will show here after 3 seconds</div>
<div class="code-btn">
<button onclick="after(3000, function(){ setHTML('#after-results','Hello, i have been executed after 3 seconds') })">
call a function
</button>
</div>
</body>
</html>
The results will show here after 3 seconds
Example explained: When the button "Call a function" was clicked, the function after() was called with duration set 3000 which is 3 seconds, and an Anonymous function was set awaiting the execution after 3 seconds. Note: This function after() is the copy of javascript setTimeout() function which can also be used achieve the same results in a slightly different way
Importance: This function after() will help the programmer to make a system that execute some functions after some time.

every() | calling a function 'every' after some time

You can call or execute some functions every after a specified time has elapsed just by using every() function. This function has two required paramenters which is the duration and the function to execute: every(duration, function).The duration should be in miliseconds. note (1000ms==1second). The function if not Anonymous, should be written without parenthesis '()'.
The following example shows how the every() function can be used to execute some functions every after a given duration.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="every-results">The number will increment by 1 every second</div>
<div class="code-btn">
<button onclick="var number=0;
every(1000, function(){ number++;
setHTML('#every-results',number) })">
Incremant number
</button>
</div>
</body>
</html>
The number will increment by 1 every second
Example explained: When the button "Incremant number" was clicked, the function every() was called with duration set to 1000ms which is 1 second, and an Anonymous function was set awaiting the execution every after 1 second. We also created a variable called number which had an initial value of 0. Then we incremented the variable each time the function was called (every after 1sec) by 1 (number++) and we printed its result in the element with an id of every-results
Note: This function every() is the copy of javascript setInterval() function which can also be used to achieve the same results in a slightly different way
Importance: This function every() will help the programmer to make a system that execute some functions every after some time (repeatedly).

stop() | stoping the executing function

You can stop the currently executing function which is embeded in an every() function just by using a stop() function. This function does not take any arguments, you can just call it: eg stop().
The following example shows how the executing function can be stopped using the stop() function.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="stop-results">The number will increment by 1 every second and will be stopped upon clicking the button</div>
<div class="code-btn">
<button onclick="var number=0;
every(1000, function(){ number++;
setHTML('#stop-results',number) })">
start
</button>
</div>
<div class="code-btn">
<button onclick="stop()">stop</button>
</div>
</body>
</html>
The number will increment by 1 every second and will be stoped upon clicking the button
Example explained: When the button "Incremant number" was clicked, the function every() was called with duration set to 1000ms which is 1 second, and an Anonymous function was set awaiting the execution every after 1 second. We also created a variable called number which had an initial value of 0. Then we incremented the variable each time the function was called (every after 1sec) by 1 (number++) and we printed its result in the element with an id of every-results.
We created another button with an inner text of "Stop" Where we had included the stop() function which was fired onclick to stop the execution of the function which was incrementing the number
Note: This function stop() is the copy of javascript clearInterval() function which can also be used to achieve the same results in a slightly different way. Also note that this function stop() can only be used on a function which is embeded in the every() function and can only be called once.
Importance: This function stop() will help the programmer to call off any executing function embeded in the every() function.

dragDrop() | Dragging & Dropping elements

You can easily drag and drop elements in the web browser just by using the dragDrop(). This function has three arguments, which are: drag id, drop id and an optional drag parent id. The drag id is the id name of the element to be dragged, the drop id is the id name of the element where the dragged element will be dropped and the last paramenter is an optional drag parent id which is the id name of the parent element of the dragged element which can be used to drag back the element.
If the drag parent id is ignored, the element will not be dragged back.
Note: you must only use an id as the elements selector without an # hash prefix. eg dragDrop('drag_id', 'drop_id', 'drag_parent_id')
The following example shows how we can drag and drop an image using the dragDrop() function.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="drop"> Drag and drop an image here..</div>
<div class="drag-img-wrapper" id="drag-parent" >
<img id="drag" src="photos/pic-2"/>
</div>
<script>
dragDrop('drag', 'drop', 'drag-parent')
</script>
</body>
</html>
Drag and drop an image here..
Example explained: The dragDrop() was called when the page finished loading which had three arguments: dragDrop('drag', 'drop', 'drop-parent'). The drag is the id name of an image element img which was to be dragged, the drop is the id name of the element where the image was dropped and the drag-parent is the id name of the parent element from which the image was dragged from and it was used to allow the image to be dragged back.

Note:You must only use the id name as the element's selector without the hash tag prefix as shown in the example above. The third argument drag-parent is an optional and you can ignore it if you dont want to drag back the dragged element (image)

Importance: This function drapDrop() can be used for so many things which we can not manage to mention here.

createFile() | Creating a file in a web browser

You can create either a txt or an html file just by using createFile() function. This function has four paramenters which are: link_id, filename,data and an optional file_type: createFile(link_id, filename, data, file_type).
The link_id is the id name of an anchor tag <a> which is used to download the created file, filename is the name of the file to be created, data is the file content which is text and file_type is an optional parameter that specifies the type of the file to be created and it can only be either a txt or html. By default, the file_type is txt.
The following example shows how createFile() function can be used to create a simple html file.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<a id="file_link"> Download file</a>
<script>
var data="Hello this is a dummy html file created using sage.js creatFile() function";

createFile('file_link', 'webfile', data, 'html')
</script>
</body>
</html>
Download file
The createFile() function got called when the web page had finished loading. It had four arguments which were passed in its parenthesis: createFile('file_link', 'webfile', data, 'html'). file_link is the the id name of an anchor element <a> which is used to generate the file downloading link, webfile is the name of the file. You can name it anything, data is the content of the file which should be text. We had stored the text in the variable called data and this is why we could not wrap it in single quotes as it's a variable. The last argument is an optional file type which in our case was html. Remember by default the file_type is txt but we wanted to create a web file so we used html instead.
Note: You must only use an anchor element <a> to create the downloading link of the file
Importance: You know it's not possible to create a file using javascript, but sage.js makes it just possible for any programmer to generate one and save it on their own system. Therefore the importance and usefulness of this createFile() function is endless and unimaginable.

random() | Randomising numbers

You can randomise numbers just by using random() function. This function has two required parameters which is the from and the to parameter: random(from, to).The from is the number where the randomising should start from. The to is the number where the randomising should reach. Therefore the from and to actually forms the random range limits.
The following example shows how the random() function can be used to randomise a number from 1 to 20.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
</head>
<body>
<div id="random-results">The random number will run from 1 to 20</div>
<div class="code-btn">
<button onclick="var number=0;
setHTML('#random-results', random(1, 20))">
Click to Randomise
</button>
</div>
</body>
</html>
The random number will run from 1 to 20
Example explained: When the button "Click to Randomise" was clicked, the function random() was called with two arguments: random(1, 20) which formed the 1 to 20 random range. Then it was wrapped into the setHTML() function in order to print the results in the inner html of the element with an id name of #random-results

Importance: This function random() can be used to randomise numbers or an indexed data such as arrays which can later be used to achieve so many things in programming.

createSPA() | Creating a single page app (SPA)

Sage.js has made it very possible for programmers to create a single page application with no challenges at all. The single page application (SPA) is the web app that only has one page where all the other pages are loaded. An SPA makes a website faster and prevents the web browser from loading each time the user requests the data.
However, The most challenge that programmers have faced to create an SPA is the ability to implement the page links back and forth navigation system. Users love to use the back button on their devices to navigate back and forth on a website, However this ability becomes very difficult to implement as the programmer is forced to understand the window's complicated history api system. Sage.js looked at this problem and provided the solution.

Now You can easily create a single page application just by using createSPA() function. This function has four parameters which is the links_selector, results and the last two optional arguments which are the active_class and loader:
createSPA(links_selector, result, active_class, loader).
The links_selector is the class name of the navigation links and must be written withot a . dot prefix, result is the id or class name of the element where the results will be loaded , active_link is an optional parameter which is the name of the class which will be added on the active link. This class should contain some CSS styling such as a color which can be added to an active link and the last paramenter is loader which is optional and its used to provide some text that will be shown when the browser is waiting for the page to loaded. By default, the loader has a 'Loading..' text, however you can change it to anything and you can even include an image

Note:All the links url must be added in a data-url attribute eg: <li data-url="page1.html"> link 1 </li>.
We recommend using <li> as the link element. The following example shows how we can create a single page application using createSPA() function.
<html>
<head>
<link href="css/style.css" ref="text/css">
<script src="sage.js"></script>
<style>
.active_link{color: aqua;
border: 1px solid teal;}
</style>
</head>
<body>
<ul>
<li class="link" data-url="data1.html"> Link 1</li>
<li class="link" data-url="data2.html">Link 2</li>
<li class="link" data-url="data3.html">Link 3</li>
</ul>
<div id="spa-results">The results will show here</div>
<script>
createSPA('links', '#spa-results','active_link')
</script>
</body>
</html>
The results will show here!
Example explained: The createSPA() was called when the page has finished loading which had three arguments, we ignored the fourth loader parameter as it's set by default: createSPA('link', '#spa-results', 'active_link')
link is the class name of the links element (<li>). #spa-results is id name of the element where the results will be loaded (shown) and the active_link is the style class name which will add an aqua color to any clicked link. This class must be written without a dot (.) prefix.

Note: You must only use the class name as the links selector which should be applied to all the links. If you want to set the loading text in the fourh loader parameter, you must not ignore the active_link parameter, you can even pass a null value.

English into Bemba dictionary App download (apk)
Learn the translation of the English words into a Zambian most popular local language bemba. This app works offline, comes with over 5,245 examples and quiz.
earn points , challenge friends, and make money as you interact with sageteche products
English into Bemba dictionary App downlo..
Sage AI is a state-of-the-art artificial intelligence language model that is designed to understand, interpret, and generate human language. With its advanced natural language processing capabilities, Sage AI can provide accurate and helpful responses to a wide range of questions and topics.
Sage AI is trained on massive amounts of text data, including books, articles, websites, and other sources of information. It uses a combination of machine learning algorithms and neural networks to analyze the structure and meaning of language, including grammar, syntax, and semantics. This allows Sage AI to understand the context and intent behind a question or statement, and provide a relevant and informative response.
When a user interacts with Sage AI, the conversation takes place in a conversational format, with the AI using a combination of pre-defined responses and machine learning to generate a response based on the input it receives. The AI can understand the user's question or statement, analyze its structure, and generate a response that is both accurate and engaging.
Sage AI can be used in a variety of applications, including customer service, chatbots, language translation, and content generation. For example, a customer service representative could use Sage AI to analyze a customer's complaint or question and provide a helpful and accurate response, or a language translator could use it to translate a document or conversation from one language to another.
Overall, Sage AI is a powerful tool for anyone who needs to interact with human language in a way that is efficient, accurate, and engaging. With its advanced natural language processing capabilities and machine learning algorithms, Sage AI can help businesses, organizations, and individuals communicate more effectively with their customers, colleagues, and partners.
Sage AI is a state-of-the-art artificial..
Ad
X
Here are ways of making money online