JavaScript: Let’s learn JavaScript ver. 6

Last Updated on January 25, 2022 by shibatau

I. What shall we learn?

This is a simple introduction to JavaScript for beginners. Let’s learn JavaScript according to the following tutorial:

JavaScript Variable: Declare, Assign a Value with Example

f you have some knowledge of Python language, the Python codes corresponding to the JavaScript counterparts will help you understand JavaScript codes clearer. So I will try to show you the Python codes after the JavaScript ones shown in the above tutorial.

I will use PyCharm as an IDE because it supports not only JavaScript but also Python and HTML. We can learn those languages simultaneously with PyCharm in an effective way. Let me show you how to use PyCharm for learning those languages. For that purpose you have to install Live Edit beforehand. See the following page:

How to run HTML, CSS and JavaScript codes in PyCharm

II. Create a new project in PyCharm

Select Pure Python and create a New Project. Then, Right Click on the root folder of the project and select New>HTML File.

III. Variable

1.JavaScript

Type the following codes on the HTML file:

<html>
<head>
<title>Variables!!!</title>
<script type="text/javascript">
var a = 10;
var b = 20;
var add = a + b;
var minus = one - two;
var multiply = one * two;
var divide = one/two;
	document.write("First No: = " + one + "<br />Second No: = " + two + " <br />");
	document.write(one + " + " + two + " = " + add + "<br/>");
	document.write(one + " - " + two + " = " + minus + "<br/>");
	document.write(one + " * " + two + " = " + multiply + "<br/>");
	document.write(one + " / " + two + " = " + divide + "<br/>");
</script>
</head>
<body>
</body>
</html>

Right Click on the HTML file and select Debug the file.

You can see the results on the new page on your Google Chrome browser.

2.Python

You will understand what the JavaScript codes mean when you see the corresponding Python codes below:

3.Learn more

You can learn how to use semicolons in JavaScript:

Your Guide to Semicolons in JavaScript

You can learn the way JavaScript codes are put in HTML codes here.

How to add JavaScript to html

IV. Array

1. Access items by index

a.JavaScript

Type the following codes on the HTML file:

<html>
<head>
	<title>Arrays!!!</title>
	<script type="text/javascript">
		// create an array in two ways
		var my_array1 = [11, "aa"];
		var my_array2 = new Array(22, "bb");
		// print arrays
		document.write("my_array1:<br />");
		document.write(my_array1 + "<br />");
		document.write("my_array2:<br />");
		document.write(my_array2 + "<br />");
		// access by index
		document.write("access by index:<br />");
		document.write(my_array1[0] + "<br />");
		document.write(my_array2[1])
	</script>
</head>
<body>
</body>
</html>

b. Python

2. Prototype property

a. JavaScript

You can add new properties and methods using the prototype property.

<html>
<head>
	<title>Arrays!!!</title>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		var students2 = new Array("aaa", "bbb")
		Array.prototype.displayItems=function(){
			for (i=0;i<this.length;i++){
				document.write(this[i] + "<br />");
			}
		}
		// print students
		document.write("print students<br />");
		document.write(students + "<br />");
		// apply the added method to students
		document.write("apply displayItems" + "<br />")
		students.displayItems();
		students2.displayItems();
	</script>
</head>
<body>
</body>
</html>

b.Python

You cannot add methods to built-in types, lists in this case but you can build a subclass of almost any type and add methods or attributes to it. See the following questions and answers:

In Python can you do prototyping of string functions like in JavaScript [duplicate]

3.Learn more

Python.v.JavaScript

JavaScript Array Methods: Create with Example

V. Loops

We will learn about Loops from the tutorial:

For, While and Do While LOOP in JavaScript (with Example)

1.For loops

Created by author with R

a.JavaScript

Syntax:

for (statement 1; statement 2; statement 3) {
// code block to be executed
}

<html>
<head>
	<script type="text/javascript">
		var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
		document.write("<b>Using for loops </b><br />");
		for (i=0;i<students.length;i++)
		{
		document.write("The name is " + students[i] + "<br />");
		}
	</script>
</head>
<body>
</body>
</html>

b.Python

2.While loops

a.JavaScript

You can run JavaScript codes in HTML codes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>For loop</title>
    <script type="text/javascript">
        let x = 10
        while(x > 1) {
          document.write(x + "<br />");
          x--;
        }
    </script>
</head>
<body>
</body>

You can run JavaScript codes and show the result in the console.

let x = 10
while(x > 1) {
  console.log(x);
  x--;
}

b.Python

x = 10
while x > 1:
  print(x)
  x -= 1

To be continued.

About shibatau

I was born and grown up in Kyoto. I studied western philosophy at the University and specialized in analytic philosophy, especially Ludwig Wittgenstein at the postgraduate school. I'm interested in new technology, especially machine learning and have been learning R language for two years and began to learn Python last summer. Listening toParamore, Sia, Amazarashi and MIyuki Nakajima. Favorite movies I've recently seen: "FREEHELD". Favorite actors and actresses: Anthony Hopkins, Denzel Washington, Ellen Page, Meryl Streep, Mia Wasikowska and Robert DeNiro. Favorite books: Fyodor Mikhailovich Dostoyevsky, "The Karamazov Brothers", Shinran, "Lamentations of Divergences". Favorite phrase: Salvation by Faith. Twitter: @shibatau

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.