web.X Consulting

What's New at web.X Consulting

Recently at web.X our designers have been experimenting with Javascript. They have been playing around with the technology and learning how it can be used to help enhance the web experience. Usually we use libraries and open source Javascript code when we need to use it. But now we are running into a problem where there isn't a library for what we need. So our solution? Have the designers learn Javascript. We are still new to it but below are just some of the code snippets and examples we have worked on recently.

Functions and Arrays

Here are some examples using functions and arrays in Javascript

Example 1:

Enter some text using spaces to separate words. Eg: "This is web.x Consulting".

This function will essentially split any entry using the .split("delimeter") function.

Below is the code for this particular example

                        
                            
<script>
    function start() {
        var button = document.getElementById("buttonSplit");
        button.addEventListener("click", buttonPressed, false);
    }
    function buttonPressed() {
        var splitText = document.getElementById('split').value;
        var splitArray = splitText.split(" ");
        
        document.getElementById('splitFinal').innerHTML = "";
        
        for(var i = 0; i < splitArray.length; i++) {
            document.getElementById('splitFinal').innerHTML += "<p>" + (i + 1) + ". " + splitArray[i] + "</p>";
        }
    }
    window.addEventListener("load", start, false);
</script>

Example 2:

Enter some text again using spaces to separate words. Eg: "This is web.x Consulting".

This function will essentially split any entry using the .split("delimeter") function. Then it will print out words randomly from what you entered using the random() function in a new scrambled sentence.

                            
<script>
    function start2() {
        var button = document.getElementById("randomize");
        button.addEventListener("click", buttonPressed2, false);
    }
    function buttonPressed2() {
        var splitText = document.getElementById('random').value;
        var splitArray = splitText.split(" ");
        document.getElementById('randomFinal').innerHTML = "";
        var newSentence = "";
        for(var i = 0; i < splitArray.length; i++) {
            newSentence += splitArray[Math.floor(-1 + Math.random() * splitArray.length + 1)] + " ";
        }
        document.getElementById('randomFinal').innerHTML = "<p>" + newSentence + "</p>";
    }
    window.addEventListener("load", start2, false);
</script>

Example 3:

This example uses the random function to display random images. The random function is very important in development. In games it allows the the variance in game damage, auto-generated worlds, and etc. It also helps to create variance in user experiences when visiting websites, in video games and etc.

Three random images from the portfolio on the main page are shown each time the page is loaded.

                                
<script>
    var imageArray = ["https://i.imgur.com/kh97J1w.jpg", "https://i.imgur.com/ehYXGMF.jpg",
                      "https://i.imgur.com/BmvOM2x.jpg", "https://i.imgur.com/vwLVyJI.jpg",
                      "https://i.imgur.com/Pp9Ow1l.jpg", "https://i.imgur.com/bUfAULr.jpg",
                      "https://i.imgur.com/d1i4Dsy.jpg", "https://i.imgur.com/L1dRAfq.jpg",
                      "https://i.imgur.com/thhMax3.jpg"];
                      
    var indexArray = Array(3);

    for(var i = 0; i < indexArray.length; i++) {
        indexArray[i] = Math.floor(-1 + Math.random() * imageArray.length + 1)
    }

    document.getElementById('image1').src = imageArray[indexArray[0]];
    document.getElementById('image2').src = imageArray[indexArray[1]];
    document.getElementById('image3').src = imageArray[indexArray[2]];
</script>

Window Object

When browsing more often then not users have to right click something and select opening in a new window to start a new browser with something they were browsing. Javascript allows us to be able to have a single click open a new browser when on a page. For example if you see an image you like and want to view it in full resolution often times you have to right click and open in a new tab or window. The example below will show you how to open content into a new browser window.

This button will open new browser window with the CEO's old resume website.

                    
<script>
    var child;

    function start() {
        document.getElementById('openW').addEventListener('click', open_window, false);
        document.getElementById('closeW').addEventListener('click', close_window, false);
    }

    function open_window() {
        child = window.open("https:\/\/muradkh786.github.io", '', "menubar, toolbar, height=500 width=400");           
        document.getElementById('closeW').disabled = false;
    }
    
    function close_window() {
        if(child.closed == true)
            alert('The window is already closed');    
        else
        {
            child.close();
            document.getElementById('closeW').disabled = true;
        }               
    }      
    window.addEventListener('load', start, false)
</script>

Javascript Properties

Another important aspect of using Javascript is dynamically altering HTML properties. Like image sources, or styles. In the random image example it can be seen that we utilized .src to alter the source images on load. The below example will showcase a simpler example by changing styles to an element.

Enter a valid color in the form of a word or hex value. Eg: "blue" or "#ff4dd2".

This is the text that will change colors.

                        
<script>
    function start3() {
        var button = document.getElementById("colorButton");
        button.addEventListener("click", buttonPressed3, false);
    }

    function buttonPressed3() {
        var colorValue = document.getElementById("color").value;
        document.getElementById("colorChange").style.color = colorValue;
    }
        window.addEventListener("load", start3, false);
</script>

jQuery Demo

While we are JavaScript, we are also learning about some of the more popular libraries like jQuery. Below is a small example on how we can use jQuery to animate elements on a page. Click the button to get the logo to fade out and then slide back in.

Click here

Playground Demo

This last example utilizes a lot of the other exammples and creates a sort of playground demo to allow users to change and create a custom card live. When entering the text size make sure to use a whole number, suggested range: "12-72". When entering the image URL make sure it ends in ".jpg" or ".png" eg: "http://cdn.akc.org/content/hero/puppy-boundaries_header.jpg"

Welcome to the web.X blog