Coding Class with KK

|♚|KK|♚| · Nov 20, 2017

I plan to start with JavaScript, because I've started learning it recently. But I will try to include other languages too later on, if I can.^^

These lessons are from SoloLearn, (so most of the image and text source will be from there) a community for teaching and learning coding using many languages. And I will add my own notes of course, plus my thoughts so tag along!

-JavaScript-

Let's start with taking a look of what is the meaning of this language.

-JavaScript is one of the most popular programming languages on earth and is used to add interactivity to webpages, process data, as well as create various applications (mobile apps, desktop apps, games, and more)

Note: Learning the fundamentals of a language will enable you to create the program you desire, whether client-side or server-side.

So with this language you can use to create interactive web elements!

Now let's try creating our first JS.

Let's use JavaScript to print "Hello World" to the browser.

Output

Code:

<html>
   <head> </head>
   <body>
     <script>
       document.write("Hello World!");
     </script>
   </body>
</html>

The document.write() function writes a string into our HTML document. This function can be used to write text, HTML, or both.

The above code displays the following result:

Note: The document.write() method should be used only for testing. Other output mechanisms appear in the upcoming lessons.

Formatting Text
Just like in HTML, we can use HTML tags to format text in JavaScript.
For example, we can output the text as a heading.

Code:

<html>
   <head> </head>
   <body>
     <[U]script[/U]>
       document.write("[B]<h1>[/B]Hello World![B]</h1>[/B]");
     </script>
   </body>
</html>

Result:

JavaScript in <head>
You can place any number of scripts in an HTML document.
Typically, the script tag is placed in the head of the HTML document:

Code:

<html>
   <head>
     <script>
     </script>
   </head>
   <body>
   </body>
</html>

JavaScript in <body>
Alternatively, include the JavaScript in the <body> tag.

Code:

<html>
   <head> </head>
   <body>
     <script>
     </script>
   </body>
</html>

Note: It's a good idea to place scripts at the bottom of the <body> element.
This can improve page load, because HTML display is not blocked by scripts loading.

The <script> Tag
The <script> tag can take two attributes, language and type, which specify the script's type:

Code:

<script language="javascript" type="text/javascript">

</script>

Note: The language attribute is deprecated, and should not be used.

In the example below, we created an alert box inside the script tag, using the alert() function.

Code:

<html>
   <head>
     <title></title>
     <script type="text/javascript">
       alert("This is an alert box!");
     </script>
   </head>
   <body>
   </body>
</html>

Result:

Note: The type attribute: <script type="text/javascript"> is also no longer required, as JavaScript is the default HTML scripting language.

JavaScript in <head>
You can place any number of scripts in an HTML document.
Typically, the script tag is placed in the head of the HTML document:

Code:

<html>
   <head>
     <script>
     </script>
   </head>
   <body>
   </body>
</html>

JavaScript in <body>
Alternatively, include the JavaScript in the <body> tag.

Code:

<html>
   <head> </head>
   <body>
     <script>
     </script>
   </body>
</html>

Note: It's a good idea to place scripts at the bottom of the <body> element.
This can improve page load, because HTML display is not blocked by scripts loading.

The <script> Tag
The <script> tag can take two attributes, language and type, which specify the script's type:

Code:

<script language="javascript" type="text/javascript">

</script>

Note: The language attribute is deprecated, and should not be used.

In the example below, we created an alert box inside the script tag, using the alert() function.

Code:

<html>
   <head>
     <title></title>
     <script type="text/javascript">
       alert("This is an alert box!");
     </script>
   </head>
   <body>
   </body>
</html>

Result:

++will add more content soon!:D

|♚|KK|♚| · Nov 20, 2017

Let's continue our lesson today! :)

External JavaScript
Scripts can also be placed in external files.
External scripts are useful and practical when the same code is used in a number of different web pages.
JavaScript files have the file extension .js.

Below, we've created a new text file, and called it demo.js.

External JavaScript
To use an external script, put the name of the script file in the src (source) attribute of the <script> tag.

Here is an example:

Code:

<html>
   <head>
     <title> </title>
     <script src="demo.js"></script>
   </head>
   <body>
   </body>
</html>

Your demo.js file includes the following JavaScript:

Code:

alert("This is an alert box!");

Note: External scripts cannot contain <script> tags.

External JavaScript
The result of the previous example will be identical to the result when we included the JavaScript within the HTML file.

You can place an external script reference in <head> or <body>, whichever you prefer.
The script will behave as if it were located exactly where the <script> tag is located.

Note: Placing a JavaScript in an external file has the following advantages:
- It separates HTML and code.
- It makes HTML and JavaScript easier to read and maintain.
- Cached JavaScript files can speed up page loads.

JavaScript Comments
Not all JavaScript statements are "executed".
Code after a double slash //, or between /* and */, is treated as a comment.
Comments are ignored, and are not executed.

Single line comments use double slashes.

Code:

<script>
   // This is a single line comment
   alert("This is an alert box!");
</script>

Result:

Note: Nothing will change on the output.

Multiple-Line Comments

Everything you write between /*and */ will be considered as a multi-line comment.

Here is an example.

Code:

<script>
   /* This code 
   creates an 
   alert box */
   alert("This is an alert box!");
</script>

Note: Comments are used to describe and explain what the code is doing.

Let's make a small quiz!

1.What are the three core languages in web pages?
Select all that apply

A)CSS
B)HTML
C)JavaScript
D)PHP

A-B-C

2.Please fill in the missing commands to add the file "code.js" to your web page.
<script ____="text/javascript"____ ="code.js"></___>

src-type-script

3.Why is the Javascript code being placed just before the closing body tag?

A)To comply with the standards
B)To let the web page fully load in the browser window
C)That's the only possible way

B

And that's it! How did it go? Even if you made a mistake you can always study it again, on my next post I will make another quiz. ^^

|♚|KK|♚| · Nov 20, 2017

Are you ready to test yourself by the things you've learned so far? Let's go!

1.Select the correct statement:

A)JavaScript is a server-side only language
B)JavaScript is used only for web apps
C)You can use JavaScript to create interactive web elements

C

2.What tag contains the JavaScript code?

A)style
B)code
C)body
D)script

D

3.Please type in a code to output the "Hello world!" text on the screen.

<script>document._____("Hello world!");</script>

write

4.Which choice can be added within the text to be displayed?

A)Folders
B)JavaScript commands
C)Formatting tags

C

5.Where is the "script" tag typically placed?

A)Inside the HEAD tag
B)Before the HTML tag
C)After the closing HTML tag

A

5.Where else is the "script" tag typically placed?

A)Inside the form element
B)Inside the table element
C)Inside the BODY tag

C

6.What attribute and what value is used along with the script tag?

<script___="text/______">

type-javascript

7.What extension is used for the JavaScript file?

.__

js

8.What attribute of the script tag is used for adding the external JavaScript file?

___

src

9.Please add the corresponding keywords to add the external sample.js file to the web page.

<____ ____="text/javascript" ____="sample.js"></script>

script type-src

10.How does the single line comment look like?

A)%%this is a comment
B)// this is a comment
C)
D)**this is a comment

B

11.Create a multi-line comment in JavaScript.

__this is a
multiline
comment__

/*-*/

Congrats! You've finished, how was it? I hope it was easy, because believe me these are very simple!
Next lesson we will start learning Basic Concepts! Tag along~

|♚|KK|♚| · Nov 20, 2017

/me adjusts her glasses.

Welcome back to our session, let's start shall we? :boys_read:

Variables
Variables are containers for storing data values. The value of a variable can change throughout the program.
Use the var keyword to declare a variable:

Code:

var x = 10;

In the example above, the variable x is assigned the value 10.

Note: JavaScript is case sensitive. For example, the variables lastName and lastname, are two different variables.

The Equal Sign
In JavaScript, the equal sign (=) is called the "assignment" operator, rather than an "equal to" operator.
For example, x = y will assign the value of y to x.

Note: A variable can be declared without a value. The value might require some calculation, something that will be provided later, like user input.
A variable declared without a value will have the value undefined.

Using Variables
Let's assign a value to a variable and output it to the browser.

Code:

var x = 100;
document.write(x);

Result:

Using variables is useful in many ways. You might have a thousand lines of code that may include the variable x. When you change the value of x one time, it will automatically be changed in all places where you used it.

Note: Every written "instruction" is called a statement. JavaScript statements are separated by semicolons.

Naming Variables
JavaScript variable names are case-sensitive.
In the example below we changed x to uppercase:

Code:

var x = 100;
document.write(X);

This code will not result in any output, as x and X are two different variables.

Naming rules:
- The first character must be a letter, an underscore (_), or a dollar sign ($). Subsequent characters may be letters, digits, underscores, or dollar signs.
- Numbers are not allowed as the first character.
- Variable names cannot include a mathematical or logical operator in the name. For instance, 2*something or this+that;
- JavaScript names must not contain spaces.

Note: Hyphens are not allowed in JavaScript. It is reserved for subtractions.

Naming Variables
There are some other rules to follow when naming your JavaScript variables:

- You must not use any special symbols, like my#num, num%, etc.
- Be sure that you do not use any of the following JavaScript reserved words.

Note: When you get more familiar with JavaScript, remembering these keywords will be much easier.

|♚|KK|♚| · Nov 20, 2017

Data Types
The term data type refers to the types of values with which a program can work. JavaScript variables can hold many data types, such as numbers, strings, arrays, and more.

Unlike many other programming languages, JavaScript does not define different types of numbers, like integers, short, long, floating-point, etc.

JavaScript numbers can be written with or without decimals.

Code:

var num = 42; // A number without decimals

Floating-Point Numbers
JavaScript numbers can also have decimals.

Code:

<script>
  var price = 55.55;
  document.write(price);
</script>

Result:

Note: JavaScript numbers are always stored as double precision floating point numbers.

Strings
JavaScript strings are used for storing and manipulating text.
A string can be any text that appears within quotes. You can use single or double quotes.

Code:

var name = 'KK';
var text = "My name is KK";

You can use quotes inside a string, as long as they don't match the quotes surrounding the string.

Code:

var text = "My name is 'KK' ";

Strings
As strings must be written within quotes, quotes inside the string must be handled. The backslash (\) escape character turns special characters into string characters.

Code:

var sayHello = 'Hello world! \'I am a JavaScript programmer.\' ';
document.write(sayHello);

Result:

The escape character (\) can also be used to insert other special characters into a string.
These special characters can be added to a text string using the backslash sign.

Note: If you begin a string with a single quote, then you should also end it with a single quote. The same rule applies to double quotes. Otherwise, JavaScript will become confused.

Booleans
In JavaScript Boolean, you can have one of two values, either true or false.
These are useful when you need a data type that can only have one of two values, such as Yes/No, On/Off, True/False.

Example:

Code:

var isActive = true; 
var isHoliday = false;

Note: The Boolean value of 0 (zero), null, undefined, empty string is false.
Everything with a "real" value is true.

Next up is another quiz!:)

|♚|KK|♚| · Nov 20, 2017

If you're ready let's go!^^

1.Which keyword is used to tell JavaScript that we're going to work with a variable?

A)var
B)int
C)variable
D)vrb

A

2.What is the "=" (equal sign) called in JavaScript?

A)Assignment operator
B)Equal to
C)Is equivalent

A

3.Use the corresponding keyword to complete the statement.

__my_variable = 32;

var

4.What characters can be used to start a variable?

A)Mathematical operators
B)Numbers
C)Underscore sign (_)
D)Letters

C-D

5.What characters cannot be used in variable names?

A)Numbers
B)Special symbols (%, #, etc.)
C)Letters
D)Underscore sign

B

6.Fill in the blanks to declare a variable age and assign it the number 18:

__age = __;

var-18

7.A floating point number:

A)Is always positive
B)Is always smaller than 0
C)Is allowed to have a decimal place

C

8.In order to create a string, we need to put the text inside...

A)Quotation marks
B) symbols
C)<string> </string> tag

A

9.Please enter the corresponding characters to enable the display of the whole string:

var s = "I think__"JavaScript is easy__" ";document.write(s);

\-\

10.What two values does the Boolean data type accept?
Select all that apply

A)wrong
B)false
C)true
D)right

B-C

I hope you enjoyed this quiz, we're learning more and more :)
Next we will learn Math Operators!

|♚|KK|♚| · Nov 22, 2017

Time for some math! Who doesn't like math?:P

Arithmetic Operators
Arithmetic operators perform arithmetic functions on numbers (literals or variables).

In the example below, the addition operator is used to determine the sum of two numbers.

Code:

var x = 10 + 5;
document.write(x);

// Outputs 15

You can add as many numbers or variables together as you want or need to.

Code:

var x = 10;
var y = x + 5 + 22 + 45 + 6548;
document.write(y);

//Outputs 6630

Multiplication
The multiplication operator (*) multiplies one number by the other.

Code:

var x = 10 * 5;
document.write(x);

// Outputs 50

Division
The / operator is used to perform division operations:

Code:

var x = 100 / 5;
document.write(x);

// Outputs 20

The Modulus
Modulus (%) operator returns the division remainder (what is left over).

Code:

var myVariable = 26 % 6;

//myVariable equals 2

Note: In JavaScript, the modulus operator is used not only on integers, but also on floating point numbers.

Increment & Decrement
Increment ++
The increment operator increments the numeric value of its operand by one. If placed before the operand, it returns the incremented value. If placed after the operand, it returns the original value and then increments the operand.
Decrement --
The decrement operator decrements the numeric value of its operand by one. If placed before the operand, it returns the decremented value. If placed after the operand, it returns the original value and then decrements the operand.
Some examples:

Note: As in school mathematics, you can change the order of the arithmetic operations by using parentheses.
Example: var x = (100 + 50) * 3;

And that's it, not that difficult right? Next lesson, we'll learn Assignment Operators!^^

|♚|KK|♚| · Nov 24, 2017

Time for today's lesson!^^

Assignment Operators
Assignment operators assign values to JavaScript variables.

Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables or values. They return true or false.
The equal to (==) operator checks whether the operands' values are equal.

Code:

var num = 10; 
// num == 8 will return false

Comparison Operators
The table below explains the comparison operators.

Note : When using operators, be sure that the arguments are of the same data type; numbers should be compared with numbers, strings with strings, and so on.

Logical Operators
Logical Operators, also known as Boolean Operators, evaluate the expression and return true or false.
The table below explains the logical operators (AND, OR, NOT).

Logical Operators
In the following example, we have connected two Boolean expressions with the AND operator.

Code:

(4 > 2) && (10 < 15)

For this expression to be true, both conditions must be true.
- The first condition determines whether 4 is greater than 2, which is true.
- The second condition determines whether 10 is less than 15, which is also true.
Based on these results, the whole expression is found to be true.
Conditional (Ternary) Operator
Another JavaScript conditional operator assigns a value to a variable, based on some condition.
Syntax:

Code:

variable = (condition) ? value1: value2

For example:

Code:

var isAdult = (age < 18) ? "Too young": "Old enough";

If the variable age is a value below 18, the value of the variable isAdult will be "Too young". Otherwise the value of isAdult will be "Old enough".

Note : Logical operators allow you to connect as many expressions as you wish.

String Operators
The most useful operator for strings is concatenation, represented by the + sign.
Concatenation can be used to build strings by joining together multiple strings, or by joining strings with other types:

Code:

var mystring1 = "I am learning ";
var mystring2 = "JavaScript with SoloLearn.";
document.write(mystring1 + mystring2);

The above example declares and initializes two string variables, and then concatenates them.

Note : Numbers in quotes are treated as strings: "42" is not the number 42, it is a string that includes two characters, 4 and 2.

Next up is another quiz, so get ready!^^

|♚|KK|♚| · Nov 24, 2017

1.What will display in the result of the following statements?
var test=5+7;
document.write(test);

a)5+7
b)12
c)Test

b

2.What character is used as the multiplication sign?

a)x
b)&
c)*

c

3.Enter the character designated for division:

_

/

4.What is the result of using modulus operator for 38%5?

_

3

5.Increment and decrement are used for:

a)Adding or subtracting 1 from a number
b)To change the sign of the number to "+" or "-"
c)To get the remainder of the division of two numbers

a

6.Please calculate and type the resulting value of the following expression:
var result = 20;
result *= 5;

_

100

7.The comparison operators return:
Select all that apply

a)right
b)wrong
c)true
d)false

c-d

8.Please enter the corresponding operators according to the comments at right.
val1_val2 // are equal
val1!_val2 // not equal
val1_val2 // less than
val1_val2 // are strict equal (identical)

==/=/</===

9.Logical AND (&&) returns true if:

a)If one of the operands is true, but not both
b)Both operands are true
c)If only one of the operands is true

b

10.Logical NOT returns true, if:

a)The operand is true
b)The operand is false

b

11.What is the output of the following code:
var x = "50";
var y = "100";
document.write(x+y);

a)5000
b)150
c)Null
d)50100

d

Next up is a quiz of this whole module starting from Variables!:)

|♚|KK|♚| · Nov 24, 2017

Don't worry it's only 3 questions! :P

1.Choose the names that are acceptable for JavaScript variables.
Select all that apply

a)firstNumber
b)1tv
c)_module
d)total%sum

a-c

2.Please fill in the data types of the data shown below in the comments field:
12 // number"some text" // ___true //___

string-boolean

3.What's the result of the expression var1&&var2, if var1=true and var2=false?

a)true
b)false
c)undefined

b

Congrats! You've finished all Basic Concepts! Next we will learn Conditionals and Loops, see you there. :)

Search

Search

Coding Class with KK

|♚|KK|♚|

Guest

|♚|KK|♚|

Guest

|♚|KK|♚|

Guest

|♚|KK|♚|

Guest

|♚|KK|♚|

Guest

|♚|KK|♚|

Guest

|♚|KK|♚|

Guest

|♚|KK|♚|

Guest

|♚|KK|♚|

Guest

|♚|KK|♚|

Guest

Similar threads

Users who are viewing this thread

Recent posts

Latest profile posts