JavaScript Syntax

JavaScript Keywords

JavaScript keywords are some reserved words that can’t be used as identifier and are used to identify actions to be performed e.g., the var keyword tells the browser to declare variables in JavaScript.

Here is the list of JavaScript keywords:

abstract arguments await boolean
break byte case catch
char class const continue
debugger default delete do
double else enum eval
export extends false final
finally float for function
goto if implements import
in instanceof int interface
let long native new
null package private protected
public return short static
super switch synchronized this
throw throws transient true
try typeof var void
volatile while with yield

Whitespace and Line Breaks in JavaScript

JavaScript ignores spaces, tabs, and newline characters that appear in JavaScript programs.

Spaces, tabs, and newlines can be used freely.

This allows you to format and indent the programs in a neat and consistent way that increases readability.

Optional Semicolons in JavaScript

Generally the statements in JavaScript are followed by a semicolon.

However, JavaScript also allows you to omit this semicolon if each of the statements is placed on a separate line.

For example, the following code snippet can be written without semicolons:

But when written in a single line as follows, semicolons must be used

Case Sensitivity

JavaScript is case-sensitive which means that the JavaScript keywords, variables, function names, and any other identifiers must always be typed maintaining a consistent capitalization of letters.

So the identifiers DATE, date and Date will convey different meanings in JavaScript.

Comments in JavaScript

  • Anything written between a // and the end of a line is treated as a comment and is not executed by JavaScript.
  • Any text between the characters /* and */ is treated as a multiple line comment.
  • JavaScript recognizes the HTML comment opening <!–. JavaScript treats this as a single-line comment, just like the // comment.
  • The HTML comment closing sequence –> is not considered as a comment by JavaScript so it must be written as //–>.

CSS Syntax and Types of Selectors

Just like any programming language works, the CSS code is also interpreted based on some rules.
Here, the browser interprets what are called the style rules.
Based on the rules, it applies the design to the corresponding elements of the webpage.

The style rule can be seen as following 3 parts:

Selector – This is the HTML part of your webpage. Any HTML tag that will be styled by the CSS code is termed as a Selector.
Property – All the hassle that once had to be done as HTML attributes, now falls under this category. Simply put, all the color, border, cell padding etc. attributes of your HTML tags are now the CSS properties
Value – We have the style-ee we have the style-er all that remains is the style. Value corresponds to the style value given to the Property to be applied for the Selector.

CSS Syntax

The basic syntax for a basic CSS code can be shown as

general syntax of defining a css rule is as above.

selector then inside parenthesis property: value.

CSS Selector

Selectors with a specific type body,h1,div span, etc

CSS Type Selector

Selectors with a specific type body,h1,div span, etc

It will show result

Universal Selectors

This is when you want don’t want the selector to be specific for type and be universally applied at all tags * is used as universal selector

CSS Universal Selectors

Universally applied at all tags

It will show result

Descendant Selectors

It’s for when you want a style to be applied to an element only in case it is a part of another specific element

color will only apply to p inside div

CSS Descendant Selectors

Descendant selectior applied to all p tag inside div

Descendant selectior not applied to p tag outside div

It will show result

Class Selectors

As name suggest, this is for the styling of the class attribute in css class is represented by class name preceded by dot(.),

CSS Class Selectors

applied based on class

It will show result

ID Selectors

Similar to class selectors, this is for the id attribute id attribute are assinged on css with # then id attribute value

CSS Id Selectors

applied based on id

It will show result

Child Selectors

It is very much similar to descendant selectors in its execution. chile selector selects only the immediate child of a tag whereas descendent selector selects a tag at any level inside the parent tag. to select a child we use > symbol

CSS Child Selectors

applied based on id

It will show result

Attribute Selectors

You can specify a particular attribute (for e.g. type= “password”) which you want to style.

Attribute Selectors

It will show result

Multiple Style Selectors

You can have multiple properties for a single selector depending on the style requirement. Each property value pair is separated by semicolon (;)

You can specify a particular attribute (for e.g. type= “password”) which you want to style.

CSS Multiple Style Selectors

We can apply multiple styles seperated by semicolumn

It will show result

Grouping Selectors

This is when many selectors have similar property-value pairs.

CSS Multiple Style Selectors

CSS Multiple Style Selectors

CSS Multiple Style Selectors

We can apply same style to multiple selectors

It will show result