Tag Archives: programming

Defining and using functions in JavaScript

Want to make your own functions in JavaScript? This tutorial explains how to define and call your own functions in JavaScript. It also explains how to use one or more parameters in your function. You can watch the video below or click here to view it on YouTube.

Functions allow you to write lines of code that can be used again and again in different parts of a program without actually having to write the lines of code several times. You can create a function that runs some lines of code (usually a specific set of instructions) and then ‘call’ that function to be used later on. Have a look at the sample code below.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Functions</title>
 <script type="text/javascript">
 
 // This is how you define a function
 function saymessage(){
 // function code goes here
 // more function code goes here
 // example of simple function code below:
 alert('Hello world');
 }
 
 // this is how you 'call' the function
 saymessage();
 
 //or you can call the function from an event like in a form, in the body section below
 </script>
 
</head>
<body>
 <form>
 <input type="button" value="click me" onclick="saymessage();"/>
 </form>
 
 
</body>
</html>

The sample code below shows how to make a function which uses a parameter.  A parameter is like a special variable which is used in a function to refer to a piece of data which is provided as input to the function. These pieces of data are also often called arguments.

The code below shows how to use just one argument. If you want to use more than one argument, scroll further down the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Functions with parameters</title>
 <script type="text/javascript">
 
 /* functions can also use one or more parameters
 a parameter is like a special variable which is used in a function to
 refer to a piece of data which is provided as input to the function. These pieces of
 data are also often called arguments.
 */
 
 // define the function and set the parameter eg. message
 function saymessage(message){
 // function code goes here
 alert(message);
 }
 
 // call the function to be used and provide "Hello world" as an argument to the function.
 saymessage("Hello there");
 </script>
 
</head>
<body>
 
</body>
</html>

This sample code below shows how to use multiple parameters.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Functions with multiple parameters</title>
 <script type="text/javascript">
 
 // define the function and set the parameters separated by comma
 function addNumbers(num1, num2){
 // function code goes here, eg:
 var answer = num1 + num2;
 document.write(answer + "<br/>");
 }
 
 // call the function three times with different parameters
 addNumbers(2,6);
 addNumbers(3,1);
 addNumbers(30,14);
 // notice that there is a <br/> tag in the function, so a new line will be added each time the function is called
 
 </script>
 
</head>
<body>
 
</body>
</html>

Next tutorial: Variable scope

JavaScript and HTML Events

This video tutorial explains how to use buttons use buttons and events such as clicking on a button or moving the mouse over or away from a button. Click here to watch the video on YouTube or view it below.

This sample code snippet shows how to work with events (eg. onclick and onmouseover). It also shows how to use those annoying alert messages…but please, only use them for good! You will also be introduced to HTML form elements such as buttons, mentioned in the video above.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Events</title>
 <script type="text/javascript">
 
 // alert("Welcome to my web page"); would bring up an alert whenever the page loads
 // However, we will use a click event to load an alert message instead, and this will be in the body section of the html page
 
 </script>
 
</head>
<body>
 <form>
 <input type="button" value="click me" onclick="alert('You clicked me');"/>
 <input type="button" value="hover me" onmouseover="alert('You hovered over me');"/>
 
 </form>
 
 
</body>
</html>

JavaScript can also use an event listener to ‘listen’ for other events such as the page loading, a user scrolling down the page or the user pressing a keyboard or mouse button.

Next tutorial: Functions

Working with Strings in JavaScript

This video tutorial explains how to concatenate (join) strings, convert between integers and strings, change text to uppercase and lowercase, and also introduces indexing and arrays.

You can watch the video below or click here to view it on YouTube.  This is the fourth video from the beginners JavaScript tutorial video series.

The sample code snippet below shows how to join (concatenate) strings, find the length of a string (the number of characters in a string), convert from integer to string, display specific characters in a string, split a string up and place each word in a separate array element, and convert string to uppercase and lowercase.

Don’t try all of this in one go. Have a go at one string operation at a time and only move on to the next one when you feel comfortable to.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Strings</title>
 <script type="text/javascript">
 
 var firstName = "Nicolas";
 var lastName = "Cage";
 
 // Concatenation means joining (eg. joining two strings together to form one string
 // Below, is an example of a concatenated string being held in a variable
 var joinednames = firstName + lastName;
 
 // Below, is an example of concatention with spaces added between words.
 document.write(firstName,' ',lastName,' ',"says \"hello\".");
 
 var fullName = firstName + ' ' + lastName; // this combines two variables and a space between the strings into a new variable
 
 document.write(fullName)
 
 var nameLength = fullName.length; // this calculates the length of the string as an integer
 document.write(nameLength);
 
 var age = 20;
 document.write(fullName + age); // this prints the name string and then the variable (no spaces) 
 
 var ageString = age.toString(); // this converts the age integer variable to a string variable
 document.write(ageString);
 
 /* To convert a string to an integer, the variable must firstly contain ony numbers. It can simply be multiplied by 1 to convert to an integer
 eg. newIntVariable = stringVariable * 1
 or you can use parseInt and parseFloat functions eg parseInt('77');
 */
 
 var message = 'Hello world!';
 document.write(message.indexOf('w')) // the indexOf function finds the index number of a character in a string
 document.write(message.charAt(8)) // this gives the character at index number 8
 document.write(message.length) // this will give the length of the string
 
 var messageArray = new Array();
 messageArray = message.split(' '); //this splits the words (where there is a space) into a new array
 document.write(messageArray[0],"</br>"); // this would return "Hello" (and a new line)
 document.write(messageArray[1]); // this would return "world!"
 
 document.write(message.substring(4,8)); //this will show anything between index number 4 and 8
 document.write(message.substr(4,8)); //substr is different to substring. this will show the 8 characters after index number 4.
 
 document.write(message.toUpperCase()); // converts string to uppercase
 document.write(message.toLowerCase()); // converts string to lowercase
 document.write("<b>",message.toUpperCase(),"</b>"); // this prints the uppercase string in bold using the HTML bold element <b>
 document.write("<h1>This is a heading</h1>"); // HTML elements can be put straight into a string
 </script>
 
</head>
<body>
 
 
</body>
</html>

Next tutorial: Events

Operators in JavaScript

In this tutorial, you will learn how to use a range of operators in JavaScript to assign values, modify variables and make calculations.

If you have created your own variables and assigned them each a value (such as a string or integer), then you will already be familiar with the assignment operator which is a single = (equals sign).

Operators include:

Addition +
Subtraction
Division /
Multiplication *
Modulus %
Equals =

You can view the video below to see how to use these operators and scroll down to see the sample code.

 

The code below shows how you can use a range of operators when working variable assignments and calculations.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Operators</title>
 <script type="text/javascript">
 var x = 5, y = 10; //variables can be initialised on one line, separated by commas
 var z = x + y; // this is how variables can be added
 
 z++ //this increases the z variable value by 1
 
 z-- //this decreases the z variable value by 1
 
 // operators include + (plus) - (minus) * (multiply) / (divide) and % (modulus) which returns the remainder from division
 
 x+=y; //this is an example of compound addition. It is the equivalent of x = x + y
 // variables can be added using the compound addition += , compound subtraction -= , compound multiplication *= or compound addition /=
 
 document.write(z); // now let's see what the z variable displays after these modifications.
 
 </script>
 
</head>
<body>
 
 
</body>
</html>

Next tutorial: Strings

Getting started with JavaScript

This is the first video from a beginners tutorial series on JavaScript. In this video, you will learn how to set up an HTML document to use JavaScript code and how to display a message in the web browser using JavaScript. You will also learn how to write the code in a suitable text editor program and how to test your code using the JavaScript console in Google Chrome.

It will be assumed that you already know basic HTML and CSS so if you don’t then please watch the tutorials on HTML5 and CSS3 here first and then come back to the JavaScript videos.

Watch the video below or click here to watch it on YouTube.

The code below can be copied to a HTML file. The HTML code contains JavaScript code which will basically display a “Hello world” message in the browser window. The code also shows examples of using single-line and multi-line comments. Simply copy and paste the code snippet into a text editor and save the file as yourfilename.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript intro</title>
 
 <script type="text/javascript">
 
 document.write("Hello world");
 
 // This is a single-line comment
 
 /*
 This is a multi-line comment.
 Line 9 prints a simple message using a write statement.
 The semi-colon means that is the end of the statement. It is placed at the end of the line.
 */
 
 // To check errors you can use Browser Console (Firefox) or Console (Chrome and IE).
 
 </script>
 
</head>
<body>
 
 
</body>
 
</html>

Next tutorial: Variables and data types

Variables and data types in Python

This tutorial explains how to use variables in Python to store integers and strings. It also explains how to concatenate (join) strings in Python.

In programming, a variable is used to store data in a program. A variable can only store one value at a time, for example some text, a number, or a true/false value.

The different data types that a variable can store include:

  • string – this is text which can include letters, numbers, and other characters. String values are stored inside quotation marks
  • integer – whole numbers
  • float – numbers with a decimal point
  • boolean – a true/false value

You can view the video below or click here to watch it on YouTube.

Numbers and Math in Python

This tutorial explains how to use numbers and math functions in Python. To do math in Python, you can use a range of arithmetic operators including:

  • + for addition
  • – for subtraction
  • * for multiplication
  • / for division
  • % for modulus
  • **2 for squared, **3 for cubed, and so on

For example 5*5 will return the value 25. As you can see, it is just like writing any math expression.

View the video below or click here to view it on YouTube.

Getting started with Python

Welcome to the first Python 3.3 tutorial. Python is a language that is used in a wide range of applications including web-based apps, desktop applications, mobile applications, and games. Python is cross-platform meaning it can be used to code on and for a number of platforms including Windows, Mac and Linux.

Python is a clean, easy-to-read language that is great for beginners to learn. If you’ve never done any programming before then Python is a nice choice.

This video tutorial explains how to use the Python IDE and shell, and how to create your very first program in the Python programming language. View the video below or click here to watch it on YouTube.