Javascript Widget examples

Javascript widged

Date selection example I.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <!-- link rel="stylesheet" href="/resources/demos/style.css" -->
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

Graph example II.

https://plot.ly/javascript/pie-charts/

<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <!-- Numeric JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
</head>

<body>

  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    var data = [{
        values: [19, 26, 55],
        labels: ['Residential', 'Non-Residential', 'Utility'],
        type: 'pie'
      }];
    Plotly.newPlot('myDiv', data);
  </script>
</body>

Equation example III.

https://www.mathjax.org/

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  <script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
  </script>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({  
		TeX: {
		 equationNumbers: { autoNumber: "AMS"} 
		 } });
  </script>
 <script type="text/x-mathjax-config">
    MathJax.Hub.Config({  
		tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]
		}  });
  </script>
  <script type="text/javascript">    
    MathJax.Hub.Config({    
      extensions: ["tex2jax.js"],    
      "HTML-CSS": { scale: 95}    
    });    
  </script>
</head>

<body bgcolor="#FFFFFF">
 <h2>Equation:</h2>
<p>
\begin{equation}
 z\small{(t)}=y \small{(t)}^2 \cdot sin \small{(y(t)})
\end{equation}
</p>
</body></html>

Javascript html editor example IV.

https://blog.smartbear.com/programming/five-free-javascript-libraries-to-add-text-editing-to-your-web-application/

http://www.themaninblue.com/experiment/widgEditor/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>The Man in Blue &gt; Experiments &gt; widgEditor</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" media="all">
	@import "css/info.css";
	@import "css/main.css";
	@import "css/widgEditor.css";
</style>
<script type="text/javascript" src="scripts/widgEditor.js"></script>
</head>

<body>
<div id="content"><br>
<h2>widgEditor</h2>
<p></p>
<form action="submit.php" onsubmit="alert('Your submitted HTML was:\n\n'
   + document.getElementById('noise').value); return false;">
	<fieldset>
		<label for="noise">
			Make some noise:
		</label>
		<textarea id="noise" name="noise" class="widgEditor nothing">
        &lt;p&gt;widgEditor &lt;strong&gt;automatically&lt;/strong&gt;
         integrates the content that was in the textarea!&lt;/p&gt;</textarea>
	</fieldset>
	<fieldset class="submit">
		<input type="submit" value="Check the submitted code" />
	</fieldset>
</form>
</div>
</body></html>

Visit a graphics object gallery. Click to any demo to see the source.

Try to find some interesting Javascript functions on the web. Try to construct your own program using them.