Search
  • Rachael Kim

Basics of JavaScript (Web Programming 4)

On Oct/31, we learnt the basics of JavaScript!

Class 4
.pdf
Download PDF • 251KB
  1. What is JavaScript?

JavaScript is a programming language used to make website interactive. It is often abbreviated as JS.


2. Variable

  • Variables are “containers” that store values

  • Variables can have different values: numbers, texts, booleans (true, false), HTML elements

Constants vs Variables

  • Constant: variables that do not change

  • Variables: variables that do change


3. Different Types of Variables


JS Types are Dynamic: you can change the type of the variable to whatever you want, even if it’s different from your initial assignment


Numbers

  • With decimals: 24.05

  • Without decimals: 23, 24

String

  • Text

Booleans

  • True

  • False

Do typeof to check the type of a variable.


You declare variable in JS by using var keyword.

var x = 30; //You declared a variable called x with value of 30.

var text = 'hi'; //You declared a variable called text with value 'hi'.

typeof text; //this will return 'text'

4. Math Operators


You can do basic math operations with JavaScript.

  • Add: +

  • Subtract: -

  • Multiply: *

  • Divide: /

  • Exponent: **

Codepen does not print out the results directly on to your HTML result screen, because you are not giving any commands to print the results of your math equation onto your HTML webpage. Instead, you can use 'inspect' panel of Chrome.


1) Right click anywhere on your google Chrome page

2) Select Inspect

3) Select Console panel from the top

4) Type in your JS code!

5) Try using math operators! (Hit enter when you are done with writing your JS code!)

5. Increment/Decrement


Sometimes you need to add 1 to a variable repeatedly (in a loop).

You can do so by:

  • x = x + 1;

  • x++;

Similarly, when you need to subtract 1 from a variable,

You can do:

  • x = x - 1;

  • x--;


6. Math operator part 2:


7. alert


You can give a popup message to the visitors of your website my using alert method on JavaScript.

There are two ways to do this:

alert("hi!");
window.alert("hi!");

You should get:

Try this link:

https://codepen.io/Subinkim/pen/xxOgaqz?editors=1010


8. document.write()


Using document.write(), we can directly interact with HTML.

document.write() is used to add new text to your HTML.

Your new text added to HTML will not be encapsulated in a HTML tag.

And the new text will be added at the end of all elements you have.

document.write(4+5);

This will print 9 on your webpage.


9. Modifying your HTML elements using JavaScript

Here, I defined two HTML elements: h1 element with class title and p element with id paragraph.

In JS, if you want to fetch an element with certain name/class/id, you do:

document.querySelector();

Similar to CSS, you use period (.) when you want to tell JS that you are looking for a class with the following name. e.g.

document.querySelector('.title');

For id, you use hashtag (#):

document.querySelector('#paragraph');

If you want to get element with certain tag, you do:

document.querySelector('h1');
document.querySelector('p');

You can set a variable to have HTML element as its value.

var title = document.querySelector('.title');

You can modify content within HTML tags of your selected element using innerHTML.

document.querySelector('.title').innerHTML = 'Hey!';

Since you have assigned the above element to a variable, you can also change the content by calling innerHTML method on the variable:

title.innerHTML = 'Hey!';

Experiment with this here:

https://codepen.io/Subinkim/pen/XWKELGM


8 views

Recent Posts

See All

Web Programming Class 3

In class 3, we went over some more basics of HTML and CSS. Adding external links to your webpage <a href="google.com">LINK</a> Above code will produce a link to Google. *NOTE: codepen.io does not let

First Class (Python Section)!

It's great to be back and see all of our students (new and returning) for our fall course! In our Python section, we covered some basic but key concepts in Python, including variables, loops, conditio

Phillips Exeter Academy Girls Who Code

Phillips Exeter Academy

20 Main Street

Exeter, NH 03833

Quick Links

© 2020 by Exeter Girls Who Code

This site was designed with the
.com
website builder. Create your website today.
Start Now