DEV Community: aishwaryavasu0509

tic-tac-toe game using javascript,html,css

aishwaryavasu0509 — Sun, 27 Jun 2021 08:59:39 +0000

plan to build the tic-tac-toe game

before we actually jump into building the application we need to break the big task into subtasks. The frontend of the application is very important to give an impression and to intrigue the user to give the application a try.i have attempted to make the frontend of the application simple yet appealing.so after deciding on the layout of the application i divided the home page into several boxes. the "wrapper" is what i called the box consisiting of the entire page.Next, the wrapper can be divided into left and right subparts after which each subparts can be subdidvided according to their components.by approaching a problem with divide and conquer approach we can concentrate better in developing the details of the application.The styling of the page is done with css and the logic of the game is built with javascript.

find the source code here!!

Type Conversion and Coersion in JavaScript

aishwaryavasu0509 — Thu, 24 Jun 2021 06:15:31 +0000

Type conversion in javascript:

JavaScript variables can be converted to a new variable and another data type either by the use of a JavaScript function
or automatically by JavaScript itself

javascript type conversions are possible only in the following combinations:

number to string

2.string to number

boolean conversions

the conversions to undefined or null type is not possible in javascript

example:

1.conversion of string to Number datatype in javascript

const inputYear = '1991';

console.log(Number(inputYear),inputYear);

console.log(Number(inputYear)+18);

2.conversion of string to number is not possible in the following caseas it would yield an reference error.

console.log(Number('Jonas'));

Not an number(NaN is also a number type in javascript)

console.log(typeof NaN);

//conversion of integer to string

console.log(String(23),23);

type coersion in javascript

Type Coercion refers to the process of automatic or implicit conversion of values from one data type to another. This includes conversion from Number to String, String to Number, Boolean to Number etc. when different types of operators are applied to the values.

In case the behavior of the implicit conversion is not sure, the constructors of a data type can be used to convert any value to that datatype, like the Number(), String() or Boolean() constructor.

examples:

console.log(i am + 23 + years old);

// the 23 is converted to the string type

console.log(23+10+2);

//this will result in a string 23102

console.log(23-3+12);

//this will convert all the strings to Number datatype

let n=1+1;

n=n-1;

console.log(n)

//the first thing is 11 as a string the n=n-1 will convert all of it to numbers and the result will be 10

Basic operators in JavaScript

aishwaryavasu0509 — Thu, 24 Jun 2021 05:43:53 +0000

what is an operator?

An operator performs some operation on single or multiple operands (data value) and produces a result.

example:
const firstYear=2037;
const ageJonas = firstYear-656
const ageSarah = firstYear-2018

console.log(ageJonas,ageSarah) //logging multiple values.
console.log(ageJonas*2,ageSarah*3); // multiplying
console.log(2**3,ageSarah/10)//dividing the values

string concatination

This method is used to join two or more strings. This method does not change the existing strings, but returns a new string containing the text of the joined strings.

example:

const firstName="Jonas";
const latName="node";
console.log(firstName+' '+lastName);

assignment operator

An assignment operator assigns a value to its left operand based on the value of its right operand.

example:

let x=15;
let y=56;

console.log(x+y,x-y);

let z;
z=x+y;

consloe.log(z+y);

x+=10 //x=x+10
y+=20//y=y+20
x++//single incremetor
x--//single decrementor

comparison operators (>,<,===,>=,<=)

Comparison operators are used in logical statements to determine equality or difference between variables or values.

example:

console.log(ageSarah > ageJonas) // either true or false
console.log(ageSarah>=18);
console.log(ageJonas>=20);

let islarger = ageSarah >=ageJonas; // stores value as a boolean

Equality Operators: == vs. ===

In one word, main difference between "==" and "===" operator is that formerly compares variable by making type correction e.g. if you compare a number with a string with numeric literal, == allows that, but === doesn't allow that, because it not only checks the value but also type of two variable, if two variables are not of the same type "===" return false, while "==" return true.

examples:

const age =18;

if(age ===18) console.log(you just became an adult :D(strict));

// strict equality check with the age and it will yield in the message

if(age == 18) console.log(you just become an adult :D(llose));

console.log(a = b = 59);
// expected output: 59

Logical Operators

Logical operators are used to determine the logic between variables or values.

example:

const hasDriversLiscense = true;
const hasGoodVision = false;

//the logical and operator

console.log(hasDriversLiscense && hasGoodVision);

//the logical or operator

console.log(hasDriversLiscense || hasGoodVision);

//the logical not operator

console.log(!hasDriversLiscense);

if(hasDriversLiscense && hasGoodVision) {

console.log(sarah is able to drive);

}

else{

console.log(she must not frive);

}

//logical operations with more than two boolean variables

const isTired = False;

console.log(hasDriversLiscense && hasGoodVision||isTired)

// true||true returns true

if(hasDriversLiscense && hasGoodVision&&isTired)

{

 console.log(`probably no!!`);

}

else if ((hasDriversLiscense && hasGoodVision||isTired)

{

  console.log(`its a no`);

}

else

{

console.log(`yes`);

}

The Conditional (Ternary) Operator

ternary operator:

let age=21

const drink = age >=18 ? 'wine':'water';

console.log(drink);

Operator precedence in javascript

Operator precedence determines how operators are parsed concerning each other. Operators with higher precedence become the operands of operators with lower precedence.

example:

console.log(42 * 3 ** 3); // 42 * 27
// expected output: 1134

let a;
let b;

operator precedence and associativity in javascript

Data types in javaScript

aishwaryavasu0509 — Thu, 24 Jun 2021 05:21:49 +0000

Different Datatypes in JavaScript

In javascript every value is an object or a primitive.
A value is primitive only if its not an object.

numbers:

floating point numbers even if we dont see the decimal point
there is always floating point values. used for decimals and
integers.

eg: let varOne = 3.4545;
let varTwo =23; both are the same

A number type can also be +Infinity, -Infinity, and NaN (not a number). For example,

const number1 = 3/0;
console.log(number1); // Infinity

const number2 = -3/0;
console.log(number2); // -Infinity

// strings can't be divided by numbers
const number3 = "abc"/3;
console.log(number3); // NaN

strings:

String is used to store text. In JavaScript, strings are
surrounded by quotes:

1.Single quotes: 'Hello'
2.Double quotes: "Hello"
3.Backticks: Hello (ES6 syntax)

example:
let firstName="aishwarya";
const name = 'ram';
const name1 = "hari";
const result = The names are ${name} and ${name1};

boolean:

A JavaScript Boolean represents one of two values: true or false.

either true or false variable types.
let fullAge = true;
Boolean(10 > 9) // returns true

falsy values:

falsy values: 0,'',undefined,null,NaN

console.log(Boolean(0));

console.log(Boolean(undefined));

console.log(Boolean('Jonas'));

console.log(Boolean(()));

console.log(Boolean('')); // returns falsy values

undefined:

values taken by the variables that are not yet defined
eg: let children;

Null:

empty value variable
let food='null';

symbol:

Symbols are new primitive type introduced in ES6. Symbols are completely unique identifiers. Just like their primitive counterparts (Number, String, Boolean), they can be created using the factory function Symbol() which returns a Symbol. Every time you call the factory function, a new and unique symbol is created

BigInt:

BigInt is a built-in object in JavaScript that provides a way to represent whole numbers larger than 253-1. The largest number that JavaScript can reliably represent with the Number primitive is 253-1, which is represented by the MAX_SAFE_INTEGER constant.

Dynamic typing in Javascript

aishwaryavasu0509 — Tue, 22 Jun 2021 18:50:15 +0000

what is dynamic typing ?

Javascript is a dynamic typing language. When you declare a variable, you do not need to specify what type this variable is. Javascript engine infers what type this variable is based on the value assigned to at run time.

example:

let name= "bob";
console.log(typoeof name);

name=5

console.log(typeof name);

firstly, the variable was a string and now it is of number datatype.
same thing can be done with null and undefined as well nd amongst any datatypes for that matter of fact.

Pros and Cons of Dynamic typing in JavaScript

Pros:

1.Deals naturally with certain types of self-describing data.
2.Code can be use polymorphically without programmer decoration.
3.Tends to reduce unnecessary clutter and duplication/repetition in code.

Cons:

1.More errors detected later in development and in maintenance.
2.More errors at runtime and in shipped code.
3.Tends to prohibit compilation and yields poor performing code.
4.Need to write entirely mechanical tests for type correctness.

Values and Variables in JavaScript

aishwaryavasu0509 — Tue, 22 Jun 2021 18:40:25 +0000

Variables in JavaScript

There are 3 ways to declare a JavaScript variable:

1.Using var

2.Using let

3.Using const

Variables are containers for storing data (values).

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

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

From the example above, you can expect:

x stores the value 5

y stores the value 6

z stores the value 11

example 2:

var price1 = 5;
var price2 = 6;
var total = price1 + price2;

In programming, just like in algebra, we use variables (like price1) to hold values.

In programming, just like in algebra, we use variables in expressions (total = price1 + price2).

From the example above, you can calculate the total to be 11.

the let and const ways of declaring variables are used and var is comparitively an old way of declaring variables in javascript.

Naming Conventions for variables and constants in JavaScript

1.reserved keywords cannot be used as variable names
let new=27;
let function = 'fun'; //error as function cannot be a name

2.variable names can start with $ or underscores and alphabets
only.
let$function = 3; // this is allowed

3.conventionally variables must not start with caps until its a
class or constant
let Person = 'Jonas';

4.constants are writtern with upper case
let PI = 3.1233;

5.naming conventions that involve elaborate wordings are prefered
over including numbers in the declaration.

let myFirstJob = "programmer";
let myCurrentJob = "teacher";

let country = "India";
let continent = "Asia";
let population = 565756767687;

let job1="programmer";
let job2="teacher";

More Examples on using variables

1.declaring a variable and assigning a value to the variable
   let js = 'amazing';

2. console.log() is used whenever we need to output something 
   to the browser

   console.log(40*8+23-10);
   console.log("Jonas");
   console.log(23);

   let firstName = "Jonas";  //first_name notation isalso used
   console.log(firstName);

3.camel case is used when more than one words are used

let 3years=7;//variable name cannot start with a number 
let first_name ="aishwarya";

let jonas$natella ='JN'// error as we can have only 
 numbers,letters,and underscores

Introduction to JavaScript

aishwaryavasu0509 — Tue, 22 Jun 2021 18:11:57 +0000

What is Javascript?

javascript is a high-level object oriented multi-paradigm programming language.breaking down the description everyone has an intiuition on what is a programming language.object oriented programming languages deal with OOP concepts.Object-oriented language uses an object-oriented programming technique that binds related data and functions into an object and encourages reuse of these objects within the same and other programs. languages such as C++,Java,Python are some of the well known programming languages.The idea of a multiparadigm language is to provide a framework in which programmers can work in a variety of styles, freely intermixing constructs from different paradigms.

explore more on object oriented programming

explore more on programming paradigms

Where is JavaScript beign used?

JavaScript is mainly used for web-based applications and web browsers. But JavaScript is also used beyond the Web in software, servers and embedded hardware controls. Here are some basic things JavaScript is used for:

1.Adding interactive behavior to web pages
JavaScript allows users to interact with web pages. There are almost no limits to the things you can do with JavaScript on a web page

2.Creating web and mobile apps
Developers can use various JavaScript frameworks for developing and building web and mobile apps.

3.Building web servers and developing server applications

4.Game development

Role of JavaScript in Web development

In frontend development html,css and javascript is used. html acts like a noun it says what the text is example

is a paragraph. the css aspect of the page acts like an adjective describing the html eg. the paragraph is red. and the javascript acts like an verb saying the action on what is to be done with it eg. hide the paragraph.

How to integrate JavaScript with html files?

We can use google chrom console to execute basci Javascript
expressions but its not always what we want to!. so,how to
integrate html and css code with javascript?. this is usually
done in the index.html file itself by including the path to the
javascript file.

all you need to know about mongoDB -1

aishwaryavasu0509 — Mon, 21 Jun 2021 18:47:01 +0000

what is MongoDB?

Well, this may not seem new to many if I say that MongoDB is a no SQL database which is used due to various advantages it holds over relational databases such as MySQL, PostgreSQL. NoSQL databases (aka "not only SQL") are nontabular and store data differently than relational tables. NoSQL databases come in a variety of types based on their data model. The main types are document, key-value, wide-column, and graph. They provide flexible schemas and scale easily with large amounts of data and high user loads. but, MongoDB is also a functional organization apart from the famous NoSQL database services provided by it MongoDB provides numerous other services such as cloud services for free and paid versions the free version is generous enough to provide up to 5GB storage.

to explore more about MongoDB click me!

who is using MongoDB?

MongoDB is one of the most widely used databases for various application fields. One learning this skill will be of most benefit to the organization and personal knowledge. The majority of the modern programming languages goes handy with MongoDB.

customers that use MongoDB

How does MongoDB work?

But before proceeding to its working, first, let’s discuss some important parts of MongoDB –

Drivers:

Drivers are present on your server that is used to communicate with MongoDB. The driver's support by MongoDB is C, C++, C#, and .Net, Go, Java, Node.js, Perl, PHP, Python, Motor, Ruby, Scala, Swift, Mongoid.
MongoDB Shell: MongoDB Shell or mongo shell is an interactive JavaScript interface for MongoDB. It is used for queries, data updates, and it also performs administrative operations.
Storage Engine: It is an important part of MongoDB which is generally used to manage how data is stored in the memory and on the disk. MongoDB can have multiple search engines. You are allowed to use your search engine and if you don’t want to use your search engine you can use the default search engine, known as WiredTiger Storage Engine which is an excellent storage engine, it efficiently works with your data like reading, writing, etc.

MongoDB work in two layers –
1.Application Layer and
2.Data layer

The Application Layer is also known as the Final Abstraction Layer, it has two parts, the first is a Frontend (User Interface) and the second is Backend (server). The frontend is the place where the user uses MongoDB with the help of a Web or Mobile. This web and mobile include web pages, mobile applications, android default applications, IOS applications, etc. The backend contains a server that is used to perform server-side logic and also contains drivers or mongo shells to interact with the MongoDB server with the help of queries.

These queries are sent to the MongoDB server present in the Data Layer. Now, the MongoDB server receives the queries and passes the received queries to the storage engine. MongoDB server itself does not directly read or write the data to the files or disk or memory. After passing the received queries to the storage engine, the storage engine is responsible to read or write the data in the files or memory it manages the data

what is mocha and why do we need it?

Mocha:

Mocha is a testing framework that is used to perform tests within our application. It makes sure everything works correctly.
‘Mocha in Node.js’ means using the mocha unit testing framework in the Node.js runtime environment. Mocha has tons of great features.
Key Features:

1.Simple async support.
2.Async test timeout support.
3.Use any assertion library you want
4.Before, after, before each, after each hook is very useful to
clean the environment with each test.

"This is an introductory post to explain my best on mongoDB and test development using maongodb with mocha in the follow up of this post i will be sharing more details
installation and setup of MongoDB in your local system,commands,schema,etc.. and will try to provide insights on building a mini project with MongoDB database. pls do share your thoughts on this post as comments"