JS Strings, Validation + Functions, RegExp, Modal, Lists
JS Strings, Validation + Functions, RegExp, Modal, Lists
+ Functions, RegExp,
Web Page
YEAR 12
JS Strings
❖A string is a sequence of letters, numbers, special characters and arithmetic
values or combination of all.
❖Strings can be created by enclosing the string literal (i.e. string characters)
either within single quotes ( ‘ ) or double quotes ( “ ).
Method of Strings
❖length
❖substring
❖substr
❖replace
❖toUpperCase
❖toLowerCase
❖split
❖charAt
Sample Code
Note: Kindly check zip folder on teams the code files as well as the following link
JavaScript.zip
Form Validation
The form validation process typically consists of two parts:
❖The required fields validation which is performed to make sure that all the
mandatory fields are filled in,
❖ And the data format validation which is performed to ensure that the type and
format of the data entered in the form is valid.
Sample Code
Note: Kindly check zip folder on teams the code files as well as the following link
JavaScript.zip
Regular Expression
Regular Expression(regexp) is a sequences of characters that define a search pattern.
Given below is meaning of elements used in Regular Expression
Expression 1
Expression 2 & 3
if-statements for Validation using
RegExp (Syntax)
if-statements for Validation using
RegExp
if-statements for Validation using
RegExp
Validation for Drop list & Radio
buttons
Creation of checkbox and radio button recall the HTML section.
Sample Code
Kindly check the code of validation of form using regular expression in sample
code zip folder.
Event & Event Handling
Sample Code
Kindly check the code of validation of form using regular expression in sample
code zip folder.
Slideshow
❖includes multiple images
❖includes a next and back button
❖displays the first slide when the page loads
❖moves to the next image when the next button is clicked
❖moves to the previous image when the back button is clicked
❖moves to the first image when the next button has been clicked and the last image
has been viewed
❖moves to the last image when the back button has been clicked and the first image
has been viewed.
Step 1 + 2
Step 1: Create a folder with no. of images for slideshow.
Step2: Create the code for body where to display and declare images and commonly
known as Image container.
Step 3 + 4
Step 3: Write html code for navigation and Write JS script for calling all images from its
container to the function.
Step 4: Apply your desired CSS style and designing to the web page for final output.
Modal Box & Image
Sample Code
Kindly check the code of validation of form using regular expression in sample
code zip folder.
List (Filter & Sort) + Tabbed
Sample Code
Kindly check the code of validation of form using regular expression in sample
code zip folder.
Class Practice
Practice your CSS , HTML and JS codes for creating this sample Web page.