0% found this document useful (0 votes)
14 views16 pages

JavaScript Vocational Training Guide

This document presents a learning guide to develop the skill of relating tables built to present information requested in a design. The guide includes activities to familiarize oneself with basic JavaScript concepts, develop a conceptual map, and complete practical exercises involving variables, functions, and data validation using JavaScript. The goal is for students to learn to implement programs with JavaScript and develop the required data structure.

Translated by

ScribdTranslations
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
14 views16 pages

JavaScript Vocational Training Guide

This document presents a learning guide to develop the skill of relating tables built to present information requested in a design. The guide includes activities to familiarize oneself with basic JavaScript concepts, develop a conceptual map, and complete practical exercises involving variables, functions, and data validation using JavaScript. The goal is for students to learn to implement programs with JavaScript and develop the required data structure.

Translated by

ScribdTranslations
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

COMPREHENSIVE VOCATIONAL TRAINING MANAGEMENT

CURRICULAR DEVELOPMENT PROCEDURE


LEARNING GUIDE

1. IDENTIFICATION OF THE LEARNING GUIDE

Name of the Training Program:

Training Program Code: 228120

Nombre del Proyecto (si es formación Titulada): ADSI ANALISIS Y DESARROLLO DE SISTEMAS DE
INFORMATION

Project Phase (if it is a Certified Training): Analysis, planning, execution, and Evaluation

Actividad de Proyecto (si es formación Titulada): Desarrollar la estructura de datos y de vista de la


application of the module

Competition: DEVELOP THE SYSTEM THAT MEETS THE IT SOLUTION

Learning Outcomes Achieved: RELATE THE CONSTRUCTED TABLES TO PRESENT THE


INFORMATION REQUESTED IN THE DESIGN.

Duration of the Guide: 40

2. PRESENTATION

After acquiring basic knowledge in HTML, it is important to learn about JavaScript. JavaScript
allows for different programs to run on the Client Side, that is, in the same browser
Web, without the need to go to the Server. This allows for greater efficiency in some aspects and on
always avoid connecting to the server when it is not really necessary.

JavaScript allows Object-Oriented Programming, enables the use of DHTML along with CSS. There are
very diverse JavaScript libraries that are widely used such as JQUERY, PROTOTYPE, MOOTOOLS among others
others that allow reducing time in programming.

3. FORMULATION OF LEARNING ACTIVITIES

3.1 Initial Reflection Activities.

Reflect

JavaScript allows for improvements in user interfaces and dynamic web pages, compiling on the side of
client.

GFPI-F-019 V3
NATIONAL LEARNING SERVICE SENA
Curriculum Development Procedure
LEARNING GUIDE

Why JavaScript?

Response: Because it is a concept oriented to objects that is based on dynamic prototypes implemented
by a web browser allowing the user interface and the page.

Do we really need it?

Response: Yes, it is necessary because it is simple and is used for web page development and analysis.
the databases and is compatible with different devices.

What problems can we encounter in the use of JavaScript?

Response: the problem is that once web pages from the servers are added, they are downloaded and
ejecutan en el navegador permitiendo códigos maliciosos esto genera una vulnerabilidad en la seguridad
of the operating system.

3.2 Contextualization activities and identification of necessary knowledge for the


learning.)

Learning Activity No. 1 (Group Development)

Below, you will find an activity where you can establish and identify the prior concepts for
the development and implementation of Programs with JavaScript. It is suggested to investigate and interpret the
following topics:

What is JavaScript?

Response: JavaScript is a programming language that allows for the insertion of code for a function of a
web page in HTML and does not create standalone programs.

Is JavaScript the same as Java? What differences exist?

No, because Java is a programming language that is fundamentally for creating applications.
for the internet that allows any operation to be performed on the computer and JavaScript performs activities
complex such as showing updates of a content example controlling the files.

What is the main difference between JavaScript and PHP?

Response: PHP is a server-side language that processes the source code and JavaScript is a language
on the browser side responding to the HTML.

How are comments made in JavaScript?

Response: Double forward slash at the beginning of the line or in front of the code when commenting.
NATIONAL LEARNING SERVICE SENA
Curriculum Development Procedure
LEARNING GUIDE

¿Cómo se definen Variables en JavaScript?

Response: It is defined in the same way using the word VAR which assigns a value to store.

What is the file extension for JavaScript Functions?

Response: the format for the files is JSWebsite which corresponds to a text file that is used
with the JavaScript programming language when executing a type of webpage the code is included
dicha función al archivoJS.

How are errors detected in JavaScript?

Response: since JavaScript is an interpreted programming language, most of them cannot be detected.
errors in the code until the scripts are executed in the browsers when an error occurs the
browsers provide useful information to pinpoint the exact location of the error for resolution
The process of debugging a script is called debugging the script, which means eliminating errors from an application.

What does JSON mean?

Rspta: means JavaScript Object Notation which means JavaScript object notation is a format
light in data exchanges. It is a subset of the programming language is a format that is
totally independent of the language.

Consult what the following reserved words in JavaScript are for:

"[Link]()": is used to break long strings of text.

"ParseInt()": It is the one that finds a character that is not a numeral of the specified database.

Prompt()”: Displays a modal window with a text message for an input field for the
visitor and the ACCEPT/CANCEL buttons.

"Alert()": It is a reserved word that displays a message and pauses the execution of the script until
that the user presses ok.

"Var": is a reserved word to define a variable.

“//”: Es para agregar un comentario.

==: Equivalence.

a++: It is the term given to the variable in the operator for incrementing or decrementing the value.
for the operator and allow them to increase or decrease this.
NATIONAL LEARNING SERVICE SENA
Curricular Development Procedure
LEARNING GUIDE

3.3. Activities for Knowledge Appropriation (Conceptualization and Theorization).

Learning Activity No. 2 (Individual Development)

Based on the themes of contextualization and identification of knowledge about


Javascript, develop a conceptual map, this will represent the evidence of knowledge, it will
I suggest using the IHMC Cmap Tools, which can be downloaded for free from the
next Official URL. Alternatively, other tools such as auto-shapes can be used in the
MS Office package or MS Visio among many others

3.3 Knowledge transfer activities.

Learning Activity No. 3 (Group Development)

1. - Do a free exercise where you use var, switch, while, if, alert.
NATIONAL LEARNING SERVICE SENA
Curricular Development Procedure
LEARNING GUIDE

2. - Make an exercise where two variables are taken, summed through a function and then
through another function the result is displayed with an alert.
NATIONAL LEARNING SERVICE SENA
Curricular Development Procedure
LEARNING GUIDE

3.- Create a program in Javascript that captures the 4 data (a, b, c, d) using the prompt function.
and I carried out the following operations:

Z1=a+b

Z2=a-d

Z3=d/b

Z4=c*d

Then print the results using the alert option.


NATIONAL LEARNING SERVICE SENA
Curricular Development Procedure
LEARNING GUIDE

4. Capture data a and b with textbox and display the result of their sum in a Textbox

5. Create a program in JavaScript that allows comparing the values captured with a textbox named
ID and phone with the data stored in the variables a="Alexander", b="1014", c="2327405".
validate the data to see if they are equal or not, and show an alert with the response. (Take as
Reference exercise 72 chapter 2 of the example exercises.)
NATIONAL LEARNING SERVICE SENA
Curriculum Development Procedure
LEARNING GUIDE

6. Create a Web Calculator in Javascript that allows addition, multiplication, subtraction, and division.
NATIONAL LEARNING SERVICE SENA
Curricular Development Procedure
LEARNING GUIDE
NATIONAL LEARNING SERVICE SENA
Curricular Development Procedure
LEARNING GUIDE

7. Create a Website that allows capturing data such as name, ID number, phone, address, email
electronic and then validated to verify:

a. ID and phone number can only contain numbers.

b. Email must have an at sign


NATIONAL LEARNING SERVICE SENA
Curriculum Development Procedure
LEARNING GUIDE
SERVICIO NACIONAL DE APRENDIZAJE SENA
Curricular Development Procedure
LEARNING GUIDE

4. EVALUATION ACTIVITIES

Take as reference the evaluation techniques and instruments mentioned in the Curriculum Development guide.

Learning Evidence Evaluation Criteria Techniques and Instruments of


Evaluation

Evidence of Knowledge: Clarity in the 3.2 Activity of


presentation of the Contextualization: 30 Points
Know the syntax of Javascript and concepts
its differences with other languages. related to 3.3 Appropriation Activities
Reports of Knowledge 20 Points
Performance Evidence:
- Utilizar los
3.4 Activities of
Use programming techniques procedures Transfer of
to be efficient and detect established in the Knowledge 50 Points
Work Manuals
errors in the process of
Punctuality in the
coding with Javascript
submission of works
Product Evidence:
BUILD THE INTERFACE OF
APPLICATION, FOLLOWING THE
NATIONAL LEARNING SERVICE SENA
Curricular Development Procedure
Learning Guide

Programs in Javascript ESTABLISHED PARAMETERS


IN THE

DESIGN THAT COMPLIES WITH THE


USER NEEDS
FINAL.

USE THE TOOLS OF


DEVELOPMENT, FOR THE
CODING OF THE
MODULES OF

SYSTEM, APPLYING THE


PROPER FUNCTIONS OF
PROGRAMMING LANGUAGE

- SELECTED, FROM
AGREEMENT WITH THE
NEEDS OF
SYSTEM OF
INFORMATION

5. GLOSARIO DE TERMINOS

Java: Programming Language

jQuery: A very widely used JavaScript library

Prototype: Very commonly used JavaScript library

Mootools: A very used Javascript library

DHTML: Dynamic HTML, allows for more interactive pages

CSS: Cascading Style Sheets

If: Condition Clause

While: Cycle Clause


NATIONAL LEARNING SERVICE SENA
Curriculum Development Procedure
LEARNING GUIDE

Text Box to write in a program

Js: Files with the .js extension containing Javascript function files

[Link](); Allows printing on the screen texts or the value of variables.

"ParseInt()": Converts a variable of type String to a Numeric variable.

Prompt(); Captures values through a dialog box.

"Alert()"; Allows displaying a dialog box with a message.

"Var"; All variables are declared using the command var.

“//”: Permite crear un comentario en Javascript.

"=="; It is a logical operator that compares values and returns false or true depending on the condition.

"a++"; Allows incrementing the variable by 1 each time the statement is executed.

6. BIBLIOGRAPHIC REFERENCES

Professional JavaScript for Web Developers, Nicholas C. Zakas (ISBN: 978-0-7645-7908-0). A


despite being an old book, it is still a good reference for learning JavaScript
for web application developers

JavaScript: The Definitive Guide (Fifth Edition), David Flanagan (ISBN-13: 9780596101992).
Complete JavaScript reference in more than 1,000 pages that explains in detail any
aspect of this programming language.

JQUERY
[Link]

Steps to Execute Jquery


[Link]

Manual Javascript
[Link]

7. DOCUMENT CONTROL

Name Cargo Dependency Date


NATIONAL LEARNING SERVICE SENA
Curricular Development Procedure
LEARNING GUIDE

Author(s) ERNESTO CORTES INSTRUCTOR CEET 28/8/2018

8. CHANGE CONTROL (fill out only if making adjustments to the guide)

Name Cargo Dependency Fecha Razón del Cambio

Autor (es)
COMPREHENSIVE PROFESSIONAL TRAINING MANAGEMENT
CURRICULUM DEVELOPMENT PROCEDURE
LEARNING GUIDE

GFPI-F-019 V3

You might also like