Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Wednesday, August 10, 2016

Complete index page including Bootstrap, FontAwesome and jQuery

, , , No comments

Just add the following code to your index page and you are ready to use all the functionalities of Bootstrap, FontAwesome and jQuery

 <!DOCTYPE html>  
 <html>  
   <head>  
    <title> </title>  
    <!-- Favicon Start -->  
    <link rel="icon" type="image/png" href="resources/images/favicon.png" />  
    <!-- Favicon End -->  
    <!-- Meta Tags Start -->  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <!-- Mobile First -->  
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
    <!-- Mobile First -->  
    <!-- Meta Tags Start -->  
    <!-- Latest compiled and minified CSS Start -->  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  
    <!-- Latest compiled and minified CSS End -->  
    <!-- Optional theme Start -->  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  
    <!-- Optional theme End -->  
    <!-- JQuery UI CSS Start -->  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.theme.css">  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.structure.min.css">  
    <!-- JQuery UI CSS End -->  
    <!-- Sticky Footer Basic CSS Start -->  
    <style>  
      /* Sticky footer styles  
      -------------------------------------------------- */  
      html {  
      position: relative;  
      min-height: 100%;  
      }  
      body {  
      /* Margin bottom by footer height */  
      margin-bottom: 60px;  
      }  
      .footer {  
      position: absolute;  
      bottom: 0;  
      width: 100%;  
      /* Set the fixed height of the footer here */  
      height: 60px;  
      background-color: #f5f5f5;  
      }  
      /* Custom page CSS  
      -------------------------------------------------- */  
      /* Not required for template or sticky footer method. */  
      .container {  
      width: auto;  
      max-width: 680px;  
      padding: 0 15px;  
      }  
      .container .text-muted {  
      margin: 20px 0;  
      }  
    </style>  
    <!-- Sticky Footer Basic CSS End -->  
    <!-- JQuery Start -->  
    <script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>  
    <!-- JQuery End -->  
    <!-- JQuery UI Start -->  
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/external/jquery/jquery.min.js"></script>  
    <!-- JQuery UI End -->    
    <!-- FontAwesome JavaScript Start -->  
    <script src="https://use.fontawesome.com/d639cd4fa4.js"></script>  
    <!-- FontAwesome JavaScript Start -->  
    <!-- Latest compiled and minified JavaScript Start -->  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  
    <!-- Latest compiled and minified JavaScript Start -->  
   </head>  
   <body>  
    <!-- Navigation Areas -->  
    <nav class="navbar navbar-default" role="navigation">  
      <!-- Main Navigation Start -->  
      <div class="container">  
       <!-- Navigation Container Start -->  
       <ul class="nav navbar-nav">  
         <li><a href="#">Home</a></li>  
         <li><a href="#">About Us</a></li>  
         <li><a href="#">FAQ</a></li>  
         <li><a href="#">Contact</a></li>  
       </ul>  
      </div>  
      <!-- Navigation Container End -->  
    </nav>  
    <!-- Main Navigation End -->  
    <h1><i class="fa fa-university" aria-hidden="true"></i>This is without Bootsrap!</h1>  
    <!-- Footer Areas -->  
    <footer class="footer">  
      <!-- Footer Start -->  
      <div class="container">  
       <!-- Footer Container Start -->  
       <p class="text-muted">Place sticky footer content here.</p>  
      </div>  
      <!-- Footer Container End -->  
    </footer>  
    <!-- Footer End -->  
   </body>  
 </html>
Share:
Read More

Wednesday, July 13, 2016

What are basic fundamentals of JavaScript?

, No comments

What are basic fundamentals of JavaScript?

According to w3schools JavaScript is the programming language of HTML and the Web. JavaScript is used to add more functionalities to you web applications.

Where to use JavaScritp?

You can use JavaScritp in different ways which we will conver with examples.

1. JavaScript in <head> tag

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 function myFunction(){  
       document.getElementById("txt").innerHTML = "Paragraph changed.";  
 }  
 </script>  
 </head>  
 <body>   
 <p id="txt">This text will be replace!</p>  
 <button id="btn" onclick="myFunction()">Click Here!</button>  
 </body>  
 </html>

2. JavaScript in <body> tag

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 </head>  
 <body>   
 <p id="txt">This text will be replace!</p>  
 <button id="btn" onclick="myFunction()">Click Here!</button>  
 <script>  
 function myFunction(){  
       document.getElementById("txt").innerHTML = "Paragraph changed.";  
 }  
 </script>  
 </body>  
 </html>

3. External JavaScript

index.php 
 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script src="main.js"></script>  
 </head>  
 <body>   
 <p id="txt">This text will be replace!</p>  
 <button id="btn" onclick="myFunction()">Click Here!</button>  
 </body>  
 </html>
main.js 
 function myFunction(){  
       document.getElementById("txt").innerHTML = "Paragraph changed.";  
 }

What simply JavaScript can do for you?

JavaScript can do a lot, but here we will use a very simple examples to answer the above questions that what exactly JavaScript can do for you.

JavaScript Can Change HTML Content

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 function myFunction() {  
      document.getElementById("txt").innerHTML = "JavaScript Can Change HTML Content!";  
 }  
 </script>  
 </head>  
 <body>   
 <p id="txt">This is the HTML contect!</p>  
 <button id="btn" onclick="myFunction()">Click Here!</button>  
 </body>  
 </html>

JavaScript Can Change HTML Attributes

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 </script>  
 </head>  
 <body>   
 <button onclick="document.getElementById('bulb').src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxkJ_OzR4FdacfzGLRHQdPBbsdgKh4kbkaibx8C6-0FvwljUg14f0r1fR6pmo3PdkHLkAhnPNuhWJn9Of6RyANYTS94ahvJRQJRqlbtTqY2gdpZ0lCHMYlPssUOS6Fv9F7w7Sl-QRxABE/s1600/pic_bulbon.gif'">ON!</button>  
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdKnQxuIek86fylt3-tbZ7nro4MeKGmdDMrcrdsG1e7St6dh5jkshyt3T4JM3mvpppa1eAQovMaOPu9bqbbeGiggBYg_SgdwR0J3ZDFu4NoxIkG4Q_s0EKhFEpoIdViiey4NF5u298TE/s1600/pic_bulboff.gif  
 " id="bulb"/>  
 <button onclick="document.getElementById('bulb').src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdKnQxuIek86fylt3-tbZ7nro4MeKGmdDMrcrdsG1e7St6dh5jkshyt3T4JM3mvpppa1eAQovMaOPu9bqbbeGiggBYg_SgdwR0J3ZDFu4NoxIkG4Q_s0EKhFEpoIdViiey4NF5u298TE/s1600/pic_bulboff.gif'">OFF!</button>  
 </body>  
 </html>

JavaScript Can Change HTML Styles (CSS)

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 </script>  
 </head>  
 <body>   
 <p id="txt">This is simple text example!</p>  
 <button onclick="document.getElementById('txt').style.fontSize='20px'">Click to hange font size!</button>  
 </body>  
 </html>

JavaScript Can Show HTML Elements

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 </script>  
 </head>  
 <body>   
 <p id="txt" style="display:none;">This is simple text example!</p>  
 <button onclick="document.getElementById('txt').style.display = 'block'">Show!</button>  
 </body>  
 </html>

JavaScript Can Hide HTML Elements

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JavaScript</title>  
 <script>  
 </script>  
 </head>  
 <body>   
 <p id="txt" style="display:block;">This is simple text example!</p>  
 <button onclick="document.getElementById('txt').style.display = 'none'">Hide!</button>  
 </body>  
 </html>

JavaScript Output

JavaScript mostly used the four ways to display the data.

  1. Writing into an alert box, using window.alert().
  2. Writing into the HTML output using document.write().
  3. Writing into an HTML element, using innerHTML.
  4. Writing into the browser console, using console.log().

1. Writing into an alert box, using window.alert().

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 </head>  
 <body>  
 <script>  
 $(document).ready(function(){  
   window.alert("This will alert");  
 });  
 </script>  
 </body>  
 </html>

2. Writing into the HTML output using document.write().

 <script>  
 $(document).ready(function(){  
   document.write("This is document dot write");  
 });  
 </script>

3. Writing into an HTML element, using innerHTML.

 <body>  
 <p id="text"></p>  
 <script>  
 $(document).ready(function(){  
   document.getElementById("text").innerHTML = "This is the example of innerHTML";  
 });  
 </script>  
 </body>

4. Writing into the browser console, using console.log().

 <script>  
 $(document).ready(function(){  
   console.log(11+10);  
 });  
 </script>

JavaScript Statements

The line of instruction executed by the web browser is called JavaScript statements. JavaScript statements must end with semicolons ; such as the semicolons inside curly brackets(;).

Example:

 document.getElementById("demo").innerHTML = z;

JavaScript Comments

Comments in JavaScript is either single like or more than one line, show in example.

Single line comments start with //

More than one line comments start with /* and end with */

 // Single line comments:  
 document.getElementById("demo").innerHTML = z;  
 /*  
 Double like commnets  
 These lines will be ignored.  
 */  
 document.getElementById("myH").innerHTML = "My First Page";

JavaScript Variables





Share:
Read More

Contact Form

Name

Email *

Message *