Back to Posts

Hello JavaScript

Javascript is a high-level, dynamic, untyped, and interpreted programming language. It is a scripting language most often used for client-side web development. Alongside HTML and CSS, JavaScript is one of the three core technologies of the World Wide Web; the majority of websites employ it, and all modern Web browsers support it without the need for plug-ins. JavaScript allows web pages to be more dynamic and interactive.

Where and How to add Javascript to web pages

Write JavaScript using the <script> tag. Typically this happens in the <head> of an HTML document as follows:

<html>
	<head>
		<script type="text/javascript"> 
			alert("Hi There!"); 
		</script>
	</head>
	<body>
		Nothing here..
	</body>
</html>

JavaScript can also be written in a separate file and linked to. In this case use the <script> tag and the src attribute like so:

<html>
	<head>
		<script type="text/javascript" src="myscript.js"></script>
	</head>
	<body>
		Nothing here..
	</body>
</html>

or both!

<html>
	<head>
		<script type="text/javascript" SRC="myscript.js"></script>
		
		<script type="text/javascript"> 
			alert("Hi There!"); 
		</script>
	</head>
	<body>
		Nothing here..
	</body>
</html>

👉 One important thing to keep in mind when including a <script> tag in the head of the html is that the javascript code may execute before the rest of the page loads. There are built-in javascript event listeners to solve this issue which we will talk about in the upcoming weeks, a solution would be to include your script tag at the bottom of the <body> instead of in the <head>.

Variables

Defined by var

var avariable; // Declares a variable called avariable
avarable = 15; // Assigns 15 to that variable

In JavaScript, variables are not generally typed… So, you can do this:

var anothervariable = "My Name Is Arielle";
alert(anothervariable);
anothervariable = 15;
alert(anothervariable);

Comments

// single line comment
/* 	
	multiline 
	comment 
*/

Comparison, Conditionals and Loops

Much the same as other languages, so just a few examples here:

var what = true;
var now = 5;

if (what == now) {
	// Then do this
}
else if (1 != 1) {
	// Or this
}
else {
	// Those weren't true..  Let's loop
	
	for (var i = 0; i < now; i++) {
		alert("Counting: " + i);
	}
}

Built-in Javascript Functions

We already looked at alert and you can see what that does..

There are many more built in functions, here they are broken down by object: W3Schools: JavaScript Reference. Make this reference your best friend!!!

Writing your own functions

function dosomething(somedata) {
	var whattosay = "Hi there " + somedata + " , nice to meet you!";
	alert(whattosay);
}

In this example, we use the + symbol for string concatenation.

You would call this function in your javascript like so:

dosomething("arielle");

or, you could include the following line in html:

<input type="button" name="name" value="blah" 
	onClick="dosomething(this.value);" />

We can also reference the divs, buttons, input fields and other html elements as if they were JavaScript objects themselves with functions (methods) and properties. This is referred to as the DOM (Document Object Model). You use the “.” dot syntax.

If you use the “id” attribute you have a short-cut available:

<script type="text/javascript">
	function changeIt(){
		var thediv = document.getElementById('mydiv');
		thediv.innerHTML = "something else";
	}
</script>

Then, in the <body> of your html you would have:

<div id="mydiv">Something</div>

<input type="button" name="changeit" value="Change It" 
	onClick="changeIt();" />