0% encontró este documento útil (0 votos)
44 vistas22 páginas

JAVASCRIPT

Este documento presenta un proyecto sobre JavaScript realizado por estudiantes de la Facultad de Educación de la Universidad Nacional de Cajamarca. El proyecto busca enseñar las características básicas de JavaScript para el diseño de páginas web dinámicas. El documento incluye la introducción, plan de trabajo con objetivos, marco teórico sobre la historia y conceptos de JavaScript, y una conclusión con bibliografía.

Cargado por

Jheiner Salazar
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
44 vistas22 páginas

JAVASCRIPT

Este documento presenta un proyecto sobre JavaScript realizado por estudiantes de la Facultad de Educación de la Universidad Nacional de Cajamarca. El proyecto busca enseñar las características básicas de JavaScript para el diseño de páginas web dinámicas. El documento incluye la introducción, plan de trabajo con objetivos, marco teórico sobre la historia y conceptos de JavaScript, y una conclusión con bibliografía.

Cargado por

Jheiner Salazar
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 22

UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

UNIVERSIDAD NACIONAL DE CAJAMARCA

FACULTAD DE EDUCACIÓN

ESPECIALIDAD DE MATEMÁTICA E INFORMÁTICA

PROYECTO:

JAVASCRIPT

CURSO:

PROGRAMACIÓN APLICADA A LA EDUCACION

DOCENTE:

MENDOZA SANTOS, Carlos Eduardo

ALUMNOS:

 MEJÍA FERNÁNDEZ, Herlin


 SALAZAR BERNARDO, Jheiner
 SÁNCHEZ MURGA, Carlos
 TOCAS PALMA, Gloria Esther.

CICLO:

Cajamarca, MARZO del 2021

1
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

INDICE
INTRODUCCIÓN ............................................................................................................................... 3
I. PLAN DE TRABAJO .................................................................................................................. 4
1. DENOMINACION: ................................................................................................................ 4
2. JUSTIFICACIÓN: .................................................................................................................. 4
3. OBJETIVOS:........................................................................................................................... 5
a) General ................................................................................................................................. 5
b) Específicos ............................................................................................................................ 5
II. MARCO TEORICO ............................................................................................................... 5
HISTORIA........................................................................................................................................ 5
Conceptos básicos de JavaScript .................................................................................................... 6
¿Qué es JavaScript?......................................................................................................................... 6
¿Qué puede hacer realmente? ...................................................................................................... 11
Seguridad del navegador ............................................................................................................... 13
Orden de ejecución de JavaScript ................................................................................................ 14
Código interpretado versus compilado ........................................................................................ 14
Código dinámico versus estático .................................................................................................. 15
¿Cómo agregas JavaScript a tu página? ..................................................................................... 15
JavaScript interno ............................................................................................................................ 16
JavaScript externo ......................................................................................................................... 17
Controladores de JavaScript en línea .......................................................................................... 18
Funciones Estándar ....................................................................................................................... 19
VENTAJAS......................................................................................................................................... 19
DESVENTAJAS................................................................................................................................. 20
SUJERENCIAS .................................................................................................................................. 20
CONCLUCIÓN .................................................................................................................................. 20
BIBLIOGRAFIA................................................................................................................................ 21

2
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

INTRODUCCIÓN
El mundo de la informática nunca hubiera existido de no ser por el desarrollo del
ordenador o computador. Que nos ha facilitado el procesamiento de datos,
manipulaciones y almacenamiento de documentos, imágenes, programas.

JavaScript es un lenguaje de programación que permite el script de eventos, clases y


acciones para el desarrollo de aplicaciones Internet entre el cliente y el usuario.
JavaScript permite con nuevos elementos dinámicos ir más allá de clicar y esperar en
una página Web. Los usuarios no leerán únicamente las páginas, sino que además las
páginas ahora adquieren un carácter interactivo. Esta interacción permite cambiar las
páginas dentro de una aplicación: poner botones, cuadros de texto, código para hacer
una calculadora, un editor de texto, un juego, o cualquier otra cosa que pueda
imaginarse.

Nos permite tener cierta interacción con el usuario de nuestras páginas, reconocer
determinados eventos que se puedan producir y responder a éstos adecuadamente.
Podemos, por ejemplo, añadir elementos con movimiento que recuerdan a las
animaciones Flash. Incluso podemos crear algunos programas más complejos que
manejen estructuras de datos.

También se puede decir que trabajar con JavaScript es sencillo y rápido, los resultados
pueden ser muy satisfactorios y aunque el lenguaje tenga algunas limitaciones, permite
al programador controlar lo que ocurre en la página.

En este proyecto se discutirá principalmente el uso de JavaScript en un entorno de


navegador Web, por lo que es esencial saber codificación HTML y CSS. Conocer PHP
puede ser una ventaja. La cual se pretende alcanzar los conocimientos técnicos para el
desarrollo de proyectos de automatización mediante lenguaje de programación
Microsoft Visual Studio, utilizando JavaScript ya que este lenguaje de programación
nos permite el script de eventos, clases y acciones para el desarrollo de aplicaciones
Internet entre el cliente y el usuario. Por lo tanto, proporcionaremos información acerca
de cómo utilizar este lenguaje JavaScript en Visual Basic.

3
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

I. PLAN DE TRABAJO

1. DENOMINACION:
JAVA SCRIPT

2. JUSTIFICACIÓN:
El presente proyecto es un lenguaje de programación, al igual que PHP, si bien tiene
diferencias importantes con éste. JavaScript se utiliza principalmente del lado del cliente
(es decir, se ejecuta en nuestro ordenador, no en el servidor) permitiendo crear efectos
atractivos y dinámicos en las páginas web.

Durante este proyecto podemos destacar el uso de JavaScript como lenguaje de


programación está en todos lados en nuestros Smart Phones, tabletas, televisores, son
pequeños códigos de programación o pequeños scripts que interactúan con el usuario y el
servidor generando así una sinergia entre el uso de una orden y devuelve una respuesta es
increíble como este mundo de JavaScript lo vemos complementados con otros lenguajes
volviéndose cada vez más potente y versátil.
Dentro de este proyecto lograre explicar el uso de los scripts hechos en JavaScript para
así lograr alcanzar cosas programadas jamás imaginadas, como juegos trivias, elearning
y muchas otras cosas más.

Así todo esto nos permitirá identificar cuáles son las dificultades que tenemos y
comprender mucho mejor el tema y obtener mejores resultados durante alguna
programación. Esta información la podremos obtener realizando una investigación
profunda acerca de JavaScript Microsoft Visual Basic, HTML, Y su conectividad.

4
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

3. OBJETIVOS:

a) General
Manejar las características básicas del lenguaje JavaScript para el diseño de páginas
Web con contenido dinámico.

b) Específicos

 Aprender a ejecutar scripts en JavaScript con una sintaxis correcta, además de


conocer los elementos básicos del lenguaje.

 Aprender sobre el manejo de funciones y objetos tanto los propios del lenguaje como
los definidos por el usuario.

 Aprender sobre el manejo de eventos en JavaScript para su aplicación en los


formularios HTML.

II. MARCO TEORICO

HISTORIA
Netscape, después de hacer sus navegadores compatibles con los applets, comenzó a
desarrollar un lenguaje de programación al que llamó LiveScript que permitiese crear
pequeños programas en las páginas y que fuese mucho más sencillo de utilizar que Java.
De modo que el primer JavaScript se llamó LiveScript, pero no duró mucho ese nombre,
pues antes de lanzar la primera versión del producto se forjó una alianza con Sun
Microsystems, creador de Java, para desarrollar en conjunto ese nuevo lenguaje.

La alianza hizo que JavaScript se diseñara como un hermano pequeño de Java, solamente
útil dentro de las páginas web y mucho más fácil de utilizar, de modo que cualquier
persona, sin conocimientos de programación pudiese adentrase en el lenguaje y utilizarlo
a sus anchas. Además, para programar JavaScript no es necesario un kit de desarrollo, ni
compilar los scripts, ni realizarlos en ficheros externos al código HTML, como ocurría
con los applets. Netscape 2.0 fue el primer navegador que entendía JavaScript y su estela
fue seguida por otros clientes web como Internet Explorer a partir de la versión 3.0. Sin

5
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

embargo, la compañía Microsoft nombró a este lenguaje como JScript y tenía ligeras
diferencias con respecto a JavaScript, algunas de las cuales perduran hasta el día de hoy.

Conceptos básicos de JavaScript


Como cualquier otro lenguaje de programación, JavaScript tiene algunas características
especiales: sintaxis, modelo de objetos, etc. Claramente, cualquier cosa que diferencia un
lenguaje de otro. Además, descubrirás rápidamente que JavaScript es un lenguaje
relativamente especial en su acercamiento a las cosas. Esta parte es esencial para
cualquier principiante de programación e incluso para aquellos que ya conocen un
lenguaje de programación debido a que las diferencias con otros lenguajes de
programación son numerosas.

¿Qué es JavaScript?
JavaScript es un lenguaje de programación de scripts (secuencia de comandos) orientado
a objetos. Esta descripción es un poco rudimentaria, hay varios elementos que vamos a
diseccionar.

- Un lenguaje de programación

En primer lugar, un lenguaje de programación es un lenguaje que permite a los


desarrolladores escribir código fuente que será analizado por un ordenador.

-Un desarrollador o programador es una persona que desarrolla programas. Puede


ser un profesional (un ingeniero, programador informático o analista) o un aficionado.

-El código fuente está escrito por el desarrollador. Este es un conjunto de acciones,
llamadas instrucciones, lo que permitirá dar órdenes al ordenador para operar el
programa. El código fuente es algo oculto, como un motor en un automóvil está oculto,
pero está ahí, y es quien asegura que el coche puede ser conducido. En el caso de un
programa, es lo mismo, el código fuente rige el funcionamiento del programa.
Dependiendo del código fuente, el ordenador realiza varias acciones, como abrir un menú,
iniciar una aplicación, efectuar búsquedas, en fin, todo lo que el equipo es capaz de hacer.

6
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

- Scripts de programación JavaScript te permite programar scripts. Como se


mencionó anteriormente, un lenguaje de programación es utilizado para escribir código
fuente a ser analizada por un ordenador. Hay tres formas de usar el código fuente:
Lenguaje compilado como: El código fuente se da a un programa llamado compilador
que lee el código fuente y lo convierte en un lenguaje que el equipo será capaz de
interpretar: el lenguaje binario, es de 0 y 1. Lenguajes como C o C ++ son lenguajes
compilados muy conocidos.

Lenguaje precompilado: Aquí, el código fuente se compila en parte, por lo general en


un código más fácil de leer para el ordenador, pero que todavía no es binario. Este código
intermedio es para ser leído por lo que se llama una “Máquina Virtual", que ejecutará el
código. Lenguajes como C # o Java se llaman precompilados.

Lenguaje interpretado: En este caso, no hay compilación. El código fuente se mantiene


sin cambios, y si desea ejecutar este código, debemos proporcionar un intérprete que va
a leer y realizar las acciones solicitadas.

JavaScript es un lenguaje de programación o de secuencias de comandos que te permite


implementar funciones complejas en páginas web, cada vez que una página web hace
algo más que sentarse allí y mostrar información estática para que la veas, muestra
oportunas actualizaciones de contenido, mapas interactivos, animación de Gráficos
2D/3D, desplazamiento de máquinas reproductoras de vídeo, etc., puedes apostar que
probablemente JavaScript está involucrado. Es la tercera capa del pastel de las tecnologías
web estándar, dos de las cuales (HTML y CSS) hemos cubierto con mucho más detalle
en otras partes del Área de aprendizaje.

 HTML es el lenguaje de marcado que usamos para estructurar y dar significado


a nuestro contenido web, por ejemplo, definiendo párrafos, encabezados y tablas
de datos, o insertando imágenes y videos en la página.
 CSS es un lenguaje de reglas de estilo que usamos para aplicar estilo a nuestro
contenido HTML, por ejemplo, establecer colores de fondo y tipos de letra, y
distribuir nuestro contenido en múltiples columnas.

7
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

 JavaScript es un lenguaje de secuencias de comandos que te permite crear


contenido de actualización dinámica, controlar multimedia, animar imágenes y
prácticamente todo lo demás. (Está bien, no todo, pero es sorprendente lo que
puedes lograr con unas pocas líneas de código JavaScript).

Primeros pasos en JavaScript

Como se mencionó anteriormente, JavaScript es un lenguaje utilizado principalmente


con el lenguaje HTML, en este capítulo se aprende cómo integrar este lenguaje en tus
páginas web, descubrir su sintaxis básica y mostrar un mensaje en la pantalla del usuario.

A continuación, se muestra un programa HTML simple que contiene la instrucción


JavaScript, situada dentro de un elemento

Apareciendo al ejecutarlo la siguiente caja de diálogo:

Sintaxis de JavaScript Instrucción La sintaxis de JavaScript no es complicada.


Generalmente, las instrucciones deben estar separadas por un punto y coma que se coloca
al final de cada instrucción:

8
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

Código: JavaScript

Sangría y presentación La sangría en la programación informática, es una manera de


estructurar el código para hacerlo más legible. Las instrucciones son priorizadas en varios
niveles y espacios de usos o lengüetas para desplazar a la derecha y crear una jerarquía.
Un ejemplo de código sangrado:

Código: JavaScript

Funciones En el ejemplo de ¡Hola mundo!, Se utilizó la función alert (). Discutiremos en


detalle la funciones de trabajo, en los capítulos siguientes, necesitarás saber el resumen
de la sintaxis. Una función consiste en dos partes: su nombre, seguido por un par de
paréntesis (una apertura y un cierre): Código: JavaScript

9
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

Entre paréntesis se indican los argumentos que también se llaman parámetros. Estos
contienen los valores que se pasan a la función. En el caso de ¡Hola mundo!, Son las
palabras "¡Hola, mundo! " lo que se transfieren como parámetros:

Código: JavaScript

alerta (¡’Hola mundo!’);

JavaScript "en la página"

Para situar el código JavaScript directamente en una página web, nada más simple,
siguiendo el ejemplo de ¡Hola, mundo!: se coloca el código en el elemento

 Tomemos una etiqueta de texto simple como ejemplo. Podemos marcarla


usando HTML para darle estructura y propósito:

Luego, podemos agregar algo de CSS a la mezcla para que se vea bien:

10
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

Y finalmente, podemos agregar algo de JavaScript para implementar un comportamiento


dinámico:

¿Qué puede hacer realmente?


El núcleo del lenguaje JavaScript de lado del cliente consta de algunas características de
programación comunes que te permiten hacer cosas como:

Almacenar valores útiles dentro de variables. En el ejemplo anterior, por ejemplo,


pedimos que ingreses un nuevo nombre y luego almacenamos ese nombre en una variable
llamada name.

Operaciones sobre fragmentos de texto (conocidas como "cadenas" (strings) en


programación). En el ejemplo anterior, tomamos la cadena "Player1:" y la unimos a la
variable name para crear la etiqueta de texto completa.

11
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

Y ejecuta código en respuesta a ciertos eventos que ocurren en una página web. Usamos
un evento en nuestro ejemplo anterior para detectar cuándo se hace clic en el botón y
luego ejecutar el código que actualiza la etiqueta de text o.

¡Y mucho más!

Sin embargo, lo que aún es más emocionante es la funcionalidad construida sobre el


lenguaje JavaScript de lado del cliente. Las denominadas interfaces de programación de
aplicaciones (API) te proporcionan superpoderes adicionales para utilizar en tu código
JavaScript.

Las API son conjuntos de bloques de construcción de código listos para usar que permiten
a un desarrollador implementar programas que de otro modo serían difíciles o imposibles
de implementar. Hacen lo mismo para la programación que los kits de muebles
prefabricados para la construcción de viviendas es mucho más fácil tomar paneles pre
cortados y atornillarlos para hacer una estantería que elaborar el diseño tú mismo, que ir
y encontrar la madera correcta, cortar todos los paneles del tamaño y la forma correctos,
buscar los tornillos del tamaño correcto y luego júntalos para hacer una estantería.

Generalmente se dividen en dos categorías.

12
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

Las APIs del navegador están integradas en tu navegador web y pueden exponer datos
del entorno informático circundante o realizar tareas complejas y útiles. Por ejemplo:

La API del DOM (Document Object Model)

Te permite manipular HTML y CSS, crear, eliminar y cambiar el HTML, aplicar


dinámicamente nuevos estilos a tu página, etc. Cada vez que ves aparecer una ventana
emergente en una página, o se muestra algún nuevo contenido (como vimos anteriormente
en nuestra sencilla demostración), por ejemplo, ese es el DOM en acción.

La API de Geolocalización recupera información geográfica.

Así es como Google Maps puede encontrar tu ubicación y trazarla en un mapa.

Las APIs Canvas y WebGL te permiten crear gráficos animados en 2D y 3D. Las
personas están haciendo cosas increíbles con estas tecnologías web
consulta Experimentos de Chrome y webglsamples.

APIs de audio y video como HTMLMediaElement y WebRTC te permiten hacer cosas


realmente interesantes con multimedia, como reproducir audio y video directamente en
una página web, o tomar video de tu cámara web y mostrarlo en la computadora de otra
persona (prueba nuestra sencilla demostración instantánea para hacerte una idea).

Seguridad del navegador


Cada pestaña del navegador tiene su propio depósito separado para ejecutar código (estos
depósitos se denominan "entornos de ejecución" en términos técnicos) esto significa que,
en la mayoría de los casos, el código de cada pestaña se ejecuta de forma completamente
independiente y el código de una pestaña no puede afectar el código en otra pestaña, o en
otro sitio web. Esta es una buena medida de seguridad si este no fuera el caso, los piratas
podrían comenzar a escribir código para robar información de otros sitios web y otras
cosas muy malas.

13
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

Orden de ejecución de JavaScript


Cuando el navegador encuentra un bloque de JavaScript, generalmente lo ejecuta en
orden, de arriba a abajo. Esto significa que debes tener cuidado con el orden en el que
colocas las cosas. Por ejemplo, volvamos al bloque de JavaScript que vimos en nuestro
primer ejemplo:

Aquí seleccionamos un párrafo de texto, luego adjuntamos un detector de eventos de


modo que cuando se hace clic en el párrafo, el bloque de código updateName() se ejecuta.
El bloque de código updateName () (estos tipos de bloques de código reutilizables se
denominan "funciones") pide al usuario un nuevo nombre y luego inserta ese nombre en
el párrafo para actualizar la pantalla.

Si cambiaras el orden de las dos primeras líneas de código, ya no funcionaría en su lugar,


obtendrías un error en la consola del desarrollador del navegador TypeError: para is
undefined. Esto significa que el objeto para aún no existe, por lo que no podemos
agregarle un detector de eventos.

Código interpretado versus compilado


Es posible que escuches los términos interpretados y compilados en el contexto de la
programación. En los lenguajes interpretados, el código se ejecuta de arriba a abajo y el
resultado de ejecutar el código se devuelve inmediatamente. No tienes que transformar el
código en una forma diferente antes de que el navegador lo ejecute. El código se recibe
en su forma de texto amigable para el programador y se procesa directamente desde allí.

14
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

Los lenguajes compilados, por otro lado, se transforman (compilan) a código máquina
antes de que sean ejecutados por la computadora. Por ejemplo, C/C++ se compila a código
máquina que luego ejecuta la computadora. El programa se ejecuta desde un formato
binario, que se generó a partir del código fuente del programa original.

JavaScript es un lenguaje de programación interpretado ligero. El navegador web recibe


el código JavaScript en su forma de texto original y ejecuta el script a partir de ahí. Desde
un punto de vista técnico, la mayoría de los intérpretes de JavaScript modernos utilizan
una técnica llamada compilación en tiempo real para mejorar el rendimiento; el código
fuente de JavaScript se compila en un formato binario más rápido mientras se usa el script,
de modo que se pueda ejecutar lo más rápido posible. Sin embargo, JavaScript todavía se
considera un lenguaje interpretado, ya que la compilación se maneja en el entorno de
ejecución, en lugar de antes.

Código dinámico versus estático


La palabra dinámico se usa para describir tanto a JavaScript de lado del cliente como a
los lenguajes de lado del servidor se refiere a la capacidad de actualizar la visualización
de una página web/aplicación para mostrar diferentes cosas en diferentes circunstancias,
generando contenido nuevo según sea necesario. El código de lado del servidor genera
dinámicamente nuevo contenido en el servidor, p. ej. extraer datos de una base de datos,
mientras que JavaScript de lado del cliente genera dinámicamente nuevo contenido dentro
del navegador del cliente, p. ej. creando una nueva tabla HTML, llenándola con los datos
solicitados al servidor y luego mostrando la tabla en una página web que se muestra al
usuario. El significado es ligeramente diferente en los dos contextos, pero relacionado, y
ambos enfoques (de lado del servidor y de lado del cliente) generalmente funcionan
juntos.

Una página web sin contenido que se actualiza dinámicamente se


denomina estática simplemente muestra el mismo contenido todo el tiempo.

¿Cómo agregas JavaScript a tu página?


JavaScript se aplica a tu página HTML de manera similar a CSS. Mientras que CSS usa
elementos <link> para aplicar hojas de estilo externas y elementos <style> para aplicar

15
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

hojas de estilo internas a HTML, JavaScript solo necesita un amigo en el mundo de


HTML: el elemento {htmlelement("script")}}. Aprendamos cómo funciona esto.

JavaScript interno
En primer lugar, haz una copia local de nuestro archivo de ejemplo apply-javascript.html.
Guárdalo en un directorio en algún lugar accesible.

Abre el archivo en tu navegador web y en tu editor de texto. Verás que el HTML crea una
página web simple que contiene un botón en el que se puede hacer clic.

A continuación, ve a tu editor de texto y agrega lo siguiente en tu head, justo antes de tu


etiqueta de cierre </head>:

Ahora agregaremos algo de JavaScript dentro de nuestro elemento <script> para que la
página haga algo más interesante agrega el siguiente código justo debajo de la línea "//
El código JavaScript va aquí":

16
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

Guarda tu archivo y actualiza el navegador ahora deberías ver que cuando haces clic en
el botón, se genera un nuevo párrafo y se coloca debajo.

JavaScript externo
Esto funciona muy bien, pero ¿y si quisiéramos poner nuestro JavaScript en un archivo
externo? Exploremos esto ahora.

Primero, crea un nuevo archivo en el mismo directorio que tu archivo HTML del ejemplo.
Como nombre ponle script.js; asegúrate de que el nombre tenga la extensión .js, ya que
así es como se reconoce como JavaScript.

Reemplaza tu elemento <script> actual con lo siguiente:

Dentro de script.js, agrega el siguiente script:

17
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

Guarda y actualiza tu navegador, ¡y deberías ver lo mismo! Funciona igual, pero ahora
tenemos nuestro JavaScript en un archivo externo. Por lo general, esto es bueno en
términos de organización de tu código y para hacerlo reutilizable en varios archivos
HTML. Además, el HTML es más fácil de leer sin grandes trozos de script en él.

Controladores de JavaScript en línea


Ten en cuenta que a veces te encontrarás con fragmentos de código JavaScript real dentro
de HTML. Podría verse algo similar a esto:

18
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

Funciones Estándar
Además de las funciones que podemos crear nosotros mismos, también tenemos acceso
a funciones predefinidas por JavaScript. Estas funciones realizan procesos que
simplifican tareas complejas. Las siguientes son las que más se usan. isNaN(valor) Esta
función devuelve true (verdadero) si el valor entre paréntesis no es un número.
parseInt(valor) Esta función convierte una cadena de caracteres con un número en un
número entero que podemos procesar en operaciones aritméticas. parseFloat(valor) Esta
función convierte una cadena de caracteres con un número en un número decimal que
podemos procesar en operaciones aritméticas. encodeURIComponent(valor) Esta
función codifica una cadena de caracteres. Se utiliza para codificar los caracteres de un
texto que puede crear problemas cuando se inserta en una URL. Decode URI
Component(valor) Esta función decodifica una cadena de caracteres. Las funciones
estándar son funciones globales que podemos llamar desde cualquier parte del código.
var mivalor = "Hola"; if (isNaN(mivalor)) { alert(mivalor + " no es un número"); } else
{ alert(mivalor + " es un número"); }

¿Qué es una variable? En pocas palabras, una variable es un espacio de


almacenamiento en un ordenador para grabar cualquier tipo de datos como una cadena
de caracteres, un valor numérico o estructuras un poco más específicas.

 Usamos la palabra clave var para declarar una variable, y usamos = para asignar
un valor a la variable.
 Las variables se escriben de forma dinámica, lo que significa que no es
necesario especificar el tipo de contenido que la variable contendrá.
 Con diferentes operadores, podemos hacer las transacciones entre las variables.
- El operador + concatena cadenas de caracteres, es decir, de inicio a fin.

VENTAJAS
 Un código JavaScript bien presentado es más legible y más fácil de editar
 JavaScript es un lenguaje muy sencillo de dominar, ya que su curva de
aprendizaje es baja.

19
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

 JavaScript es un lenguaje estándar en la industria web, por tanto, se puede


integrar con otras tecnologías.
 Ejecuta en distintos sistemas operativos, como Mac, Linux y Windows.

DESVENTAJAS
 Como es un programa que se ejecuta en el lado del cliente, sus códigos pueden
ser leídos por otros usuarios.
 Para poder diseñar un sitio web completo se debe usar con otros lenguajes de
programación.

SUJERENCIAS
 JavaScript es un lenguaje de programación interpretado, es decir, que necesita
un intérprete para ser ejecutado.
 Las instrucciones deben estar separadas por un punto y coma.
 Es posible incluir comentarios con los caracteres / /, / * y / *.
 Es posible incluir un archivo JavaScript con el atributo src del elemento
 Conserva la sintaxis y estructura de tu código limpia y ordenada.
 Utiliza inteligentemente los nombres de variables y funciones.
 Comenta el código.
 Diferencia las variables dependiendo de su importancia.
 Separa el texto del código.
 Documenta el código.

CONCLUCIÓN
Hasta aquí hemos conocido la sintaxis JavaScript en profundidad. Aunque aún nos
quedan cosas importantes de sintaxis, la visión que has podido tener del lenguaje será
suficiente para enfrentarte a los problemas más fundamentales. En adelante
presentaremos otros reportajes para aprender a utilizar los recursos con los que
contamos a la hora de hacer efectos en páginas web. Veremos la jerarquía de objetos del
navegador, cómo construir nuestros propios objetos, las funciones predefinidas de

20
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

JavaScript, características del HTML Dinámico, trabajo con formularios y otras cosas
importantes para dominar todas las posibilidades del lenguaje.

BIBLIOGRAFIA

 Especificación oficial del lenguaje JavaScript: ECMAScript Language


Specification.

 Dynamic Drive (http://www.dynamicdrive.com/) : sitio web en inglés con


cientos de scripts gratuitos de JavaScript con las utilidades más comunes
(calendarios, menús, formularios, animaciones de texto, enlaces, galerías de
imágenes, etc.

 Gamarod JavaScript (http://www.gamarod.com.ar/): sitio web en español


que contiene decenas de utilidades JavaScript gratuitas listas para usar.

 Professional JavaScript for Web Developers


(http://www.wrox.com/WileyCDA/ WroxTitle/productCd0764579088.html)

 Nicholas C. Zakas (ISBN: 978-0-7645-7908-0). Programación JavaScript

 David Flanagan (ISBN 13: 9780596101992). Referencia completa de


JavaScript.

21
UNIVERSIDAD NACIONAL DE CAJAMARCA

Facultad de Educación

Escuela Académico Profesional de Educación

 Desarrollo de Aplicaciones web. Rafael Menéndez-Barzanallana Asensio.


UMU

22

También podría gustarte