Javascript Technologies
1. Javascript
2. Require JS
3. Knockout JS
4. OJET (Oracle Javascript Extension Toolkit)
5. [Link]
Software requirement
1. VS Code
2. [Link]
Javascript Fundamentals: let, const, arrow functions, callback functions,
event handling, template strings, promises, async/await, fetch, validations
Things to cover
- Template Strings
- Callbacks / Arrow functions
- Event Handling
- Promises
- Async/Await
- Validations
- Fetch
Javascript is mainly used to add effects to the front end applications, it can
be used at the backend also to access file-systems, DB, or OS resources.
Front end JS technologies
- Typescript
- [Link]
- [Link]
- Angular Framework
- [Link]
- OJET
Backend Javascript Technologies
- [Link]: It is a runtime environment for Javascript to executed at the
backend without browser
Lab1: Understand event handling
[Link]
Output
List of ways to access an element
1. [Link](“id”)
2. [Link](“tag”)
3. [Link](“class”)
4. [Link](“selector”); #id, .class, tag
5. [Link]: To identify which element generated the event
[Link] helps you to identify on which element the event is generated
Require JS
It is a Javascript & module loader, used to increase the speed of your
application
After you click on download select [Link]
You need to click on minified button
You get a javascript code that you need to copy to one js file
In VS Code you create [Link]
Create a [Link]
Create an [Link]
Output:
Note: Here the same script is loading more than once, if we use [Link]
this can be avoided, so that in an application when there are lot of Javascript
files you are loading, it should be loaded only once in the browser to increase
the speed of the execution.
How to use require js
1. Add the script of [Link]
2. All the scripts you load in a require function instead of using script tag
Output:
Notice the require loading the javascript file however not more-than once,
even if you repeat
List of technologies that use require
1. [Link]
2. [Link]
3. OJET
4. React
5. Angular Framework
[Link]
It is a Javascript runtime environment used to run the javascript code at the
backend, so that you can do various operations like
1. creating servers
2. interacting with the OS
3. interacting with the File Systems
4. Networking
5. Interacting with the DB
Node provides REPL (Read Eval Print Loop) to quickly write & run JS code
[Link]: It is heart of [Link], it will have all the dependencies of the
project, project meta-data, scripts to run the project
We must use a command to create [Link]
npm init -fy
[Link] provides 3 types of libraries / modules
1. Core Module
2. Local Module
3. Third Party Module
How to download the third party modules
npm install express cors // downloads express & cors libraries
Is require inbuilt in [Link] ? : Yes
let fs = require(‘fs’);
let os = require(‘os’);
Note: [Link]() is not present in JS, it is present in Java, in Javascript
you must use setTimeout for delays.
OS Modules
Using modern style import instead of require
ES 5 style:
let os = require(“os”);
ES 6 style:
import os from ‘os’;
update [Link]
Now on you can use import instead of require
Let us use a third part module
readline-sync: It is used to take input from the keyboard in the terminal
Installing:
npm install readline-sync // we must download this inside the project folder
that has [Link]
Try different functions like: questionNewPassword(..), questionEmail(…)
fs module: It provides methods to read & write files
- readFileSync(“filename”)
- writeFileSync(“filename”, content) or writeFileSync(“filename”,
content, {flag:”a+”})
appending to the old content
Reading the file content & converting the buffer to string
How to import Local module & write an object to a file in the form JSON
We can’t write javascript object to the file, we must convert the object to text
i.e., JSON string
[Link]
Note: The export can be written in 2 ways, the one which is written is a
named export that can be imported with the same name i.e. import
{ Employee } from ‘[Link]’; there’s another type of export called
default export, that can be imported in any name, its syntax doesn’t include
{ } i.e, import E from ‘[Link]’;
Create database table employee
mysql2: lt is a library used to interact with mysql database
Output:
Summary:
Require JS
[Link] - REPL, Types of modules, fs, readline-sync, mysql2
Day 3 Agenda
1. Creating webservices using Node
2. [Link]
3. OJET
What are webservices
These are online services which can share the data across heterogenous
applications
ex: IRCTC can share data to Phone pay or Google pay, these UPI Apps can
share data to various banking services
There are 2 types of webservices
1. SOAP webservice: exchanges the data in XML format
2. RESTful webservice: exchanges the data in XML/JSON/CSV/TEXT
formats
SOAP: Simple Object Access Protocol
ReST: Representational State Transfer
RESTful webservice uses HTTP protocol to share the data, it uses HTTP
methods to let you create webservice, these are methods of HTTP
1. get: Read/Fetch
2. post: Storing/Creating new resource
3. put: Update the existing resource
4. delete: Deleting the resource
Different technologies use different libraries and framework to develop
RESTful webservice
1. Java: Spring Boot / JAX-RS - Jersey
2. [Link]: [Link]
3. Python: Django & Flask
4. C#: [Link]
How to develop webservices using [Link]
1. Install express
2. If you are connecting to the backend install mysql2
3. If you want your webservice to be accessed by cross-origin clients,
install cors library
All these libraries can be installed at once
npm install mysql2 express cors
Steps to create webservice
Import the express & create its object
Import the cors and add this to the express
Create routes that can take HTTP requests
Start the server - express itself has inbuilt server
import express from ‘express’;
import cors form ‘cors’;
// creating express object
let app = express();
//adding cors to the express
[Link]( cors() ); // adds cors to the express
// creating HTTP routes
[Link](url, (request, response) => { … handles request & generate
response } );
[Link](url, (request, response) => { .. handles request & generate
response });
// start the server
[Link](8888, () => { .. callbackFn that executes once server starts … })
[Link]
[Link]
OJET: Oracle Javascript Extension Toolkit, it is built on top of [Link] to
create client side applications like UI’s for web & mobile
OJET UI’s you cannot create by remembering the code, because there are lot
of inbuilt tags & attributes, Oracle employees must use Oralce Cookbook for
OJET & OJET official website to understand OJET.
OJET uses MVVM architecture, which is used even by [Link]
OJET project can be created using javascript/typescript, but typescript has an
advantage of types & results are reliable
Software’s required
1. [Link]
2. NPM
Pre-requisites
- HTML
- CSS
- Javascript/Typescript
- Basics of [Link]
Hello world program on KO
Output:
Editing the data
To edit the data we must use knockout js observables, simple text data
variables cannot detect the changes done to the variables from the view
OJET extensively uses [Link] databinding
OJET gives you starter projects which will have inbuilt folder structures for
views, viewModels, ojet libraries and basic navigations and etc.
npm install -g @oracle/ojet-cli@16
Verifying the installation
How to create ojet project
ojet create project-name --tempalte=navdrawer --typescript
cd myapp
ojet serve: This runs the project & opens the application in the browser
Output:
OJET Cookbook
1. You will see all the ojet components with HTML(view) & corresponding
JS/TS (viewModel)
2. You must look for the cookbook output and use it in your application.
[[ ]] is read-only, one way data-binding
{{ }} is read & write: two way data-binding
Using Input Number
[Link]
[Link]
Output:
I18N(Internationalization): Ability to make software to adapt to different
county languages
L10N(Localization): For every country specific locale resource will be there
ex: fr-FR (French), us-en(English)
Output:
Objective:
Enhancements: You can navigate from one page to another page without
reloading the entire page (Single page application).
Things to try before creating the UI for the case-study
1. Try Form components like: input text, input number, input password,
input date, form layouts (activity-02)
2. Try Controls like: buttons, messages, progress (activity-03)
3. Try Collections like: table, list view, paging control (activity-04)
4. Try Framework like: RestDataProvider, (activity-04)
(or) you can create a single activity-all folder & upload html & TS files
After that try the below lessons provided by Oracle to understand how to
develop OJET application from scratch to accessing backend with REST calls
(activity-06)
[Link]
[Link]
Lastly complete your case-study
OJET application must interact with Backend service (spring boot & [Link])
1. Minimum OJET components (dashboard) of spring boot:
a. Registration
b. Login
c. Fetching any details & showing in the page
2. Minimum OJET component(customer) of [Link] :
a. Store
b. Retrieve
c. Find By Id
Event Handling
[Link]
[Link]
How to disable the button
Output:
How to access fake json data from OJET
There are many ways
1. Using traditional fetch API
2. Using OJET component RestDataProvider that can help you to create
dynamic content after calling the backend like tables, grids and etc
RestDataProvider: It is used to access the backend, it can directly map the
data coming from the backend to the table or any other collections.
RestDatProvider( { keyAtrributes, url, transform : { fetch: {request,
response } } } );
Two things you must learn
1. Making request with different HTTP methods and also if wants to
update, then update the dataprovider using mutate of
RestDataProvider
2. Core Router: For navigations
