JAVASCRIPT & CSS (SHORT NOTES) 2023-24

2ND SEMESTER

UNIT 1:
Topic 1: Introduction

 JavaScript is a high-level programming language used for creating dynamic and

interactive web pages.
 CSS (Cascading Style Sheets) is a language used to describe the presentation of a
document written in HTML.
 JavaScript and CSS work together to enhance the functionality and visual appearance of
web pages.

Topic 2: Script Tag

 The script tag is used to embed or reference JavaScript code within an HTML document.
 It can be placed in the head or body section of an HTML document.
 Example: <script src="script.js"></script>

Topic 3: Data Types

 JavaScript has several built-in data types, including:

 Number: represents numeric values.
 String: represents textual data.
 Boolean: represents true or false values.
 Object: represents a collection of key-value pairs.
 Array: represents an ordered list of values.

Topic 4: Variables

 Variables are used to store data values in JavaScript.

 They are declared using the var, let, or const keyword.
 Example: var age = 25;

Topic 5: Literals

 Literals are directly assigned values that do not change.

 Examples: 5 (number literal), "Hello" (string literal), true (boolean literal).

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP

 JAVASCRIPT & CSS (SHORT NOTES) 2023-24
2ND SEMESTER
Topic 6: Expressions

 Expressions are combinations of values, variables, and operators that produce a result.
 Example: 2 + 3 is an expression that evaluates to 5.

Topic 7: Operators

 JavaScript has various operators, including arithmetic, assignment, comparison, logical,

and more.
 Examples: + (addition), - (subtraction), = (assignment), == (equality check).

Topic 8: Conditional Statements (if, if-else-if-else)

 Conditional statements are used to make decisions based on certain conditions.

 The if statement executes a block of code if a condition is true.
 The if-else-if-else statement allows multiple conditions to be checked.
 Example:

if (condition) {
// code to execute if condition is true
} else if (condition2) {
// code to execute if condition2 is true
} else {
// code to execute if all conditions are false
}

Topic 9: Switch Case

 The switch statement is used to perform different actions based on different conditions.
 It evaluates an expression and matches the value to a specific case.
 Example:

switch (expression) {
case value1:
// code to execute if expression matches value1
break;
case value2:
// code to execute if expression matches value2

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP

 JAVASCRIPT & CSS (SHORT NOTES) 2023-24
2ND SEMESTER
break;
default:
// code to execute if expression doesn't match any value
}

Topic 10: Looping Statements (while, for, do-while)

 Looping statements are used to repeatedly execute a block of code.

 The while loop executes the code as long as a condition is true.
 The for loop repeats a block of code a specified number of times.
 The do-while loop executes the code at least once and then repeats as long as a
condition is true.
 Examples:

while (condition) {
// code to execute
}

for (initialization; condition; increment/decrement) {

// code to execute
}

do {
// code to execute
} while (condition);

Topic 11: Array

 An array is a special variable that can store multiple values.

 Array elements are accessed using their index, starting from 0.
 Example: var fruits = ["apple", "banana", "orange"];

Topic 12: Associative Arrays

 JavaScript doesn't have built-in associative arrays, but objects can be used as key-value
pairs.

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP

 JAVASCRIPT & CSS (SHORT NOTES) 2023-24
2ND SEMESTER
 Example: var person = { name: "John", age: 25 };

Topic 13: Functions

 Functions are reusable blocks of code that perform a specific task.

 They can take parameters as inputs and return a value.
 Example:

function addNumbers(num1, num2) {

return num1 + num2;
}

Topic 14: Event Handling

 Event handling allows JavaScript code to respond to user actions or events on a web
page.
 Events can be triggered by user interactions like clicks, key presses, etc.
 Example: <button onclick="myFunction()">Click me</button>

Topic 15: JavaScript Objects (Browser, Document, Window, etc.)

 JavaScript provides built-in objects that represent different components of a web page.
 Examples: window object represents the browser window, document object represents
the HTML document.

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP

 JAVASCRIPT & CSS (SHORT NOTES) 2023-24
2ND SEMESTER

UNIT 2: CSS
1. DHTML (Dynamic HTML):
 DHTML combines HTML, CSS, and JavaScript to create interactive and dynamic
web pages.
 It allows for the manipulation of the structure and style of web content
dynamically.
2. Introduction to CSS:
 CSS (Cascading Style Sheets) is a stylesheet language used for describing the
look and formatting of a document written in HTML.
 It provides a way to separate the content of a web page from its presentation.
3. Style Sheets:
 Style sheets define the styles and formatting rules for HTML elements.
 There are three ways to include styles in an HTML document: a) Embedded Styles:
Styles defined within the <style> tags in the <head> section of the HTML
document. b) Inline Styles: Styles defined directly within the HTML tags using the
style attribute. c) External Style Sheets: Styles defined in a separate CSS file and
linked to the HTML document using the <link> tag.
4. Using Classes:
 CSS classes allow you to define styles that can be applied to multiple HTML
elements.
 Classes are defined using the .class-name selector in CSS, and applied to HTML
elements using the class attribute.
5. Style Sheet Properties:
a) Fonts Properties:
 font-family: Specifies the font family for text.
 font-size: Specifies the size of the font.
 font-weight: Specifies the weight (boldness) of the font.
b) Background and Color Properties:
 background-color: Sets the background color of an element.
 color: Sets the text color.
c) Text Properties:
 text-align: Specifies the alignment of text.
 text-decoration: Adds decorative styling to text (e.g., underline, line-through).
 text-transform: Controls the capitalization of text.
d) Box Properties:

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP

 JAVASCRIPT & CSS (SHORT NOTES) 2023-24
2ND SEMESTER
 width: Sets the width of an element.
 height: Sets the height of an element.
 margin: Sets the margin (space) around an element.
 padding: Sets the padding (space) within an element.
 border: Sets the border properties of an element.
e) Classification Properties:
 display: Specifies the display behavior of an element (e.g., block, inline).
 white-space: Specifies how white space is handled within an element.
6. CSS Units:
 CSS supports different units of measurement for specifying sizes and distances,
such as pixels (px), percentages (%), em, rem, etc.
7. URLs:
 URLs can be used in CSS to specify the location of external resources like images,
fonts, etc.
 URLs are specified using the url() function in CSS.
8. Div and Span Tags:
 <div> and <span> are HTML tags used as containers to group and style content.
 <div> is a block-level element, while <span> is an inline element.
9. Dynamic Positioning and Layering:
 CSS provides positioning properties (position, top, left, etc.) to control the
placement of elements on a web page.
 Layering can be achieved using the z-index property to control the stacking
order of elements.
10. DHTML Events:
 DHTML events are actions or occurrences that can trigger JavaScript functions.
 Examples of DHTML events include mouse clicks, mouse hover, form submissions,
etc.

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP