Welcome to Javascript Tutorial

Javascript Tutorial for Beginner

Hi! I’m Mert, computer engineering student and freelancer web developer. Welcome to Javascript Beginner Tutorial.

Contact Me

Github
Web Site
Linkedin

Table of Contents

Welcome the this tutorual

The purpose of this book provide an overview the Javascript Programing Language

JavaScript is the programming language of HTML and the Web. W3schools Tutorial JavaScript is easy to learn programing language. In this tutorial will show some examples of JavaScript Programing Language from basic to advanced level. I have divided some topics:

What is Javascript?

JavaScript is the world's most popular programming language and JavaScript is easy to learn. JavaScript is the programming language of the Web.

Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior, and all major web browsers have a dedicated JavaScript engine to execute it.

Variables

Before 2015, we are using the var keyword was the only way to declare a JavaScript variable.

but after the 2015 version of JavaScript (ES6 - ECMAScript 2015) allows the use of the const keyword to define a variable that cannot be reassigned, and the let keyword to define a variable with restricted scope.

In this example, x, y, and z, are variables, declared with the var keyword:

var x = 5;
var y = 6;
var z = x + y;

After the version 2015

let x = 5;
let y = 6;
let z = x + y; const piValue =3.14;

Strings

JavaScript strings are used for storing and manipulating text values.

You can use single or double quotes for defination value

let value; const firstName = "AlexAlex";
const lastName = "Luly";
const langs = "Java,Python,C++";
value = firstName + lastName;
value = firstName + " " + lastName; //string concatenation
value = firstName.length; // length of string
value = firstName.toLowerCase(); // to lowercase
value = firstName.toUpperCase(); // to uppercase
value = firstName[0];
value = firstName[2];
value = firstName[4];
value = firstName[firstName.length - 1];

// Index Of
value = firstName.indexOf("L");
value = firstName.indexOf("e");
value = firstName.indexOf("l");
// Char At
value = firstName.charAt(0);
value = firstName.charAt(firstName.length -1);

// Split value = langs.split(",");
// Replace
value = langs.replace("Python","CSS");
// Includes
value = langs.includes("Java");
value = langs.includes("asdsadsadsad");
console.log(value);

Arrays

An array is a special variable, which can hold more than one value at a time.

If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this:

let value;
const numbers = [43,56,33,23,44,35,5];
// const numbers2 = new Array(1,2,3,4,5,6,7);
const langs = ["Python","Java","C++","Javascript"];
const a = ["Hi",22,null,undefined,3.14];

// Length of array
value = numbers.length;
// Indekslenme
value = numbers[1]
; value = numbers[2];

value = numbers[numbers.length -1];
//The join() method joins array elements into a string.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.join("*");
console.log(fruits);
numbers[2] = 1000;
value = numbers;

// Index Of
value = numbers.indexOf(1000);
// push to array
numbers.push(2000);
// Add new items to the beginning of an array
numbers.unshift(3000);

value = numbers;
// remove the last element of an array
numbers.pop()
value = numbers;
// remove the firs element
numbers.shift()
value = numbers;
// splice metod add or remove the element

numbers.splice(0,3); // remove to 0,1,2 indexs element

numbers.splice(0,2,"55","45"); // add to 55 and 45 element in array
value = numbers;
// Reverse the array
numbers.reverse();
value = numbers;
//sort of array but....
value = numbers.sort();
value = numbers.sort(function(x,y){ // ascending order
return x - y;
});
value = numbers.sort(function(x,y){ // descending order
return y-x;
});

console.log(value)

Loops

Loops are handy, if you want to run the same code over and over again, each time with a different value. Often this is the case when working with arrays:

For Loop

for (i = 0; i < 5; i++) {
text += "The number is " + i; }

While Loop

while (i < 10) {
text += "The number is " + i; i++; }

Switch-Case

This is how it works:

The switch expression is evaluated once.

The value of the expression is compared with the values of each case.

If there is a match, the associated block of code is executed.

If there is no match, the default code block is executed.

When JavaScript reaches a break keyword, it breaks out of the switch block (Exit of block)

const process = 1;
switch(process){
case 1:
console.log("process 1");
break;
case 2:
console.log("process 2");
break;
case 3:
console.log("process 3");
break;
default:
console.log("Incalid process");
}

Function

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...)

hello = function() {
return "Hello World!"; }
//bur new verison JS (ES6);

hello = () => {
return "Hello World!";
} //same usege It gets shorter!
//general usege of JS function
function Hello(parameters) {
// code to be executed
} // functions can have parameters:
function Hello(parameter1, parameter2, parameter3) {
// code to be executed }

Objects

Objects are very important programign in JS.

In JavaScript, almost "everything" is an object like

Booleans, Strings, Dates, Functions ,Arrays , ..etc.

let value;
const programmer = {
name : "Alex ALex",
age : 25,
email: "abc@gmail.com",
langs : ["Python","Java","Javascript"],
address : {
city : "CA",
street : "Brodway 265"
},
work : function(){
console.log("Alex is stil working"); }
} value = programmer;
value = programmer.email; // email
value = programmer["email"];
value = programmer.langs;
value = programmer.address.city;
programmer.work();

JSon

I have explaned and compare Json to XML. If you want to read this post please clikck this link:

Json is a format transporting datas. Json is usually used when datas are sent from server to web site.

JSON = JavaScript Object Notation JSON is a lightweight data interchange format

JSON VALUES:

  • We can presedent a lot of value of datas using by JSON .
  • STRING
  • INTEGER
  • BOOLEAN
  • ARRAY
  • OBJECT
  • NULLs
var employees = {
"employees":[
{"firstName":"anna", "lastName":"lec"},
{"firstName":"amt", "lastName":"Smith"},
{"firstName":"joseph", "lastName":"CJ"}
]
}; console.log(employees); //accses to employees object
var boss = ('{ "name":"Alex","age":30,"city":"New York","salary": "$2000" }');
var obj = JSON.parse(boss);
document.getElementById("theboss").innerHTML = obj.name + " /" + obj.age;

DOM

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

JavaScript can change all the HTML elements in the page

JavaScript can change all the HTML attributes in the page

JavaScript can change all the CSS styles in the page

JavaScript can remove existing HTML elements and attributes

JavaScript can add new HTML elements and attributes

JavaScript can react to all existing HTML events in the page

JavaScript can create new HTML events in the page

for example clik here

Slider Application

for example clik here

Jquery Validation

for example clik here