Scripting in HTML
1. JavaScript (Client-Side)
JavaScript is embedded inside HTML using the <script> ... </script> tag.
Syntax Rules
Functions → defined with function name() { ... }.
Variables → declared using var, let, or const.
Conditions → if ... else if ... else.
Output → shown using alert() or by changing HTML content.
Accessing elements → [Link]("id").value.
JavaScript Example
<html>
<body>
<p>Enter the temperature</p>
<input id="Temp" value="0" /> <!-- Input box -->
<button onclick="checkReading()">Enter</button> <!-- Button -->
<script>
// Function definition
function checkReading() {
var temp, result; // variable declaration
// Get value from input box with id="Temp"
temp = [Link]("Temp").value;
// Conditional statement
if (temp >= 200) {
result = "HIGH"; // assign string
} else if (temp >= 100) {
result = "OK";
} else {
result = "LOW";
}
// Show result using popup
alert("The result is " + result);
}
</script>
</body>
</html>
Syntax Explanation
1. <script> ... </script> → Marks JavaScript code block inside HTML.
2. function checkReading() { ... }
o function = keyword to define a function.
o checkReading = function name.
o () = parameter list (empty here).
o { ... } = block of code inside function.
3. var temp, result;
o var = keyword to declare variables.
o Variables are case-sensitive.
4. [Link]("Temp").value;
o document = the HTML page.
o getElementById("Temp") = find element with id Temp.
o .value = get the entered value.
5. if (condition) { ... } else if (condition) { ... } else { ... }
o Conditional structure for decision-making.
6. alert("The result is " + result);
o alert() = built-in function to show a popup.
o + = string concatenation.
Key Syntax Features in JS:
Semicolons ; → end of statement (optional but recommended).
Curly braces {} → group statements in blocks.
Case-sensitive (e.g., Temp ≠ temp).
2. PHP (Server-Side)
PHP is embedded in HTML using <?php ... ?>.
Syntax Rules
Variables → always start with $.
Functions → defined with function name($param) { ... }.
Conditions → if, else if, else.
Echo → outputs data to the browser.
Superglobals → predefined arrays like $_GET, $_POST (for form data).
Case-sensitive → variables are case-sensitive ($temp ≠ $Temp).
PHP Example (with syntax explained)
<?php
// Check if form data is submitted
if (isset($_GET['temp'])) {
echo "Result: " . checkReading($_GET['temp']); // output
} else {
?>
<!-- HTML form -->
<form action="#" method="get">
Enter Temp: <input type="text" name="temp" /><br />
<input type="submit" value="Calculate" />
</form>
<?php
}
// Define PHP function
function checkReading($inputTemp) {
$resultChar = "L"; // variable declaration
// Conditional statements
if ($inputTemp >= 200) $resultChar = "H";
else if ($inputTemp >= 100) $resultChar = "O";
return $resultChar; // return value
}
?>
Syntax Explanation
1. <?php ... ?>
o Tells the server to interpret this code as PHP.
2. if (isset($_GET['temp'])) { ... }
o if = conditional check.
o isset() = built-in function → checks if variable exists.
o $_GET['temp'] = gets value entered in form (sent by GET method).
3. echo "Result: " . checkReading($_GET['temp']);
o echo = outputs text/data to browser.
o "Result: " = string.
o . = string concatenation operator (like + in JavaScript).
o checkReading(...) = function call.
4. <form action="#" method="get"> ... </form>
o HTML form inside PHP.
o action="#" → submits form to same page.
o method="get" → sends data in URL.
o <input type="text" name="temp"> → text box named temp.
o <input type="submit"> → submit button.
5. function checkReading($inputTemp) { ... }
o function = keyword to define function.
o $inputTemp = parameter (value from form).
o { ... } = block of code.
6. $resultChar = "L";
o Declares variable, assigns "L".
7. if ($inputTemp >= 200) $resultChar = "H";
o Single-line if.
o If input ≥ 200 → H.
8. else if ($inputTemp >= 100) $resultChar = "O";
o If input ≥ 100 but < 200 → O.
9. return $resultChar;
o Sends back result to caller (echo).
Key Syntax Features in PHP:
$ must be used before every variable.
Statements end with ;.
Functions and keywords are case-insensitive (e.g., function or FUNCTION works), but
variables are case-sensitive.
Blocks of PHP can be mixed with HTML freely.
Summary of Syntax Differences
Feature JavaScript PHP
Variable declaration var x = 5; $x = 5;
Concatenation "Hello " + name "Hello " . $name
Function definition function f() {} function f($x) {}
Output to user alert() or [Link]() echo
Condition if ... else if ... else if ... else if ... else
Case sensitivity Yes (strict) Variables only