DEV Community

Deepak Poojary
Deepak Poojary

Posted on

JavaScript for absolute beginners

Note:

Please note that I am a beginner in this and I found that sharing what I learn keeps me motivated in learning to code and helps me learn better and you can read about this technique called learning in public here

If you're an expert and you did find some mistake please comment it below as they say when you point the mistake the person never forgets thatπŸ˜‚. Also note that I will keep updating it as and when I learn new things.

Introduction

This exists because if it didn't exist the browser has to take requests from servers which will take a lot of time so thats why they invented java script to make it local.

The difference between java and javascript is the difference between watch and watch dogs.

Essentially java script is scripting language and makes elements like <h1> to dance around or show behaviour. Consider elements to be actors and java script to be like a normal script.

Now coming to java

It's an Interpreter: Basically converts our code into binary so that the computer can understand line by line.
Eg:

  • javascript
  • python
  • ruby

Compiler: This does the same thing as above but all at once.

  • Java ([[android development]])
  • c and swift(iOS development)

How to use JS

Playing with it

To just start playing you can use the following shortcut key to open up the JS console.
Ctrl+ shift + J and you can start adding some JS and test it out but it get's cumbersome because it just one line execution and if you want a 2 line execution then you need to press shift+ enter everytime you do so. So here is a hack around it called snippets.

Using snippets

Click on sources and add a file called index.js and then this is like your actual JS playground. And if you want to render the code just press Ctrl + enter

Formal

Inline

External

Basically this is where connect it to another document.

<script src="index.js" charset="utf-8"></script>

This what is considered standard here.

Basics

Functions/Keywords

Alert

alert("hello"); just brings out the alert called "hello";

Prompt

This thing asks the user for their input and syntax is similiar i.e prompt("Enter your name");

Just liked this qoute so thought of inserting it:-)

A coding project should look like a single person typed it no matter how many people contributed it.
-Some website

Typeof

Basically tells what type of data it is
typeof(234); returns nos.


Data types

This is like a universal in everything so just wanted to mention briefly of all the types available so first one is string cause it's a string of character.
boolean is also a data type eg: True or False.
number is another which comprises of 123

Variable Name

This is nothing but we building a container and we can swap the values like we can swap the value of any container we have in our homes.

You only have to use var while you first construct a memory slot (you could say).

Conventions while naming JS variables

  • Give your variables meaningful names.
  • You can't start variables with nos.
  • Only $ and _ are the symbols allowed.
  • No space eg: first name not allowed
  • Capitallizing the subsequent word eg: firstName

Concatenation

Combining data and any data type as long there is + in there.

Letter count

Usertweet.length;

Remember

  • Using brackets when doing maths calcs
  • To store variable for using it in maths calcs.

Modular

gives remainder
using brackets to show intent.

Slicing

Syntax

varname.slice(0,140);

Length of variable

If you want to find the length of variable: Second - First number.

How does the slice work

How the slicing words is if you mention any thing let;s say name.slice(0,3);

You cut from the left of the assigned name.

a b c d
==|0 1 2 |==3 4

[[Web development for complete beginners#Reducing code|Reducing code]]

alert(prompt("Enter any tweet").slice(0,140));

Uppercase

name.toUpperCase();

  • Remember the brackets ()

Exercises:

  1. Building twitter word count alert
  • Asking for users tweet + alert them how many charectars they have used + how many charectars are remaining.

var Tweet= prompt("Enter tweet");
var TweetCount=Tweet.length;
alert("you have have entered"+ TweetCount + "you have remaining"+ (140-Tweetcount) + "remainging");

  1. Prompt that users will enter their name in all non-caps and you need to give an alert with
  • First letter cap (easy)
  • remaining letter in anti-caps if they do it.

Answer

var Name = prompt("Enter you name");
var FirstChar= Name.slice(0,1);
var FirstCharCap= FirstChar.toUpperCase();
var RestChar= Name.slice(1,Name.length);
var RestCharAnti = RestChar.toLowerCase();
var complete= FirstCharCap+ RestCharAnti;
alert(complete);


Top comments (0)