Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

Learn JavaScript Journey Part 1

This is will be a post series were I will try to document my journey on learning Javascript. Since I am student ant this year we will have a subject of JavaScript it is the best time to start today.

Learning Java Script Journey 1

So first I went threw the material we were given at the college as study material. Since I skipped the first class since I am currently away I thought I will do more and learn more then less.

The first reference for learning JavaScript was the https://www.w3schools.com/JS/js_intro.asp

That is all in all a great knowledge base for HTML, CSS and JavaScript. But for me I needed a better way so I went for a www.codecademy.com.

Went threw the first lessons and I learned this:

Types and Operators

This what I have learned so far.

  • Four essential data types in JavaScript include strings, numbers, booleans, and null.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
console.log('JavaScript'); // String - can bet with single quotes ('Hello') or double quotes ("World!").
console.log(33.7); // Numbers - Any number, including numbers with decimals: 4, 1516, .002, 23.42. In the example above, 40.7 is a number.
console.log(true); // Booleans Either true or false, with no quotations. In the example above, true is a boolean.
console.log(null); // Null Can only be null. It represents the absence of value.
console.log('JavaScript'); // String - can bet with single quotes ('Hello') or double quotes ("World!"). console.log(33.7); // Numbers - Any number, including numbers with decimals: 4, 1516, .002, 23.42. In the example above, 40.7 is a number. console.log(true); // Booleans Either true or false, with no quotations. In the example above, true is a boolean. console.log(null); // Null Can only be null. It represents the absence of value.
console.log('JavaScript'); // String - can bet with single quotes ('Hello') or double quotes ("World!").
console.log(33.7); // Numbers - Any number, including numbers with decimals: 4, 1516, .002, 23.42. In the example above, 40.7 is a number.
console.log(true); // Booleans Either true or false, with no quotations. In the example above, true is a boolean.
console.log(null); // Null Can only be null. It represents the absence of value.
  • Data is printed, or logged, to the console with command console.log().
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
console.log("Pineaplle");
console.log("MATRIX");
console.log("Pineaplle"); console.log("MATRIX");
console.log("Pineaplle");
console.log("MATRIX");

Gets you an output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Pineaplle
MATRIX
Pineaplle MATRIX
Pineaplle
MATRIX
  • Four built-in mathematical operators include +-*, and /.

Using these you can perform various mathematical operations:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
console.log(32 + 3.5);
console.log(2017 - 1969);
console.log(65 / 240);
console.log(0.2708 * 100)
console.log(32 + 3.5); console.log(2017 - 1969); console.log(65 / 240); console.log(0.2708 * 100)
console.log(32 + 3.5);
console.log(2017 - 1969);
console.log(65 / 240);
console.log(0.2708 * 100)

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
35.5
48
0.2708333333333333
27.08
35.5 48 0.2708333333333333 27.08
35.5
48
0.2708333333333333
27.08
  • JavaScript associates certain properties with different data types.

Using those properties you can find out the length of the text you get:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
console.log('Teaching the world how to code'.length)
console.log('Teaching the world how to code'.length)
console.log('Teaching the world how to code'.length)

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
30
30
30
  • JavaScript has built-in methods for different data types.

You can perform various different actions with built-in methods. You can find a list of built-in string methods in the JavaScript documentation. Developers use documentation as a reference tool. It describes JavaScript’s keywords, methods, and syntax.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Log Codecademy in all uppercase letters
console.log('Codecademy');
console.log('Codecademy'.toUpperCase())
console.log('Hey'.startsWith('H'))
// Use a string method to log the following statment without whitespace at the beginning and end of it.
console.log(' Remove whitespace '.trim());
// Log Codecademy in all uppercase letters console.log('Codecademy'); console.log('Codecademy'.toUpperCase()) console.log('Hey'.startsWith('H')) // Use a string method to log the following statment without whitespace at the beginning and end of it. console.log(' Remove whitespace '.trim());
// Log Codecademy in all uppercase letters
console.log('Codecademy'); 
console.log('Codecademy'.toUpperCase())

console.log('Hey'.startsWith('H'))

// Use a string method to log the following statment without whitespace at the beginning and end of it.
console.log('    Remove whitespace   '.trim());

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Codecademy
CODECADEMY
true
Remove whitespace
Codecademy CODECADEMY true Remove whitespace
Codecademy
CODECADEMY
true
Remove whitespace
  • Libraries are collections of methods that can be called without an instance.

You can find all the different Math methods in the JavaScript math library.

When you want to call a method without an instance. You can use JavaScript libraries for this. Libraries contain methods that you can call without creating an instance.

One collection contains mathematical methods, aptly named the Math library which have these examples below.

And also there are way more then mentioned previously. For example Built In Number library.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
console.log(Math.floor(Math.random() * 100 )); //random number rounded to decimal
console.log(Math.ceil(43.8));
console.log(Number.isInteger(2017));
console.log(Math.floor(Math.random() * 100 )); //random number rounded to decimal console.log(Math.ceil(43.8)); console.log(Number.isInteger(2017));
console.log(Math.floor(Math.random() * 100 )); //random number rounded to decimal

console.log(Math.ceil(43.8));

console.log(Number.isInteger(2017));

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
78
44
true
78 44 true
78
44
true
  • You can write single-line comments with // and multi-line comments between /*and */.

There are only two types of comments. But you can use them to perform all the tasks.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//Opening line
console.log('It was love at first sight.');
/*console.log('The first time Yossarian saw the chaplain he fell madly in love with him.');
console.log('Yossarian was in the hospital with a pain in his liver that fell just short of being jaundice.');
/*console.log('The doctors were puzzled by the fact that it wasn\'t quite jaundice.');
console.log('If it became jaundice they could treat it.');
console.log('If it didn\'t become jaundice and went away they could discharge him.');
console.log('But this just being short of jaundice all the time confused them.');*/
//Opening line console.log('It was love at first sight.'); /*console.log('The first time Yossarian saw the chaplain he fell madly in love with him.'); console.log('Yossarian was in the hospital with a pain in his liver that fell just short of being jaundice.'); /*console.log('The doctors were puzzled by the fact that it wasn\'t quite jaundice.'); console.log('If it became jaundice they could treat it.'); console.log('If it didn\'t become jaundice and went away they could discharge him.'); console.log('But this just being short of jaundice all the time confused them.');*/
//Opening line
console.log('It was love at first sight.');

/*console.log('The first time Yossarian saw the chaplain he fell madly in love with him.');
console.log('Yossarian was in the hospital with a pain in his liver that fell just short of being jaundice.');
/*console.log('The doctors were puzzled by the fact that it wasn\'t quite jaundice.');
console.log('If it became jaundice they could treat it.');
console.log('If it didn\'t become jaundice and went away they could discharge him.');
console.log('But this just being short of jaundice all the time confused them.');*/

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
It was love at first sight.
It was love at first sight.
It was love at first sight.

 

That is it for the part 1.

Go to the part 2 >>

Add a Comment

Your email address will not be published. Required fields are marked *

Buy Me A Coffee
Thank you for visiting. You can now buy me a coffee!