JavaScript/Advanced JavaScript

From Wikiversity
Jump to navigation Jump to search
Subject classification: this is a design resource.
Subject classification: this is a technology resource.
Subject classification: this is an engineering resource.
Educational level: this is a tertiary (university) resource.

Statements[edit | edit source]

The following statements allow the coder to specifically direct the process in alternative packages.

DOM editing[edit | edit source]

Also see: Web_Design/Getting_to_know_the_Document_Object_Model_with_JavaScript

Attributes selection[edit | edit source]

Finding names, identification, values, colors, and other settings is possible via JavaScript.

var drawnName = document.getElementsByTagName('div'); //get the div collection
var process = drawnName.length;

	for (var i = 0; i < process; i++) { //process through the div collection
		
		var nos = i;
		var myattrib = 'onclick'; //give each one my mouse click function
		var newVal = "myotherFunction(" + nos + ")";
		var post = drawnName[i];
		post.setAttribute(myattrib, newVal); //set it altogether
		

	};

Element selection[edit | edit source]

See also: Web_Design/JavaScript_Challenges

The code to seek an element via a collection of those elements present:

var script = document.getElementsByTagName('script'); //find the script collection
var thus = script[0].parentNode; //pick the parent
thus.removeChild(script[0]); //remove the first script in the collection


The code to add an element could be this (appending the body (HTML) element):

function develop() {
	var script = document.createElement("script"); //create a spare element
	script.type = "text/javascript";
	script.src = "index.js";
	document.body.appendChild(script); //paste it to the body
	
}


Note: this will not work in an XML document. XML documents don't have the HTML Body tag/element.

Activity: Make a Simple CAD

JavaScript for XML[edit | edit source]

Resources: http://en.wikipedia.org/wiki/ECMAScript_for_XML

XMLHttpRequest[edit | edit source]

See http://en.wikipedia.org/wiki/XMLHttpRequest

AJAX[edit | edit source]

See also: Web_Design/AJAX_Challenges

XSLT[edit | edit source]

Client-side and user scripts[edit | edit source]

Client-side[edit | edit source]

See http://en.wikipedia.org/wiki/Client-side_scripting

Userscripts[edit | edit source]

Resources: http://userscripts.org/
See http://en.wikipedia.org/wiki/Greasemonkey

Server-side scripts[edit | edit source]

REST servers and javavascript in http[edit | edit source]

Resources: http://rest.elkstein.org/2008/02/using-rest-in-javascript.html
See : Web_programming,_an_example

Javascript Games and event tools[edit | edit source]

Timers[edit | edit source]

JavaScript establishes two time oriented objects.

  1. setTimeout
setTimeout(alert('I waited this time'), 1000);
  1. setInterval

Events[edit | edit source]

The following gives an example of catching a key event to describe it's code (via a label). It's extremely simple and may only work in FireFox or something similar. Better snippets can easily be found to suit numerous purposes. Try this example if you're unsure what Unicode numbers follow your keyboard strokes.

<!DOCTYPE html>
<html>
        <head><title>Lesson keys</title></head>
        <body>
                <script>
                        function tohear(e) {
                                var textTo = document.getElementById('textbox');
                                var keycode = e.charCode;
                                textTo.innerHTML += " " + keycode + "<br>";
                        };
                        window.onkeypress = tohear;
                </script>
                Character codes for keys <br>
                <label id="textbox"></label><br>
        </body>
</html>

A good detector is found below this page/link Detecting keystrokes. If you notice, it will operate differently in Firefox, Chrome, or IE, (for mathematical operators mostly).

Maps, Drawing, Design[edit | edit source]

Maps[edit | edit source]

Resources: https://developers.google.com/maps/documentation/javascript/tutorial
See http://www.wikihow.com/Geocode-an-Address-in-Google-Maps-Javascript

Drawing[edit | edit source]

SVG[edit | edit source]

Resources: http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/ or
http://srufaculty.sru.edu/david.dailey/svg/SVG_serialize.html

Browser identification[edit | edit source]

Excluding IE[edit | edit source]

Internet Explorer will recognize a simple inclusion from within HTML comments:

<!--[if IE]>
          <p>This is the line where only IE will overlook that it's a comment. 
          It's a good place to source the dot-js file for IE browsers</p>
<![endif]-->


Some logic is allowed through the use of gt for greater than (or lt for lower than):

	
<!--[if gt IE 6]>
<br>
	This is a comment overlook for IE browsers that are greater than IE6<br>
<![endif]-->


		
<!--[if !IE]> <-->		
	<p> This is a line between two comments creating an IE exclusion.</p>		
<!--> <![endif]-->

This merely an HTML solution to include scripts that specifically apply within IE (or the opposite).

Browser specific code/script and javascript[edit | edit source]

Mozilla[edit | edit source]

Resources: JavaScript Guide

Error handling[edit | edit source]

Resources: msdn.microsoft error handling examples

Alternative ECMAscript languages[edit | edit source]

ECMAscript[edit | edit source]

ActionScript[edit | edit source]

ActionScript is the scripting language in use in Flash website/movie development.

ActionScript isn't very different from JavaScript. It applies the same language style to a timeline application. And it offers several commands to work with movies. But, it essentially adopts the same ECMAscript requirements for it's language.

Developing with JavaScript[edit | edit source]

JavaScript is a standardized language best described by popular use. Alterations to the language need to be adopted. Deprecation of former code-practice is common in the standardization process. The community of developers is social. This means that they migrate to new instances of JavaScript usage. Information overload is expected for individuals attempting the intensive learning curve. New standards are adopted progressively so that programmers can migrate their assets. Most coders will attempt some restriction of their required skill-set. It's best to communicate/share via a project when producing larger developments. See: https://developer.mozilla.org/en-US/docs/JavaScript


Developing with React[edit | edit source]

React is a Javascript library built and maintained by Facebook. It is used for developing of web and mobile apps. React relies on Virtual DOM for updating the UI which sometimes creates performance issues.