- What is JavaScript
- JavaScript is a dynamically typed interpreted language (like Python) which uses bracket syntax (like Go).
- JavaScript was born online and is one of the core technologies the internet runs on.
- It's possible to run JavaScript outside of a browser, and some servers are written using JavaScript.
- JavaScript Syntax
You now have enough familiarity with programming languages to pick up the basics of a language by seeing code samples and experimenting on your own. Here are a few of functions we've seen in the course notes, implemented in JavaScript:
function printStarTriangle(n) {
for (let i = 1; i <= n; i += 1) {
console.log("*".repeat(i));
}
}
function maxOfList(a) {
var max = a[0]
for (let i = 0; i < a.length; i += 1) {
if (a[i] > max) {
max = a[i]
}
}
return max
}
function isPalindrome(s) {
for (let i = 0; i < s.length; i += 1) {
if (s[i] != s[s.length-i-1]) {
return false
}
}
return true
}
- Using JavaScript in HTML
Just like CSS can be added to HTML pages in <style> tags, JavaScript can be added to HTML with <script> tags.
The following tiny website runs a script that just alerts "Hello World!" See it in action here.
<!DOCTYPE html>
<html>
<head>
<script>
alert("Hello World!")
</script>
</head>
</html>
- Linking JavaScript to Events
Every HTML element has attributes that we can use to connect "handler" functions to their events.
For example, we can move the "Hello World!" alert into a function and set that function as the "handler" for a button's "onclick" event. Now the alert will only appear when we click the button.
See it in action here.
<!DOCTYPE html>
<html>
<head>
<script>
function sayHello() {
alert("Hello World!")
}
</script>
</head>
<body>
<button onclick="sayHello()">Click Me!</button>
</body>
</html>
- Using JQuery
- Bootstrap builds on the core functionality of CSS and makes it easier to style our webpages. Similarly, JQuery builds on JavaScript's core features and makes it easier to interact with our pages.
- JQuery allows us to use the syntax
$("selector") to use a CSS selector to access an element, and then it exposes functions that allow us to change that element's appearance, text, add sub-elements, etc.
- JQuery is automatically included when you import Bootstrap and its dependencies.
- This example usess JQuery to toggle a message (set a paragraph element's text) on a button click. See it in action here
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
var messages = ["Hello World!", "Carpe Diem", "DFTBA", "42", "15-112"]
var messageIndex = 0
function changeMessage() {
messageIndex += 1
messageIndex %= messages.length
$("#message").text(messages[messageIndex])
}
</script>
</head>
<body>
<p id="message">Hello World!</p>
<button class="btn btn-small btn-primary" onclick="changeMessage()">Change The Message</button>
</body>
</html>
- Putting It all Together
This is an extension of our blog from the HTML & CSS notes. It now has a third post that tracks the number of times you've clicked a button inside of it.
See it live here
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<title>15-112 Blog</title>
<style>
.content {
padding: 10px;
}
.card {
margin-bottom: 10px;
}
</style>
<script>
var clicks = 0;
function post3Clicked() {
clicks += 1;
$("#clickCounter").text(clicks);
}
</script>
</head>
<body>
<div class="content">
<h1>15-112 Blog</h1>
<hr>
<div class="card">
<div class="card-body">
<h5>Post 1</h5>
<p>This is our first post</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5>Post 2</h5>
<p>This post has some of my favorite websites</p>
<ol>
<li><a href="https://cs.cmu.edu/~112">Course Website</a></li>
<li><a href="https://docs.python.org/3/">Python Documentation</a></li>
</ol>
</div>
</div>
<div class="card">
<div class="card-body">
<h5>Post 3</h5>
<p>This post has a button. You've clicked it <span id="clickCounter">0</span> times</p>
<button class="btn btn-small btn-secondary" onclick="post3Clicked()">Click Me!</button>
</div>
</div>
</div>
</body>
</html>