ReactJS radio button

This entry is part 3 of 35 in the series React JS

http://jsbin.com/mozegodapa/edit?html,js,console,output

class App extends React.Component {

  setFruit(event) {
    console.log(event.target.value);
  }

  render() {
    return (
      <div onChange={this.setFruit.bind(this)}>
        <input type="radio" value="Apple" name="fruit"/> Apple
        <input type="radio" value="Orange" name="fruit"/> Orange
      </div>
     )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

jQuery: A simple slider

This entry is part 33 of 33 in the series jQuery Tutorial

This is a simple jQuery slider and notice how I have used the if else statement to determine the state of the slider.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #hideme { 
                background:#de9a44; 
                width:120px;
                height:25px; 
                display:none; 
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <p>Hover On Me!</p>
        <div id="hideme"><h3>Rock & Roll</h3></div>

        <script>
            $(document.body).hover(function () {
                if ($("#hideme").is(":hidden")) {
                    $("#hideme").slideDown("slow");
                } else {
                    $("#hideme").hide();
                }
            });

        </script>

    </body>
</html>

Try The Code

 

Checking the width of an image file

There was a plugin in WordPress that I used which allows an image to be uploaded.  This part of the code was done in Javascript and not in PHP.  When the image file is uploaded, I want it to prompt a message if the width of the image is smaller than 700px.

In Javascript, once the file is uploaded, it is put into a file object.  As with any other object, we could get other properties of this file object such as its name.  If the file object is file, we could get the name by using file.name.

Making use of file object property file.name, this is how I get the full path of the image file and pass it to img.src to check its width.

var d = new Date();
var mth = d.getMonth() + 1;
var str1;
            
if (mth == 11) {
    str1 = '//localhost/wordpress/wp-content/uploads/2015/11/';
}
else if (mth == 12) {
    str1 = '//localhost/wordpress/wp-content/uploads/2015/12/';
}
                       
var str2 = str1.concat(file.name);

var img = new Image();
img.onload = function () {
    if (this.width < 700) {
        alert('The size of the photo is too small.');
    }
}
img.src = str2;

Javascript: Using Netbeans

This entry is part 3 of 27 in the series Javascript Tutorial

If you are not ready to purchase a copy of Webstorms from Jetbrains, you can always use Netbeans.

Netbeans has been supporting HTML5 development since version 7.2.

1.  The first thing that you need to do is to download the bundle that support HTML5/Javascript.  Try to download the all bundle version instead.

2.  If you are using Chrome, you need also to download a Netbeans connector.

3.  Netbeans connector provides integration between Netbeans IDE and Google Chrome browser.

4.

netbeansconnector

5. From Chrome, navigate to the link above and click on Add to Chrome.

6. Since you are having a full bundle version, it should support HTML5/Javascript.

7.  Launch Chrome

8.  html51

9.  As shown in the screenshot above, click on HTML5 and HTML5 Application.  Click on Next.

10. After clicking next, you should see the screenshot below.

html52

11.  Simply click on Next.

12.

html53

13.  In the step to select site template, click on No Site Template.

14.  Next, you might not need jQuery now but let’s add jQuery to it.

15.

html55

 

16.  A template with the following screenshot will be created.

17.  html56

 

18.  Now click on the green arrow button to run it.

html57

19.  The Chrome browser will be loaded as shown in the following screenshot.

20.

html58

Javascript: Global variables

This entry is part 10 of 27 in the series Javascript Tutorial

The scope containing all of a program is called global scope.

This is the scope you are in when entering a script.  When you define a variable here, the variable can be accessed by all functions.

Inside the global scope, you can create a nested scope by defining a function.

<!DOCTYPE html>
<html>
<head>
    <title>Global Variables</title>
    
    <script>
        var global_str = 'I am a global string';

        function updateFunction() {
            var local_str = 'I am a local string';
            document.getElementsByTagName('p')[0].innerHTML = local_str;
        }
    </script>

</head>
<body>
<p>I am a string</p>
<button onclick='updateFunction()'>Click Me</button>
<br>
<script>
    document.write(global_str);
</script>
</body>
</html>