Scribd
Upload
15 views20 pages

L1. Introduction, CSE 202, BN11

JavaScript

Uploaded by

Saurav Barua
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views20 pages

L1. Introduction, CSE 202, BN11

JavaScript

Uploaded by

Saurav Barua
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

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: [email protected]
Contents

Introduction to
JavaScript (JS) Visual Studio Installation of
(VS) code VS code.
.

console.log(),
Link CSS and JS
HTML and CSS prompt() and
with HTML
alert() methods.

2
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)
• Type http://localhost:8080/ in chrome browser.
• Press F12 and click console.
• write JavaScript code in the console.

4
Some methods in JS
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.

5
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
VS code

8
Live server

▪ 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.

9
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
Boilerplate code in html

11
Link JS and CSS with html
❑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>

12
Link JS and CSS with html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<script src="myscripts.js"></script>
</body>
</html> 13
Example 1
Write a program to link html, CSS and JS files, text in JS and display in the
browser.

14
Example 1
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
15
Html codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> </div>
<meta name="viewport"
content="width=device-width, initial- <script src="app.js"></script>
scale=1.0"> </body>
<title>Text Display</title> </html>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" id="container">

16
CSS codes

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

17
JS codes

const containerEl =
document.getElementById("container");

containerEl.innerText = `Branches of Civil


Engineering are-
Sturctural Engineering,
Geotechnical Engineering
Transportation Engineering
Environmental Engineering
Water resource Engineering`;

18
Class tasks
(hints: change background-color property in css and text inside backtick in JS.)
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. 19
End of the Lecture

20

You might also like