Courses/Design & Technique-Essential Web Design/Q2/02 - Revision history

Andre: /* JS in a HTML page */

2017-11-28T07:42:42Z

JS in a HTML page

← Older revision		Revision as of 07:42, 28 November 2017
Line 39:		Line 39:

	<script>		<script>
	~~/* Javascript lives inside <script> </script> tags */~~

	alert('Hello Javascript!');		alert('Hello Javascript!');

2017-11-27T06:42:39Z

Javascript (JS)

← Older revision		Revision as of 06:42, 27 November 2017
Line 2:		Line 2:
	= Javascript (JS) =		= Javascript (JS) =



			==Resources ==
			* Code Academy JS basic course: https://www.codecademy.com/learn/javascript
			* JS reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
			* '''Code Academy''' jQuery basic course: https://www.codecademy.com/en/tracks/jquery
			* '''Try jQuery''' http://try.jquery.com/

	== what is JS?==		== what is JS?==

2017-11-27T06:38:42Z

← Older revision		Revision as of 06:38, 27 November 2017
Line 1:		Line 1:

	~~<includeonly>~~
	= Javascript (JS) =		= Javascript (JS) =

Line 83:		Line 82:


	~~</includeonly>~~

			<noinclude>
	==Data types==		==Data types==
	JS has essential data-types, that is types of information: numbers, strings, booleans and lists		JS has essential data-types, that is types of information: numbers, strings, booleans and lists
Line 203:		Line 202:
	</html>		</html>
	</source>		</source>
			</noinclude>

2017-11-27T06:36:52Z

Javascript (JS)

← Older revision		Revision as of 06:36, 27 November 2017
Line 1:		Line 1:

			<includeonly>
	= Javascript (JS) =		= Javascript (JS) =

Line 78:		Line 80:

	Essential to prototype, and debug your JS code.		Essential to prototype, and debug your JS code.



			</includeonly>

	==Data types==		==Data types==

2017-11-27T06:35:57Z

JS in a HTML page

← Older revision		Revision as of 06:35, 27 November 2017
Line 31:		Line 31:

	<script>		<script>
	~~var msg = "Good early morning,";~~		/* Javascript lives inside <script> </script> tags */
	~~var name = "Alice";~~
	~~var p = document.getElementById~~('~~greetings~~');		alert('Hello Javascript!');

	~~p.innerHTML="testing" +" " + msg +" " + name;~~

	</script>		</script>

2017-11-27T06:33:50Z

JS = a language

← Older revision		Revision as of 06:33, 27 November 2017
Line 18:		Line 18:
	* validate data		* validate data

	~~== JS <nowiki>=</nowiki> a language==~~
	~~Javascript is a programming language.~~

	Like natural languages (English, Dutch, Mandarin, etc) it has '''rules''', '''words''', and '''special characters''' (like {,[,$), each with specific meanings withing the language, which we'll have to follow in order to ''talk'' in JS.

	== JS in a HTML page==		== JS in a HTML page==
	Javascript appears '''inside''' the html page inside the <code><script></code> tag		Javascript appears '''inside''' the html page inside the <code><script></code> tag

2016-09-28T11:58:05Z

JS in a HTML page

← Older revision		Revision as of 11:58, 28 September 2016
Line 33:		Line 33:
	<body>		<body>
	<h1>starting javascript-ing</h1>		<h1>starting javascript-ing</h1>
	<p>within the script tag</p>		<p id='greetings' >within the script tag</p>

	<script>		<script>

2015-11-30T10:56:08Z

← Older revision		Revision as of 10:56, 30 November 2015
Line 9:		Line 9:
	* CSS - look		* CSS - look
	* Javascript - (artificial) intelligence.		* Javascript - (artificial) intelligence.

			==You can use JS to==
			* change HTML content
			* change element attributes
			* change an element style
			* retrieve the window size
			* make a timer
			* validate data

	== JS <nowiki>=</nowiki> a language==		== JS <nowiki>=</nowiki> a language==

2015-11-24T11:34:10Z

Javascript cocktail example

← Older revision		Revision as of 11:34, 24 November 2015
Line 166:		Line 166:
	== Javascript cocktail example ==		== Javascript cocktail example ==

	<~~script~~ lang="html4strict">		<source lang="html4strict">
	<!DOCTYPE html>		<!DOCTYPE html>
	<html>		<html>
Line 195:		Line 195:
	</body>		</body>
	</html>		</html>
	</~~script~~>		</source>

2015-11-24T11:33:45Z

Resources

← Older revision		Revision as of 11:33, 24 November 2015
Line 163:		Line 163:
	* Code Academy JS basic course: https://www.codecademy.com/learn/javascript		* Code Academy JS basic course: https://www.codecademy.com/learn/javascript
	* JS reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference		* JS reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

			== Javascript cocktail example ==

			<script lang="html4strict">
			<!DOCTYPE html>
			<html>
			<head>
			<meta charset="UTF-8" />
			</head>
			<body>
			<h1>starting javascript-ing</h1>
			<p id="content">within the script tag</p>
			<script>
			var min = 0;
			var max = 2;
			var random = Math.floor(Math.random()*(max - min + 1)) + min;

			var bottle=["rum","gin","vodka"][random];
			var herb=["mint","coriander","lime"][random];
			var powder="sugar";
			var cool="ice blocks";
			var d = new Date();
			var hour = d.getHours();
			var min = d.getMinutes();

			var content = document.getElementById("content");
			content.innerHTML = bottle + " with " + herb +
			"<br/>At "+hour+" : "+min+"?" ;

			</script>
			</body>
			</html>
			</script>