Scribd
Upload
148 views

Applied Computing Notes - 2024

The document provides an overview of markup languages, HTML5, CSS, and JavaScript. It covers topics like HTML tags and structure, CSS selectors and properties, JavaScript basics, and using frameworks like Bootstrap. Multiple units cover concepts related to web development and designing responsive websites.

Uploaded by

sahilsahil69221
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
148 views

Applied Computing Notes - 2024

The document provides an overview of markup languages, HTML5, CSS, and JavaScript. It covers topics like HTML tags and structure, CSS selectors and properties, JavaScript basics, and using frameworks like Bootstrap. Multiple units cover concepts related to web development and designing responsive websites.

Uploaded by

sahilsahil69221
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

APPLIED COMPUTING (SHORT NOTES) 2023-24

2ND SEMESTER

UNIT 1:
1. Markup Languages:
 Markup languages are used to annotate text or data to provide structure and
formatting instructions.
 They consist of tags or elements that define how the content should be displayed
or processed.
 Examples of markup languages include HTML, XML, and Markdown.
2. Introduction to HTML5:
 HTML5 is the latest version of Hypertext Markup Language.
 It is used to structure and present content on the web.
 HTML5 introduces new elements, attributes, and APIs to enhance the capabilities
of web pages.
3. Development Environment Setup:
 To start developing with HTML, you need a text editor such as Notepad++ or
Sublime Text.
 Save your HTML files with a .html extension.
 You can open HTML files in a web browser to view the rendered output.
4. Anatomy of an HTML Tag:
 HTML tags are used to define elements in an HTML document.
 Tags are enclosed in angle brackets (< >) and usually come in pairs, with an
opening and closing tag.
 The opening tag starts with a tag name and can contain attributes that provide
additional information about the element.
5. Basic Structure of HTML Document:
 An HTML document starts with the <!DOCTYPE html> declaration, which specifies
the HTML version.
 The <html> element is the root element and contains all other elements in the
document.
 The <head> element includes meta-information about the document and links to
external resources.
 The <body> element contains the visible content of the webpage.
6. HTML Content Models:
 HTML elements have different content models that define what can be placed
inside them.

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP


APPLIED COMPUTING (SHORT NOTES) 2023-24
2ND SEMESTER
 For example, block-level elements can contain other block-level and inline
elements, while inline elements can only contain text or other inline elements.
7. Meta-tags:
 Meta-tags provide metadata about the HTML document, such as the character
encoding, description, and keywords.
 They are placed inside the <head> element using the <meta> tag.
8. Formatting Tags:
 Formatting tags are used to apply formatting to text within HTML documents.
 Examples include <strong> for strong emphasis, <em> for emphasis, and <u> for
underlining text.
9. Text Level Formatting:
 HTML provides tags to format text, such as headings ( <h1> to <h6>), paragraphs
(<p>), and line breaks (<br>).
10. Lists:
 HTML supports ordered lists (<ol>), unordered lists (<ul>), and definition lists
(<dl>).
 List items are defined using the <li> tag for ordered and unordered lists and
<dt> and <dd> tags for definition lists.
11. Hyperlinks:
 Hyperlinks are used to create clickable links to other web pages or resources.
 They are created using the <a> tag and require an href attribute to specify the
destination URL.
12. Image and Image Maps:
 Images can be included in HTML using the <img> tag and the src attribute to
specify the image source.
 Image maps allow you to define clickable areas on an image using the <map> and
<area> tags.
13. Table Tags:
 Tables can be created in HTML using the <table>, <tr>, and <td> tags to define
rows and cells.
 Additional tags like <th> can be used to define table headers.
14. HTML Comment Tag:
 HTML comments are used to add explanatory notes within the HTML code.
 They are enclosed between <!-- and --> and are not displayed in the browser.
15. Block and Inline Elements:
 Block-level elements start on a new line and take up the full width available.
 Inline elements are displayed within the flow of text and do not start on a new
line.
16. Redirecting to Another URL:

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP


APPLIED COMPUTING (SHORT NOTES) 2023-24
2ND SEMESTER
 To redirect users to another URL, you can use the <meta> tag with the http-
equiv attribute set to "refresh".
 Example: <meta http-equiv="refresh" content="0;
url=https://www.example.com"> will redirect after 0 seconds to
"https://www.example.com".

UNIT 2:
1. Need for CSS:

 CSS (Cascading Style Sheets) is a styling language used to describe the look and
formatting of a document written in HTML.
 It separates the presentation of a web page from its structure, allowing for easy
maintenance and consistent design across multiple pages.
 CSS provides control over various aspects of a webpage, such as fonts, colors, layouts,
and more.

2. Different approaches to style sheets:

 Inline CSS: Styling applied directly to HTML elements using the "style" attribute.
 Internal CSS: CSS rules placed within the "style" tags in the head section of an HTML
document.
 External CSS: CSS rules stored in a separate file and linked to the HTML document using
the "link" tag.

3. Anatomy of a CSS Rule:

 A CSS rule consists of a selector and one or more declarations enclosed in curly braces.
 The selector specifies the HTML element(s) to which the styles will be applied.
 Declarations consist of a property and a value, separated by a colon.

4. Element, Class, and ID selectors:

 Element selectors target specific HTML elements by their tag name (e.g., "p", "h1", "div").

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP


APPLIED COMPUTING (SHORT NOTES) 2023-24
2ND SEMESTER
 Class selectors select elements based on the value of their "class" attribute (e.g., ".my-
class").
 ID selectors target elements with a specific "id" attribute value (e.g., "#my-id").

5. Combining selectors:

 Multiple selectors can be combined to apply styles to elements that meet certain
criteria.
 Comma-separated selectors select multiple elements (e.g., "h1, h2").
 Space-separated selectors apply styles to elements that are descendants of another
element (e.g., "div p").

6. Pseudo-Class Selectors:

 Pseudo-classes select elements based on their state or position within the document
structure.
 Examples include ":hover" (applied when the element is being hovered over) and ":nth-
child(n)" (selects elements based on their position).

7. Style placement and Conflict Resolution:

 Styles can be placed inline, internally, or externally, with different levels of specificity and
importance.
 In case of conflicting styles, the cascading nature of CSS determines which style takes
precedence.
 Specificity, order of declaration, and use of !important can affect conflict resolution.

8. Styling text with wildcard selectors (*, ^, and $):

 The asterisk (*) selects all elements on a page.


 The caret (^) selects elements that start with a particular value.
 The dollar sign ($) selects elements that end with a specific value.

9. Web fonts:

 Web fonts allow the use of custom fonts on web pages, overcoming the limitation of
relying on user-installed fonts.
 Fonts can be linked from external sources or stored locally and used through the @font-
face rule.

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP


APPLIED COMPUTING (SHORT NOTES) 2023-24
2ND SEMESTER
10. Working with browser developer tools:

 Browser developer tools (e.g., Chrome DevTools) provide a set of debugging and editing
tools for web developers.
 They allow inspecting and modifying HTML and CSS properties in real-time, facilitating
debugging and experimentation.

11. CSS box model:

 The box model describes how elements are rendered on the page, including their
content, padding, border, and margin.
 The background property sets the background color or image of an element.
 The margin property controls the space outside an element.
 The padding property defines the space between an element's content and its border.
 The float property controls how an element flows within its container.
 The z-index property determines the stacking order of overlapping elements.

12. Relative and absolute element positioning:

 Relative positioning moves an element relative to its normal position, allowing


adjustments without affecting other elements.
 Absolute positioning positions an element relative to its closest positioned ancestor or
the entire document.

13. Basic introduction to the Bootstrap framework:

 Bootstrap is a popular front-end framework that provides pre-styled components and a


responsive grid system.
 It simplifies the process of building responsive and visually appealing websites by
providing ready-to-use CSS and JavaScript components.

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP


APPLIED COMPUTING (SHORT NOTES) 2023-24
2ND SEMESTER

UNIT 3:
1. Introduction to JavaScript:

 JavaScript is a programming language used to add interactivity and dynamic behavior to


web pages.
 It is a client-side scripting language, meaning it runs on the user's web browser.
 JavaScript allows you to manipulate HTML elements, handle events, create animations,
validate forms, and more.

2. Different Approaches to Place JavaScript Code in an HTML File:

 Inline: JavaScript code can be written directly within the HTML file using the <script>
tag with the src attribute.
 External: JavaScript code can be placed in a separate .js file and linked to the HTML file
using the <script> tag with the src attribute.

3. JS Identifiers:

 Identifiers are names used to identify variables, functions, objects, or any other user-
defined items.
 They can include letters, digits, underscores, and dollar signs.
 Identifiers must start with a letter, underscore, or dollar sign (cannot start with a digit).

4. Reserved Words:

 Reserved words are words that have predefined meanings in JavaScript and cannot be
used as identifiers.
 Examples of reserved words include var, function, if, else, for, while, break,
continue, etc.

5. Optional Semicolons:

 In JavaScript, semicolons are used to separate statements. However, they are often
optional.

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP


APPLIED COMPUTING (SHORT NOTES) 2023-24
2ND SEMESTER
 JavaScript has automatic semicolon insertion, which means the interpreter will insert
semicolons where necessary.
 It is good practice to include semicolons to avoid potential issues and make the code
more readable.

6. Comments:

 Comments are used to add explanatory notes to the code. They are ignored by the
JavaScript interpreter.
 Single-line comments start with //, while multi-line comments are enclosed between /*
and */.

7. Literals:

 Literals are fixed values that are directly written into the code.
 Examples of literals include numbers, strings, booleans, arrays, objects, and regular
expressions.

8. Types, Values, and Variables:

 JavaScript has several built-in data types, including number, string, boolean, null,
undefined, object, and symbol.
 Values are the actual data assigned to variables or used in expressions.
 Variables are used to store and manipulate values. They are declared using the var, let,
or const keywords.

9. Numbers, Text, Booleans:

 Numbers represent numeric values and can be integers or floating-point numbers.


 Text is represented by strings, which are sequences of characters enclosed in single or
double quotes.
 Booleans represent logical values and can be either true or false.

10. Null and Undefined:

 null represents the intentional absence of any object value.


 undefined is a variable that has been declared but has not been assigned a value.

11. Type Conversion:

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP


APPLIED COMPUTING (SHORT NOTES) 2023-24
2ND SEMESTER
 Type conversion refers to the process of changing the data type of a value.
 JavaScript provides various methods for type conversion, such as Number(), String(),
Boolean(), etc.

12. Variable Declaration and Assignment:

 Variables are declared using the var, let, or const keywords.


 The var keyword has function scope, while let and const have block scope.
 Assignment is done using the assignment operator (=) to assign a value to a variable.

13. Const, Let, and Var:

 const is used to declare variables that cannot be reassigned after they are initialized.
 let is used to declare variables with block scope that can be reassigned.
 var is the old way of declaring variables, with function scope.

14. Expressions and Operators:

 Expressions are combinations of values, variables, and operators that produce a new
value.
 JavaScript has various types of operators, including arithmetic, relational, logical,
assignment, and evaluation operators.

15. Conditionals: if, else if, and switch:

 Conditionals allow you to make decisions in your code based on certain conditions.
 The if statement executes a block of code if a specified condition is true.
 The else if statement provides an alternative condition to be checked if the previous
condition is false.
 The switch statement allows you to select one of many code blocks to be executed
based on different cases.

16. Loops: while and for:

 Loops are used to execute a block of code repeatedly until a specific condition is met.
 The while loop executes a block of code while a specified condition is true.
 The for loop allows you to specify initialization, condition, and iteration in a single line.

17. Break, Continue, Return, and Yield:

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP


APPLIED COMPUTING (SHORT NOTES) 2023-24
2ND SEMESTER
 break is used to exit a loop or switch statement.
 continue is used to skip the current iteration of a loop and move to the next iteration.
 return is used to end the execution of a function and return a value.
 yield is used in generator functions to pause and resume the function's execution.

18. Functions: Defining and Invoking:

 Functions are reusable blocks of code that perform specific tasks.


 Functions are defined using the function keyword followed by a name, parameters, and
a block of code.
 Functions are invoked or called using the function name followed by parentheses.

19. Function Arguments and Parameters:

 Parameters are variables listed in the function definition.


 Arguments are the values passed into the function when it is invoked.
 Parameters and arguments allow you to pass data to functions and make them more
flexible.

20. Functions as Values:

 In JavaScript, functions are treated as first-class objects, which means they can be
assigned to variables, passed as arguments, and returned from other functions.
 Functions can be used as values and stored in variables or properties.

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP


APPLIED COMPUTING (SHORT NOTES) 2023-24
2ND SEMESTER

UNIT 4:
1. Objects:
 Creating objects: Objects in JavaScript can be created using the object literal
notation or the constructor function.
 Querying and setting properties: Properties of an object can be accessed and
modified using dot notation or square brackets.
 Deleting and testing properties: The delete keyword can be used to remove a
property from an object. The in operator can be used to check if a property
exists in an object.
 Serializing objects: Objects can be serialized into a JSON string using
JSON.stringify().
2. Arrays:
 Creating arrays: Arrays in JavaScript can be created using array literal notation or
the Array() constructor.
 Reading and writing arrays: Array elements can be accessed or modified using
their index.
 Array length: The length property of an array returns the number of elements in
the array.
 Iterating arrays: Arrays can be iterated using loops such as for loop or array
methods like forEach().
 Strings as arrays: In JavaScript, strings can be treated as arrays of characters.
Individual characters can be accessed using square brackets and index.
3. The Document Object Model (DOM):
 The DOM represents the structure of an HTML document and provides a way to
interact with it using JavaScript.
 Elements in the DOM are organized in a tree-like structure with the document
object at the top.
 DOM manipulation allows adding, modifying, or removing HTML elements
dynamically.
4. Program input and output:
 Input: JavaScript programs can take user input using prompts, forms, or by
accessing DOM elements.
 Output: JavaScript programs can display output using console.log(), alert(),
or by modifying the content of HTML elements.
5. Browser events and event handling:

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP


APPLIED COMPUTING (SHORT NOTES) 2023-24
2ND SEMESTER
 Browser events are actions or occurrences that happen in the browser, such as a
mouse click, keypress, or page load.
 JavaScript can listen to these events and respond to them using event handlers.
 Event handlers are functions that are executed when a specific event occurs. They
can be attached to HTML elements using event listeners.

RECFORGE COMPANY DOWNLOAD JKSTUDYMATERIAL APP

You might also like