L1. Introduction, CSE 202, BN11.pdf JavaScript

Course Code: CSE 202
Course Title: Computer Programming Lab
Lecture 1: Introduction
Course Teacher: Saurav Barua (SB)
Assistant Professor, Dept. of CE, DIU
Phone: +88-01715334075
Email: saurav.ce@diu.edu.bd

Contents
2
Link CSS and JS
with HTML
Visual Studio
(VS) code
Installation of
VS code.
HTML and CSS
Introduction to
JavaScript (JS)
.
console.log(),
prompt() and
alert() methods.

Introduction to JavaScript (.js)
• JavaScript (JS) is the world's most popular
programming language.
• JS is the programming language of the Web.
• It can be run either in the web-browser console
directly or through IDE along with HTML and CSS.
• HTML provides structure, CSS provides style and JS
provides functionality in a web application.
3

Introduction to JavaScript (.js)
4
• Type http://localhost:8080/ in chrome browser.
• Press F12 and click console.
• write JavaScript code in the console.

Some methods in JS
5
Methods Description
console.log("text") This method writes a message to
the console and useful for testing
purposes.
alert("text") The method displays an alert box
with a message and an OK button.
prompt("text") The method displays a dialog box
that prompts the user for input.

Visual Studio code
• Visual Studio Code (VS code) is a streamlined code editor with
support for development operations like debugging, task
running, and version control.
• It aims to provide just the tools a developer needs for a quick
code-build-debug cycle and leaves more complex workflows to
fuller featured IDEs, such as Visual Studio IDE.
• It is not a language-specific IDE as you can use this to write
code in C#, C++, VB(Visual Basic), Python, JavaScript, and many
more languages.
6

Installation of VS code
• Download and install VS code from:
https://code.visualstudio.com/
7

Live server
9
▪ Makes the existing server,
live - this is a Web Extension
that helps you to live reload
feature for dynamic content.
▪ Install live server from the
VS code extension tab
located in the left sidebar.

Introduction to HTML and CSS
• Hypertext Markup Language (HTML) is the standard
markup language for documents designed to be
displayed in a web browser. It defines the content and
structure of web content.
• Cascading Style Sheets (CSS) is a style sheet language
used for specifying the presentation and styling of a
document.
10

Link JS and CSS with html
12
❑At the end of html head tag to add CSS file of name
style.css write:
<link rel="stylesheet" href="style.css">
❑At the end of html body tag to add CSS file of name
app.js write:
<script src="myscripts.js"></script>

Link JS and CSS with html
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="myscripts.js"></script>
</body>
</html>

Example 1
14
Write a program to link html, CSS and JS files, text in JS and display in the
browser.

Example 1
15
1. Program to link CSS and JS files with html and write text in JS and display in the
browser.
Google drive link:
https://drive.google.com/drive/folders/1pJ1_qHQPtkipWD
sYwrWvCy5EZVRMuaCi?usp=drive_link
Git-hub link:
https://github.com/sauravbarua02/introSpring25

Html codes
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Text Display</title>
</head>
<body>
<div class="container" id="container">
</div>
<script src="app.js"></script>
</body>
</html>

CSS codes
17
body{
background-color: rgba(216, 119, 119,
0.3);
}
.container{
background-color: rgba(216, 119, 119,
0.6);
height: 400px;
width: 300px;
margin:5px auto;
padding: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

JS codes
18
const containerEl =
document.getElementById("container");
containerEl.innerText = `Branches of Civil
Engineering are-
Sturctural Engineering,
Geotechnical Engineering
Transportation Engineering
Environmental Engineering
Water resource Engineering`;

Class tasks
19
Task 1.1: Program to link CSS and JS files with html, make background color blue,
write text (regarding application of Structural Engineering) in JS and display in the
browser.
Task 1.2: Program to link CSS and JS files with html, make background color purple,
write text (regarding application of Environmental Engineering) in JS and display in
the browser.
Task 1.3: Program to link CSS and JS files with html, make background color yellow,
write text (regarding application of Geotechnical Engineering) in JS and display in
the browser.
Task 1.4: Program to link CSS and JS files with html, make background color brown,
write text (regarding application of Transportation Engineering) in JS and display in
the browser.
Task 1.5: Program to link CSS and JS files with html, make background color red,
write text (regarding application of Water Resource Engineering) in JS and display in
the browser.
(hints: change background-color property in css and text inside backtick in JS.)

L1. Introduction, CSE 202, BN11.pdf JavaScript

More Related Content

Similar to L1. Introduction, CSE 202, BN11.pdf JavaScript (20)

More from SauravBarua11 (20)

Recently uploaded (20)

L1. Introduction, CSE 202, BN11.pdf JavaScript