JavaScript and Jquery

Contenidos

What is JavaScript?

JavaScript or JS is defined as a language oriented to objects, based on prototypes, imperative, weakly typed and dynamic. As definition is fine but for now if you are beginning to schedule forget a little bit of everything. JavaScript is a language that is born and comes to proclaim as standard on the client side. Do you mean this? Since the birth of the web, the pages have evolved at the beginning they were simply information and users could not interact directly, progressively had applets and scripts like Flash or Java (Java and JavaScipt have nothing to do) to make more dynamic. For the user to interact directly with the browser and today the most widespread language for this is JavaScript

JavaScript
JavaScript

What can I do with JavaScript?

Basically almost anything, examples there are thousands, from graphs that update dynamically, Twitter or Facebook updates are requests from JavaScript to add the latest comments or even video games.

JavaScript is used to anything that makes a browser, we can modify any element of a web with this language. What makes JavaScript is modify the DOM (Document Object Model), this word is much in the manuals of JS and the DOM is basically the model of as objects on a web page are structured.

Brief history of JavaScript

JavaScript is created by the browser Netscape in 1995 and its name is due to the increase of the popularity of Java, many to the beginning thought that could be a large of this language, but not have absolutely nothing that see. JavaScript is a registered trademark of Oracle.

Later Netscape launches a server, Netscape Enterprise Server-side JavaScript, but when actually JS acquires importance is NodeJS.

JavaScript features

Great JavaScript syntax part of it is very similar to C, (if, else, for, while…), if you don’t know anything about programming you can forget some of these things. The variables can change its type, a variable in C is defined as int (integer), float (real number), chart (alphanumeric character), array (vector)… However in JavaScript that variable can change between the different types, be a number then a text or even an object array (below explain).

JavaScript: objects and prototypes.

When we talk about objects are elements with a series of properties within an object could be an imaginary number, composed of real part (variable float), part imaginary (variable float), module (float) and argument (float) and with the functions sum, multiplication, division… When we have two complex objects and add them must perform the complex sum function, and create a new result object. This applies to anything, for example a video game character is an object with characteristics.

On the other hand are the prototypes, basically it is the same as an object but is different form the inheritance, say that a class of objects we can create a slightly different subclass, so that we have inherited from the father and add new features. That is what makes language such as Java or C++ and this second group are not treated as objects but as instances, we will not go into detail because JavaScript treats everything as objects do not distinguish if it was inherited or not. On the other hand the kinds of objects are immutable elements while the prototypes can be changed.

In short, JavaScript is a language, at least in my view, very free allows you to do the same code in many different ways, and changing and without being so strict as other languages.

JavaScript example

Finally a brief example of this language and as modified the structure of an html.

<html></html>
 <head></head>
   <title>Example JavaScript</title>
 
 <body></body>
   <input id="lectura" type="text" name="username" onchange="cambio()"><br>
   <div id="escritura"></div>
     Change of text
 
 
 <script></script>
   change = function() {}
     document.getElementById ("writing") .innerHTML = document.getElementById("lectura") .value;
   }
 
 

As we see in this html simply have a text input (to introduce a Word) and a div inside which displays text entered above. Copy and paste this text into a text file (with any editor just txt) and saves with the html extension.

Within Script we can see the JavaScript code to execute. But before that if we have fijarmos in the input:

OnChange = "change ()"

This means that when you change something here you must run the function change, which we will define:

change = function()

This function says that the element whose id = «script» to write the same as the value of the element with id = «reading».

document.getElementById ("writing") .innerHTML = document.getElementById("lectura") .value;

What is Jquery?

For many JavaScript programmers, Jquery is now almost part of the language, is a library that makes us the programming and saving code. In fact many people start learning JavaScript with Jquery.

jQuery
jQuery

Integrating Jquery JavaScript

There are basically two ways to integrate Jquery in our website, downloading the file from jquery.com website and adding in the header of the html.

<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>   

Either from a CDN (content delivery network) usually Google, this method add the Jquery library using a url from an external server.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Example of Jquery

Below an example of Jquery exactly equal that perform above to see how it’s easier.

<html></html>
 <head></head>
   <title>Example JavaScript</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 
 <body></body>
   <input id="lectura" type="text" name="username" onchange="cambio()"><br>
   <div id="escritura"></div>
     Change of text
 
 
 <script></script>
   change = function() {}
     $("#escritura") .html ($("#lectura") .val ()
 
 

As we see now in this example have saved code and is much more simple, basically with the function $ call to an object of the DOM, if is # will be an id, if is a. will be a class. In our case we call writing and creates an object with a function called html(), what remains inside the parentheses is what to write in id = «script» and in this case we call to id = «reading» and that us its value, that is what makes val() get the current value of the text input.

Here in both examples have implemented part of the code in the html with onchange = «change ()», but you can also run the script with certain functions such as $(«#lectura») .onchange ().

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.