Scribd
Upload
34 views17 pages

End Sem

The document discusses the differences between JavaScript and Java. It provides a table comparing key features such as their models, type systems, execution environments, and typical usage. JavaScript uses an object-based model and is dynamically typed, while Java uses an object-oriented model and is statically typed. JavaScript is interpreted by browsers and used for front-end development, whereas Java is compiled to run on the JVM and used for server-side and enterprise applications.

Uploaded by

Atul Draws
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
34 views17 pages

End Sem

The document discusses the differences between JavaScript and Java. It provides a table comparing key features such as their models, type systems, execution environments, and typical usage. JavaScript uses an object-based model and is dynamically typed, while Java uses an object-oriented model and is statically typed. JavaScript is interpreted by browsers and used for front-end development, whereas Java is compiled to run on the JVM and used for server-side and enterprise applications.

Uploaded by

Atul Draws
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/ 17

Question:

Create an HTML document that includes the following elements:

1. Use character entities to display the temperature symbol (the small raised circle)
and a nonbreaking space.
2. Insert a horizontal rule with a thickness of 3 pixels.
3. Include an image of a car with the file name "car.jpg." Set the alt attribute to "Pic
of a Car" and scale the image to occupy 50% of the display width.
4. Create a hypertext link with the text "Visit our homepage" that points to a
document named "index.html" in the same directory.
5. Add another hypertext link with the text "Contact us" that opens an email to
"[email protected]" when clicked.
6. Finally, create a link that opens a new window and points to a page named
"Image.html" with the text "Open Page in a new window."

ANS:

<html>
<title>sample page</title>
<body>
<hr/>
temperature symbol: &deg; <br>
nonbreaking space: &nbsp;
<hr/>
<img src='car.jpeg', alt='Pic of a Car', width=50%/>
<a href='index.html'>Visit our homepage</a>
<br>
<a href='[email protected]'>Contact us</a>
<br>
<a href='Image.html'>Open Page in a new window</a>
</body>
</html>
Question:
Create an HTML document that includes the following lists:

1. Create an unordered list (<ul>) with at least three list items (<li>). Use different
bullet types for each item: one with the default disc, one with a circle, and one
with a square.

2. Next, create an ordered list (<ol>) with at least three list items (<li>). Use different
numbering styles for each item: one with Arabic numerals (default), one with
uppercase letters, and one with lowercase Roman numerals.

3. Finally, create a definition list (<dl>) with at least three term-definition pairs. Use
the <dt> tag for terms and the <dd> tag for definitions. Include various HTML
elements like images or links within the list items.

ANS:

<html>
<title>sample page</title>
<body>
<ul>
<li type='disc'> hello</li>
<li type='circle'> hello</li>
<li type='square'> hello</li>
</ul>
<ol>
<li type='1'> hello</li>
<li type='A'> hello</li>
<li type='I'> hello</li>
</ol>
<dl>
<dt>hello</dt>
<dd>hi</dd>
</dl>
</body>
</html>

Question:
border='1', cellpadding='10', cellspacing='5'

ANS:
<html>
<title>sample page</title>
<body>
<table border='1', cellpadding='10', cellspacing='5'>
<thead>STUDENT DATA</thead>
<tr>
<th colspan=4>B TECH CSE</th>
</tr>

<tr>
<th rowspan=4>DETAILS</th>
<th>Roll NO</th>
<th>Name</th>
<th>DOB</th>
</tr>

<tr>
<td align='center'>1</td>
<td>AAA</td>
<td>01-01-1992</td>
</tr>

<tr>
<td align='center'>2</td>
<td>BBB</td>
<td>02-02-1992</td>
</tr>

<tr>
<td align='center'>3</td>
<td>CCC</td>
<td>03-03-1992</td>
</tr>

</table>
</body>
</html>
Question:

ANS:

<html>
<title>sample page</title>
<body>
<form>

Name:
<input type='text'/> <br><br>

Age:
<input type='text'/> <br><br>

Password:
<input type='password'/> <br><br>

Interests:
Movies<input type='checkbox', name = 'Interests', value =
'Movies', checked='checked'/>
Travel<input type='checkbox', name = 'Interests', value =
'Travel'/>
Music<input type='checkbox', name = 'Interests', value =
'Music'/> <br><br>

Gender:
Male<input type='radio', name = 'gender', value = 'male',
checked='checked'/>
Female<input type='radio', name = 'gender', value ='female'/>
<br><br>

<select>
<option value='in'>India</option>
<option value='ne'>Nepal</option>
<option value='sri'>Srilanka</option>
</select> <br><br>

<select multiple size=3>


<option value='in', selected='selected'>India</option>
<option value='ne'>Nepal</option>
<option value='sri'>Srilanka</option>
</select> <br><br>

Address:<br>
<textarea rows=5, cols=50></textarea> <br><br>

<input type='submit'/> <input type='reset'/>


</form>
</body>
</html>

Question:
Create an HTML document that uses both inline styles, document-level styles, and an
external style sheet to style various elements. Apply different styles for the following:

1. Use inline styles to make a paragraph (<p>) have red text and a font size of 18px.

2. Use document-level styles to set the background color of all <h2> headings to
yellow and increase their font size to 30px.

3. Create an external style sheet named "styles.css" and link it to the HTML document
using the <link> tag. In this external style sheet, apply styles to make all paragraphs
(<p>) use a sans-serif font-family and have a red text color. Also, set the
background color of <h2> headings to yellow.

ANS:
<html>

<head>
<title>sample page</title>
<link type = 'text/css' href='style.css'/>
</head>

<body>
<p style = 'color:red; font-size=18px'>hi</p>
<h2>hello</h2>
<h1>hello</h1>
</body>

<style>
h2{background-color:yellow; font-size=30px}
</style>
</html>

Style.css
h1 {color:red; font-family: sans-serif; background-color:yellow;}

Question:
Create an HTML document with various elements and apply styles using different selector
forms in CSS. Demonstrate the use of the following selector forms:

1. Simple Selector Forms:


 Apply a style to all <h1> elements with a blue color.
 Apply a style to all <h2> and <h3> elements with a green color.

2. Class Selectors:
 Define two classes: .normal and .warning.
 Apply the .normal class to a paragraph (<p>) and set specific styles.
 Apply the .warning class to another paragraph and set different styles.

3. Generic Selectors:
 Define a generic class named .sale that can be applied to both <h3> and <p>
elements.
 Apply the .sale class to an <h3> and a <p> with specific styles.

4. id Selectors:
 Define an id selector for an element with the id section14 and set a specific
style.
 Apply this id selector to an <h2> element within the document.

5. Contextual Selectors:
 Use a descendent selector to style ordered list items within unordered
elements.
 Use a child selector to style list items (<li>) directly nested within an ordered
list (<ol>).

6. Pseudo Classes:
 Apply styles using the :hover pseudo class for an interactive effect.
 Apply styles using the :focus pseudo class for elements in focus.

7. Universal Selector:
 Use the universal selector (*) to set a common style for all elements in the
document.

ANS:
<html>

<head>
<title>sample page</title>
</head>

<body>
<h1>H1</h1>
<h2 class=h23>h2</h2>
<h3 class=h23>h3</h3>
<p class=normal>nomral</p>
<p class=warning>warning</p>
<h3 class=sale>h3 sale</h3>
<p class=sale>p sale</h3>
<p id=section14>section14</p>
<h2 id=section14>h2 section14</h2>
<ul>
<li>One</li>
<ol>
<li>two</li>
<li>three</li>
</ol>
</ul>
</body>

<style>
h1{color:blue;}
.h23{color:green;}
.normal{color:blue;}
.warning{color:red;}
.sale{font-size:25px;}
#section14{color:white;background-color:blue;}
ul ol li {color:red;}
h1:hover{color:red}
h2:focus{color:red}
*{font-family:Arial}
</style>

</html>
The Box Model

Question:
Create an HTML document that includes a box with the following specifications:

1. Apply a border to the box with a style of "dotted," a width of "2px," and a color of
"green."

2. Set the margin of the box to "10px" on all sides.

3. Apply padding to the box with a value of "15px" on all sides.

ANS:
<html>

<head>
<title>sample page</title>
</head>

<body>
<h1>INTRODUCTION TO HTML</h1>
</body>

<style>
h1{border-style:dotted; border-width:2px; border-color:green;
padding:15px; margin:10px; }
</style>

</html>

Question:
Create an HTML document that includes a body element with the following specifications:
1. Set a background image for the body using the background-image property. Use
the image "planes.jpg."

2. Ensure that the background image does not repeat using the background-repeat
property.

3. Position the background image at the bottom of the body using the background-
position property.

4. Additionally, set the background image to cover the entire screen using the
background-size property.

ANS:
<html>

<head>
<title>sample page</title>
</head>

<body>
<h1>INTRODUCTION TO HTML</h1>
</body>

<style>
body{background-image: url('car.jpeg');
background-repeat: no-repeat;
background-position: bottom;
background-size:100%}
</style>

</html>

Question
Java script vs Java (code: MUTE)

Feature JavaScript Java


Model Object based model Object oriented model
A dynamically-typed language, meaning A statically-typed language, where variable
Type System variable types can change. types are fixed.
Execution Interpreted by the browser's JavaScript Compiled, runs on the Java Virtual
Environment engine. Machine (JVM).
Front-end web development. Server-side Used in enterprise applications, mobile
Usage development. applications (Android) and more.

Explicit /direct embedding - <script></script> in head OR body


Implicit/indirect embedding - <script src=’script.js’> in head
Question:
1. Create an HTML document with a button that triggers an alert dialog displaying a
custom message.
2. Add another button that triggers a confirm dialog asking the user if they want to
continue. Display a message based on the user's choice.
3. Include a third button that triggers a prompt dialog asking the user for their name.
Display a personalized greeting on the page using the entered name.

<!DOCTYPE html>
<html>
<head>
<title>sample page</title>
<script>
function al(){
alert('Hello world');
}
function conf(){
var a = confirm('Do you want to continue?');
if (a==1){
document.write('yes');
}
else{
document.write('no');
}
}
function prom(){
var name = prompt('Enter your name ');
document.write('welcome, ' + name);
}
</script>
</head>
<body>
<input type='submit' onclick='al()' value='alert'/>
<input type='submit' onclick='conf()' value='confirm'/>
<input type='submit' onclick='prom()' value='prompt'/>
</body>
</html>

Question:
Sum of two numbers using prompt

<!DOCTYPE html>
<html>
<head>
<title>sample page</title>
<script>
function sum(){
var a = prompt('Enter number 1');
var b = prompt('Enter number 2');
document.write(parseInt(a)+parseInt(b));
}
</script>
</head>
<body>
<input type='submit' onclick=sum() value='add'>
</body>
</html>

Question
Difference between pre increment and post increment

++a (pre-increment):
This form increments the value of a before the value is used in an expression.
The updated value is immediately used.
a = 5;
b = ++a; // Increment 'a' first, then assign to 'b'
// Now, a is 6, and b is 6

a++ (post-increment):
This form increments the value of a after the current value is used in an expression.
The original value is used before the increment takes place.
a = 5;
b = a++; // Assign the current value of 'a' to 'b', then increment
'a'
// Now, a is 6, but b is 5

TYPE CONVERSIONS

Implicit type conversions

var result1 = 7 * "3"; // Result: 21


var result2 = "3" * 7; // Result: 21
var result3 = "A" * 7; // Result: NaN

var strResult = 20 + 20 + "ABC"; // Result: "40ABC"


var strResult2 = "ABC" + 2020; // Result: "ABC2020"
var strResult3 = "ABC" + 20 + 20; // Result: "ABC2020"

Explicit type conversions

Use the String() constructor or the toString method.


var num = 123;
var str1 = String(num); // Result: "123"
var str2 = num.toString(); // Result: "123"
var str_binary = num.toString(2); // Result: "110"

Use the Number() constructor or subtract zero


var strNum = "7";
var num1 = Number(strNum); // Result: 7
var num2 = strNum - 0; // Result: 7

parseInt and parseFloat


var intResult = parseInt("72AB"); // Result: 72
var floatResult = parseFloat("3.14"); // Result: 3.14

Creating objects:
Create my_car and add some properties.

// Create an Object my_car


var my_car = new Object();

// Create and initialize the ‘make’ property


my_car.make = "Ford";

// Create and initialize ‘model’ property


my_car.model = “SUV";

The delete operator can be used to delete a property from an object.

delete my_car.model
FOR PHP
FOR JAVASCRIPT

JSON.parse() – converting json string to java script object

JSON.stringify() – converting js object to JSON string


LARAVEL FRAMEWORK

MVC Architecture:

 Model-View-Controller
 Organizes code into three interconnected parts:

o Models:
 Handle data interactions
 Represent database tables
 Define relationships between data
o Views:
 Handle user interface and presentation
 Contain HTML, CSS, and JavaScript
 Render visual elements based on data from Models
o Controllers:
 Act as "middlemen" between Models and Views
 Handle incoming requests
 Retrieve data from Models
 Pass data to Views for rendering
 Process user input

You might also like