JAVASRIPT and PHP Basics# Unit 2 Webdesign

IT for Engineers Sanjivani Rural Education Society’s Sanjivani College of Engineering, Kopargaon-423603 (An Autonomous Institute Affiliated to Savitribai Phule Pune University, Pune) NAAC ‘A’ Grade Accredited, ISO 9001:2015 Certified Department of Information Technology (NBA Accredited) Mr. N. L. Shelake Assistant Professor

Web Design Course Contents: - Web Design Mr. N. L. Shelake Department of Information Technology

JavaScript JavaScript is a High Level, versatile and widely used programming language primarily for web development. It is a client-side scripting language, executed by web browsers, making web pages interactive. JavaScript can also be used for server-side development with technologies like Node.js. Web Design Mr. N. L. Shelake Department of Information Technology

JavaScript Its ability to add interactivity and dynamic behavior to websites It is one of the core technologies used for web development, alongside HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). Web Design Mr. N. L. Shelake Department of Information Technology

History of JavaScript JavaScript was created by Brendan Eich in 1995 Netscape Communications Corporation Initially named "Mocha" and then "LiveScript," it was eventually renamed JavaScript as part of a partnership with Sun Microsystems (now Oracle) It is not related to JAVA Mainly designed for client-side scripting in web browsers JavaScript Web Design Mr. N. L. Shelake Department of Information Technology

History of JavaScript The first public release of JavaScript was in Netscape Navigator 2.0 in 1995 It allowed developers to add interactive elements and dynamic behavior to web pages, making the web more engaging for users. JavaScript's adoption was accelerated by the "Browser Wars" of the late 1990s and early 2000s, primarily between Netscape Navigator and Microsoft's Internet Explorer Implemented their own versions of JavaScript JavaScript Mr. N. L. Shelake Department of Information Technology JavaScript

History of JavaScript To address these issues and create a standardized specification for JavaScript, the ECMA established and ECMAScript standard in 1997. ECMAScript defines the core features of JavaScript. The first standardized version was ECMAScript 1 European Computer Manufacturers Association. The organization was founded in 1961 to standardize computer systems in Europe. JavaScript Mr. N. L. Shelake Department of Information Technology JavaScript

What is JavaScript? JavaScript is a high-level, interpreted scripting language primarily used for adding interactivity and behavior to web pages. It allows developers to create dynamic content, manipulate the Document Object Model (DOM), and interact with users. JavaScript Mr. N. L. Shelake Department of Information Technology JavaScript

Why JavaScript? The primary language for web development JavaScript is supported by all major web browsers (Cross- Browser Compatibility) JavaScript is a versatile language that can be used for both front- end and back-end development has led to the creation of numerous libraries, frameworks, and tools that simplify and accelerate web development. like React, Angular etc (Community) JavaScript Mr. N. L. Shelake Department of Information Technology JavaScript

Why JavaScript? JavaScript's support for asynchronous programming, building responsive and non-blocking applications.  A large pool of JavaScript developers available in the job market, As compare to other programming language JavaScript is based on open web standards, making it accessible and transparent. ECMA JavaScript can easily integrate with other web technologies like HTML and CSS, making it an integral part of the web development stack JavaScript Mr. N. L. Shelake Department of Information Technology JavaScript

Sample Program <html> <body> <h2>What Can JavaScript Do?</h2> <p id=“hellodemo">JavaScript can change HTML content.</p> <script> document.getElementById(“hellodemo").innerHTML = "Hello"; </script> </body> </html> JavaScript Mr. N. L. Shelake Department of Information Technology JavaScript

How do you declare variables in JavaScript? Variables can be declared using var, let, or const followed by the variable name. For example var x = 15; let x = 5; const x = 5; JavaScript Mr. N. L. Shelake Department of Information Technology JavaScript

What is the difference between let, const, and var for variable declaration? var has function-level scope and can be redeclared within the same function. let and const have block-level scope and cannot be redeclared within the same block. const is used for variables that should not be reassigned. JavaScript Mr. N. L. Shelake Department of Information Technology JavaScript

Basic Syntax Variables: Declare variables using var, let, or const. var has function-level scope. let and const have block-level scope. const is used for constants.. Web Design Mr. N. L. Shelake Department of Information Technology

Basic Syntax Data types: JavaScript has dynamic types.  Primitive types: Number, String, Boolean, Undefined, Null.  Reference types: Object, Array, Function. Web Design Mr. N. L. Shelake Department of Information Technology

Basic Syntax Operators: Arithmetic, Comparison, Logical, Assignment, Ternary. Conditionals: if, else if, else, switch. Loops: for, while, do...while, for...in, for...of. Web Design Mr. N. L. Shelake Department of Information Technology

Basic Syntax Operators:  Arithmetic - + / * % ++ --  Assignment =, +=,-=,*=,/=  Comparison ==,!=, >, <, >=, <=,  Logical &&, ||, ! Web Design Mr. N. L. Shelake Department of Information Technology

Basic Syntax if (condition) { } if (condition) { } else { } if (condition) { } elseif { } Else { } If if else elseif Web Design Mr. N. L. Shelake Department of Information Technology

Basic Syntax Switch switch(expression) { case x: // code block break; case y: // code block break; default: // code block } Web Design Mr. N. L. Shelake Department of Information Technology

Basic Syntax <script> let day; switch (new Date().getDay()) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; } document.getElementById(“sample").innerHTML = "Today is " + day; </script> Web Design Mr. N. L. Shelake Department of Information Technology

Basic Syntax <html><body> <h2>JavaScript For Loop</h2> <p id="demo"></p> <script> let text = ""; for (let i = 0; i < 5; i++) { text += "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML = text; </script> </body> </html> Web Design Mr. N. L. Shelake Department of Information Technology

Basic Syntax <html> <body> <h1>Sample JavaScript Program</h1> <p id="sample">Hi! JavaScript </p> <button type="button" onclick='document.getElementById("sample").innerHTML = "Hello JavaScript!"'>Click Here</button> </body> </html> Web Design Mr. N. L. Shelake Department of Information Technology

Basic Syntax <html> <body> <h1>Sample JavaScript Program</h1> <p id=“sample"></p> <script> document.getElementById(“sample").innerHTML = "My First JavaScript"; </script> </body> </html> Web Design Mr. N. L. Shelake Department of Information Technology

Basic Syntax <html> <body> <p id="demo"></p> <script> let x, y, z; x = 5; y = 6; z = x + y; document.getElementById("demo").innerHTML = “addition is " + z + "."; </script> </body> </html> Web Design Mr. N. L. Shelake Department of Information Technology

Embedding with JavaScript  Embedding JavaScript refers to the practice of including JavaScript code within an HTML document.  This can be done in several ways to add interactivity, dynamic behavior, or functionality to a webpage. Web Design Mr. N. L. Shelake Department of Information Technology

Embedding with JavaScript  Inline Script: You can embed JavaScript directly within an HTML file using a <script> tag.  External Script: For larger JavaScript code or when you want to reuse the same code across multiple pages, it's common to place the code in an external JavaScript file with a .js extension. You then reference this file in your HTML using the <script> tag's src attribute. Web Design Mr. N. L. Shelake Department of Information Technology

Validation  Form validation used to usually take place at the server, following client submission of all required data with a click of the Submit button.  The server would have to send all the data back to the client and ask that the form be resubmitted with accurate information if the data entered by the client was missing or inaccurate.  This was a very time-consuming procedure that used to strain the server greatly. Web Design Mr. N. L. Shelake Department of Information Technology

Validation  JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. Form validation generally performs two functions. Web Design Mr. N. L. Shelake Department of Information Technology

Validation  Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.  Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data. Web Design Mr. N. L. Shelake Department of Information Technology

PHP  The term PHP is an acronym for PHP: Hypertext Preprocessor.  PHP is a server-side scripting language designed specifically for web development.  It is open-source which means it is free to download and use. It is very simple to learn and use.  The files have the extension “.php”. Web Design Mr. N. L. Shelake Department of Information Technology

PHP  Rasmus Lerdorf inspired the first version of PHP and participated in the later versions.  It is an interpreted language and it does not require a compiler.  PHP code is executed in the server.  It can be integrated with many databases such as Oracle, Microsoft SQL Server, MySQL, PostgreSQL, Sybase, and Informix. Web Design Mr. N. L. Shelake Department of Information Technology

PHP  It is powerful to hold a content management system like WordPress and can be used to control user access.  It supports main protocols like HTTP Basic, HTTP Digest, IMAP, FTP, and others.  Websites like www.facebook.com and www.yahoo.com are also built on PHP Web Design Mr. N. L. Shelake Department of Information Technology

PHP  One of the main reasons behind this is that PHP can be easily embedded in HTML files and HTML codes can also be written in a PHP file.  The thing that differentiates PHP from the client-side language like HTML is, that PHP codes are executed on the server whereas HTML codes are directly rendered on the browser.  PHP codes are first executed on the server and then the result is returned to the browser Web Design Mr. N. L. Shelake Department of Information Technology

PHP  Simple and fast  Efficient  Secured  Flexible  Cross-platform, it works with major operating systems like Windows, Linux, and macOS.  Open Source  Powerful Library Support  Database Connectivity Web Design Mr. N. L. Shelake Department of Information Technology

Syntax <?php PHP code goes here ?> Web Design Mr. N. L. Shelake Department of Information Technology

PHP Mr. N. L. Shelake Department of Information Technology Syntax <html> <head> <title>PHP Example</title> </head> <body> <?php echo "Hello, World! This is PHP code";?> </body></html> Output:- Hello, World! This is PHP code

PHP Mr. N. L. Shelake Department of Information Technology PHP Variables  Variables are "containers" for storing information  A variable can have a short name (like x and y) or a more descriptive name (age, carname, total_volume).  PHP variable names are case-sensitive!

PHP Mr. N. L. Shelake Department of Information Technology PHP Variables Rules for PHP variables:  A variable starts with the $ sign, followed by the name of the variable  A variable name must start with a letter or the underscore character  A variable name cannot start with a number  A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )  Variable names are case-sensitive ($age and $AGE are two different variables)

PHP Mr. N. L. Shelake Department of Information Technology PHP Example <html> <body> <?php $txt = "Hello world!"; $x = 5; $y = 10.5; echo $txt; echo "<br>"; echo $x; echo "<br>"; echo $y; ?> </body> </html> Hello world! 5 10.5

PHP Mr. N. L. Shelake Department of Information Technology PHP Example <html> <body> <?php $temp = "HelloWorld"; echo "PHP First Program $temp!"; ?> </body> </html> PHP First Program HelloWorld!

PHP Mr. N. L. Shelake Department of Information Technology PHP Example <html> <body> <?php $x = 5; $y = 4; echo "Addition is".($x + $y); ?> </body> </html> Addition is 9

PHP Mr. N. L. Shelake Department of Information Technology PHP Datatypes PHP supports several data types that are used to represent different kinds of values. Here are some of the commonly used data types in PHP  Integers: Example: $number = 42;  Floats (Floating-point numbers): $floatNumber = 3.14;  Strings: $text = "Hello, PHP!";  Booleans: $isTrue = true;  Arrays: $fruits = array("apple", "orange", "banana");  NULL: $variable = NULL;  Constants: define("PI", 3.14);

PHP Mr. N. L. Shelake Department of Information Technology Operator and Expression Same as, discussed in JavaScript Arithmetic Operators:  Addition (+): $sum = 5 + 3; // $sum is now 8  Subtraction (-): $difference = 7 - 4; // $difference is now 3  Multiplication (*): $product = 2 * 6; // $product is now 12  Division (/): $quotient = 10 / 2; // $quotient is now 5  Modulus (%): $remainder = 11 % 3; // $remainder is now 2

PHP Mr. N. L. Shelake Department of Information Technology Operator and Expression Same as, discussed in JavaScript Assignment Operators:  Assignment (=): $variable = 10; // Assigns the value 10 to the variable  Addition Assignment (+=), Subtraction Assignment (-=): $x = 5; $x += 3; // Equivalent to $x = $x + 3; // $x is now 8

PHP Mr. N. L. Shelake Department of Information Technology Operator and Expression Same as, discussed in JavaScript Comparison Operators:  Equal (==): $result = (5 == 5); // $result is true  Identical (===): $result = (5 === "5"); // $result is false  Not Equal (!=): $result = (10 != 5); // $result is true  Not Identical (!==): $result = (10 !== "10"); // $result is true  Less than(<)  Greater than(>)

CSS Mr. N. L. Shelake Department of Information Technology Operator and Expression Same as, discussed in JavaScript Logical Operators:  AND (&&): $result = (true && false); // $result is false  OR (||): $result = (true || false); // $result is true  NOT (!): $$result = !true; // $result is false Increment and Decrement Operators  Increment (++): $counter = 5; $counter++; // $counter is now 6  Decrement (--): $counter = 5; $counter--; // $counter is now 4

PHP Mr. N. L. Shelake Department of Information Technology Operator and Expression Concatenation Operator:: Concatenation (.): $string1 = "Hello"; $string2 = " World!"; $greeting = $string1 . $string2; // $greeting is now "Hello World!"

PHP Mr. N. L. Shelake Department of Information Technology Operator and Expression  In PHP, an expression is a combination of values, variables, operators, and functions that, when evaluated, produces a single value.  Expressions can be simple or complex, depending on the operations involved. $sum = 5 + 3; // Addition $difference = 7 - 4; // Subtraction $product = 2 * 6; // Multiplication $quotient = 10 / 2; // Division $remainder = 11 % 3; // Modulus

PHP Mr. N. L. Shelake Department of Information Technology Control statements if Statement:  The if statement is used for conditional execution of code. <?php $a = 10; if ($a > 5) { echo "a is greater than 5"; } else { echo "a is not greater than 5"; } ?>

PHP Mr. N. L. Shelake Department of Information Technology Control statements While Loop:  The while loop executes a block of code as long as the specified condition is true. <?php $i = 1; while ($i <= 5) { echo $i; $i++; } ?

PHP Mr. N. L. Shelake Department of Information Technology Control statements for Loop:  The for loop is used to iterate a statement or a block of statements. <?php for ($i = 1; $i <= 5; $i++) { echo $i; } ?>

PHP Mr. N. L. Shelake Department of Information Technology Control statements foreach Loop::  The foreach loop is used for iterating over arrays. <?php $colors = array("red", "green", "blue"); foreach ($colors as $value) { echo $value; } ?>

PHP Mr. N. L. Shelake Department of Information Technology Control statements break and continue statement:  The break statement is used to exit a loop prematurely.  The continue statement is used to skip the rest of the code inside a loop for the current iteration. <?php for ($i = 1; $i <= 10; $i++) { if ($i == 5) { break; // exit the loop when $i is 5 } echo $i; } ?>

PHP Mr. N. L. Shelake Department of Information Technology Hosting tool: XAMPP  XAMPP is a free, open-source cross-platform web server solution stack package developed by Apache Friends. The name "XAMPP" is an acronym for the components it bundles:  X - Cross-platform  A - Apache HTTP Server  M - MariaDB (or MySQL)  P - PHP  P - Perl

PHP Mr. N. L. Shelake Department of Information Technology Hosting tool: XAMPP  Apache Web Server: XAMPP includes the Apache HTTP Server, one of the most widely used web servers globally. It provides a robust and flexible platform for hosting websites and applications.  Database Support (MariaDB or MySQL): MariaDB, a fork of MySQL, is the default database system included in XAMPP. MySQL can also be used interchangeably.  PHP, Perl, and Other Programming Languages: XAMPP supports PHP, a server-side scripting language widely used for web development. Perl is also included, making it versatile for various scripting needs.

PHP Mr. N. L. Shelake Department of Information Technology Hosting tool: XAMPP  phpMyAdmin: XAMPP comes bundled with phpMyAdmin, a web-based administration tool for managing MySQL and MariaDB databases.  Open Source and Cross-Platform: XAMPP is open-source software, freely available for Windows, Linux, and macOS. This cross-platform compatibility makes it easy for developers to work on different operating systems.

PHP Mr. N. L. Shelake Department of Information Technology Hosting tool: XAMPP  Easy Installation and Configuration: XAMPP has a straightforward installation process, making it suitable for both beginners and experienced developers. Configuration files are easily accessible for customization.  Development and Testing Environment: XAMPP is designed for creating a local development environment, allowing developers to test and debug their web applications before deploying them to a live server.  Wide Adoption: Due to its ease of use and comprehensive features, It is widely adopted by developers and used in educational.

PHP Mr. N. L. Shelake Department of Information Technology MySQL  MySQL is an open-source relational database management system (RDBMS) that is widely used for managing and organizing data.  It is a key component of the LAMP (Linux, Apache, MySQL, PHP/Python/Perl) and MEAN (MongoDB, Express.js, AngularJS, Node.js) stacks, making it a popular choice for web applications.  Components of MySQL:  MySQL Server - manages databases, processes queries, and controls access  MySQL Workbench: allows developers to design, model  MySQL Shell: enables administrators and developers  MySQL Connector: Provides connectors for various programming languages

PHP Mr. N. L. Shelake Department of Information Technology MySQL  MySQL is a powerful, reliable, and widely used relational database management system.  Its open-source nature, scalability, and strong community support make it a preferred choice for developers and businesses looking for a robust and efficient database solution.

IT For Engineers Thank You PHP Mr. N. L. Shelake Department of Information Technology

JAVASRIPT and PHP Basics# Unit 2 Webdesign

In this document

More Related Content

What's hot

Similar to JAVASRIPT and PHP Basics# Unit 2 Webdesign

More from Nitin Shelake

Recently uploaded

JAVASRIPT and PHP Basics# Unit 2 Webdesign