Movatterモバイル変換

[0]ホーム
URL:

WebStackAcademy, profile picture
Uploaded byWebStackAcademy
2,806 views

JavaScript - Chapter 10 - Strings and Arrays

The document provides an extensive overview of strings and arrays in JavaScript, detailing their characteristics, methods, and usage. It covers string properties such as immutability and common methods like length, concat, trim, and various other string manipulation techniques. Additionally, it explains arrays as collections of elements with methods for accessing, modifying, and performing operations on them, alongside practical exercises for applying these concepts.

Embed presentation

Downloaded 132 times
www.webstackacademy.com ‹#›Strings and ArrayJavaScript
www.webstackacademy.com ‹#› Strings Strings access methods Array Array access methods Multi dimensional arraysTable of Content
www.webstackacademy.com ‹#›www.webstackacademy.com ‹#›Strings(Introduction to Strings)
www.webstackacademy.com ‹#›What is String?• String is a sequence of Unicode characters.• Unicode characters are encoding standard that has widespread acceptance.• Some of the most commonly used character encodings areEncoding DescriptionUTF - 8 Widely used in email systems and on the internet.UTF - 16 Used in windows, Java and by JavaScript, and often for plain textand for word-processing data files on Windows.UTF - 32 The mainly used in internal APIs where the data is single codepoints or glyphs, rather than strings of characters.
www.webstackacademy.com ‹#›Strings Syntax<script>var str = “ ”;var str1 = “Hello World”;var str2 = new String(“Hi”);</script>
www.webstackacademy.com ‹#›Strings - ImmutableExample:<script>var str = “Hello World”;str[0] = “h”;console.log(str); //will be “Hello World”</script>• In JavaScript strings are immutable or unchangeable.• An immutable object is an object whose state cannot be modified after it is created.
www.webstackacademy.com ‹#›www.webstackacademy.com ‹#›String Methods(Pre-defined methods to perform various operations in strings)
www.webstackacademy.com ‹#›Strings MethodsMethod Descriptionlength Returns the length of the stringconcat() Joins the string with one or more stringstrim() Removes the white spaces from beginning and end of the stringreplace() Replaces old string with the new stringsubstring() Returns the part of stringsubstr() Returns the part of string
www.webstackacademy.com ‹#›Strings MethodsMethod DescriptionindexOf() Returns the position of specified wordlastIndexOf() Returns the last occurrence of specified wordslice() Returns the part of the stringsplit() Converts string into arrayincludes() Returns true if string includes the specified word.
www.webstackacademy.com ‹#›The length() Method The length method returns the size of the string.Example :var str = “Hello World”;var len = str.length;document.write(“Length of the string ” + len);Syntax :var length = string.length;
www.webstackacademy.com ‹#›The concat() Method The concat() method will join the string with one or more strings.Syntax :var str1 = str.concat(“hello”,” “,”World”);orvar str2 = str.concat(str1,str2,str3…..strN);
www.webstackacademy.com ‹#›The concat() MethodExample :var str1 = “Hello World”;var str2 = “Welcome”;var concatString = str1.concat(“ ”, str2, ” “, “to WSA”);document.write(“Concatenation of string” + concatString);
www.webstackacademy.com ‹#›The trim() Method The trim() method will remove the spaces from beginning and end of thestrings.Syntax :var result = string.trim();Example :var str1 = “ Hello World ”;var trimmedString = str1.trim();console.log (“After trim” +trimmedString);
www.webstackacademy.com ‹#›The trimStart() or trimLeft() Method The trimStart() or trimLeft() methods will remove the spaces from thebeginning of the strings.Syntax :var result = string.trimLeft();Orvar result = string.trimStart();
www.webstackacademy.com ‹#›The trimStart() or trimLeft() MethodExample :var str1 = “ Hello World ”;var trimmedStart = str1.trimStart();var trimmedLeft = str1.trimLeft();console.log(“After trim” +trimmedStart);console.log(“<br>After trim” +trimmedLeft);
www.webstackacademy.com ‹#›The trimEnd() or trimRight() Method The trimEnd() or trimRight() methods will remove the spaces from thebeginning of the strings.Syntax :var result = string.trimEnd();Orvar result = string.trimRight();
www.webstackacademy.com ‹#›The trimEnd() or trimRight() MethodExample :var str1 = “ Hello World ”;var trimmedEnd = str1.trimEnd();var trimmedRight = str1.trimRight();console.log(“After trim” +trimmedEnd);console.log(“<br>After trim” +trimmedRight);
www.webstackacademy.com ‹#›The replace() Method The replace() method will replace the specified string into new string.Syntax :var replacedStr = str.replace(‘string to replace’,’new string’);Orvar replacedStr = str.replace(RegularExpression, ’new string’);
www.webstackacademy.com ‹#›The replace() MethodExample 1:var str1 =“Welcome to JS World”;var repStr = str1.replace(‘JS’,’JavaScript’);console.log(“Replaced String” +repStr);Example 2:var str =“A blue bottle with a blur liquid is on a blue table Blue”;var replacedStr = str.replace(/blue/g, ”green”);document.write(“After replace” +replacedStr);
www.webstackacademy.com ‹#›The substring() Method The substring() method will return the part of the strings.Syntax :var subStr = str.substring(startIndex, EndIndex);Example :var str1 =“Javascript World”;var subStr = str1.substring(0,10);document.write(“Subtring is: ” +subStr);
www.webstackacademy.com ‹#›The substr() Method The substr() method will return the part of the strings.Syntax :var subStr = str.substr(startIndex, numberOfCharacters);Example :var str1 =“Javascript World”;var subStr = str1.substr(0,10);document.write(“Subtring is: ” +subStr);
www.webstackacademy.com ‹#›The indexOf() MethodThe indexOf() method will return the position of first occurrence of the specified stringSyntax :var index = str.indexOf(“string”);Example :var str1 =“Javascript World”;var indexStr = str1.indexOf(“World”);document.write(“Index of world” +indexStr);
www.webstackacademy.com ‹#›The lastIndexOf() MethodThe lastIndexOf() method will return the position of last occurrence of the specified stringSyntax :var lastIndex = str.lastIndexOf(“string”);Example :var str1 =“Javascript World! Welcome to World”;var lastIndex = str1.lastIndexOf(“World”);document.write(“Last Index of world” +lastIndex);
www.webstackacademy.com ‹#›ExerciseWrite a JavaScript program to extract the user name and domain name.• Accept email address from the user, extract the user name and the domain name, for• example,Input: abc.xyz@gmail.comOutput: username: abc.xyzdomain : gmail.com
www.webstackacademy.com ‹#›The slice() Method The slice() method will return the part of the strings.Syntax :var slicedStr = str.slice(startIndex, EndIndex);Example :var str =“Javascript world”;var slicedStr = str.slice(1,5);document.write(“Sliced String” +slicedStr);
www.webstackacademy.com ‹#›The split() Method The split() method will convert string into array of strings.Syntax :var splitStr = str.split(separator,limit);Example :var str =“Javascript world. Welcome to WSA”;var splitStr = str.split(“ “)document.write(“Array of string” +splitStr);var splitLimit = str.split(“ “,2);document.write(“Array of string” +splitLimit);
www.webstackacademy.com ‹#›The includes() MethodThe includes() method will true if string includes the specified word else returns the false.Syntax :var includesStr = str.includes(searchString, position);Example :var str = 'To be, or not to be, that is the question.';console.log(str.includes('To be'));console.log(str.includes('question',0));console.log(str.includes('nonexistent'));
www.webstackacademy.com ‹#›Exercisewww.webstackacademy.com ‹#›Convert the given string into title case with following rules:• Capitalize the first letter of each word. Capitalize nouns, pronouns, adjectives, verbs,adverbs, and subordinate conjunctions.• Lowercase articles (a, an, the), coordinating conjunctions, and prepositions (under,between, over, on, at).• Lowercase the 'to' in an infinitive (I want to play guitar).Examples:• How Are You Doing Today?• Our Office between Metro and Barton Centre• What Is the Need of This Expensive Phone?
www.webstackacademy.com ‹#›Exercisewww.webstackacademy.com ‹#›1. Count number of palindromes in a given string:2. Special Palindrome• In English we call a particular string as palindrome if it reads the same way from left andright (ex: Malayalam, mom etc..)• However there are some special kind of palindromes are there which will have:1. Upper case characters2. Special characters3. Spaces in-between.Examples:1. "Madam, I’m Adam“2. "A nut for a jar of tuna.“3. "Are we not pure? “No, sir!” Panama’s moody Noriega brags. It is garbage!”Irony dooms a man—a prisoner up to new era."
www.webstackacademy.com ‹#›www.webstackacademy.com ‹#›Arrays(Introduction to Arrays)
www.webstackacademy.com ‹#›What is an Array? Array is a collection of similar or different data types Each data in array is called an element Each elements has a numeric position, known as its index / indices, in the array The index numbers start from zero In JavaScript, Array is also an object. The typeof operator will return the same Array object has length property which returns the total number of elements
www.webstackacademy.com ‹#›Array(Syntax – Using [ ] )Syntax :// Creates initialized arrayvar array-name = [item1, item2, …];// Creates emptyvar array-name = [ ];
www.webstackacademy.com ‹#›Array(Syntax – Using constructor)Syntax :var array-name = new Array(item1, item2, item3);Orvar array-name = Array(item1, item2, item3);Orvar array-name = Array(array-length);
www.webstackacademy.com ‹#›Array - ExampleExample :var array = [10, 20, 30, 40, 50];Orvar array = new Array(10, 20, 30, 40, 50);Orvar array = Array(3);
www.webstackacademy.com ‹#›Array Access – Using loopfor ( let idx = 0; idx < 5; idx++ ) {document.write(“Element at index ” + idx + “ is ” + myArray[idx]);}for ( let idx in myArray ) {document.write(“Element at index ” + idx + “ is ” + myArray[idx]);}
www.webstackacademy.com ‹#›Array - HeterogeneousEach element in an array can be of different typesvar mixArray = [“Student”, 95, true];for(let idx = 0; idx < 3; idx++) {console.log (mixArray[idx]);}
www.webstackacademy.com ‹#›Exercise WAP to create an array with 10 integers and find out the following: Sum of all number Average Maximum value & Minimum value WAP to reverse an array elements.
www.webstackacademy.com ‹#›www.webstackacademy.com ‹#›Array Methods(Pre-defined methods to perform various operations in array)
www.webstackacademy.com ‹#›Array MethodsMethod Descriptionjoin() Concatenates all the elements of array into stringpop() Deletes last element of an arraypush() Appends new element in the last of arraysort() Sorts an array in alphabetical orderreverse() Reverses array elements order in the array
www.webstackacademy.com ‹#›Array MethodsMethod Descriptionshift() Removes first element from the array and shifts all other elementto a lower indexunshift() Unshift method adds elements to the beginning of an array andreturn new length of arrayslice() The array slice method returns part of an arraysplice() The array splice method can be used for adding and/or removingelements from an array
www.webstackacademy.com ‹#›Array MethodsMethod DescriptionFilter() Creates a new array with all elements that pass the testimplemented by the provided function.map() Creates a new array with the results of calling a provided functionon each element in the calling array.
www.webstackacademy.com ‹#›The join() Method The join() method converts all the elements of an array to strings andconcatenates them, returning the resulting string It behaves like toString(), but we can specify separatorExample :var fruits = ["Banana", "Orange","Apple", "Mango"];var str = fruits.join(" + ");document.write(str);
www.webstackacademy.com ‹#›The push() and pop() methodsStack operations – LIFOvar numStack = [10, 20, 30, 40, 50];numStack.pop(); // Pop an elementfor (let idx=0; idx <numStack.length; idx++) {document.write(numStack[idx] + "<br>");}numStack.push(100); // Push an elementfor (let idx=0; idx <numStack.length; idx++) {document.write(numStack[idx] + "<br>");}
www.webstackacademy.com ‹#›The shift() methodsExample:var array1 = [1, 2, 3];var firstElement = array1.shift();console.log(array1);// expected output: Array [2, 3]console.log(firstElement);// expected output: 1The shift() method removes the first element from an array and returnsthat removed element.Syntaxarray.shift();
www.webstackacademy.com ‹#›The unshift() methodsExample:var array1 = [1, 2, 3];array1.unshift(2);console.log(array1);array1.unshift(5,8);console.log(array1);The unshift() method adds one or more elements to the beginning of anarray and returns the new length of the array.Syntaxarray.unshift();
www.webstackacademy.com ‹#›The sort() MethodThe sort() method sorts an array in alphabetic ordervar numList = [‘banana’, ‘apple’, ‘mango’, ‘grapes’];numList.sort();for (let idx = 0; idx < numList.length; idx++){document.write(numList[idx] + "<br>");}
www.webstackacademy.com ‹#›The reverse() MethodThe reverse() method reverses the elements in an arrayvar numList = [55, 3, 16, 21];numList.reverse();for(let idx = 0; idx < numList.length; idx++){document.write(numList[idx] + "<br>");}
www.webstackacademy.com ‹#›Exercise WAP to represent two sets of integers. Find out union and intersection of those twosets (Ref – Set theory) Assume there are duplicates in the array Hint – Write a findElement() function to check if an element is present in an array or not• WAP to find Nth largest element in a given array• WAP to perform shift operations of a given element Shift Nth element by right by M positions Shift Nth element by left by M positions
www.webstackacademy.com ‹#›Thesplice() MethodSyntax:array.splice(startIndex, number of elements, elements toadd);www.webstackacademy.com ‹#›The splice() method will change the content of original array by removing oradding the element.
www.webstackacademy.com ‹#›Thesplice() Methodvar ar = [1, 4, 9, 10, 11, 16];ar.splice(1,3);// will remove the elementsconsole.log(ar);ar.splice(1,0,5);// will insert the element 5 at index 1console.log(ar);www.webstackacademy.com ‹#›
www.webstackacademy.com ‹#›TheforEach()Methodwww.webstackacademy.com ‹#›The map() method creates a new array with the results of calling a providedfunction on each element in the calling array.Syntax:arrayName.forEach(callback_function(currentItem, index, array) {//Application Logic});
www.webstackacademy.com ‹#›TheforEach() MethodExample:var age = [21,19,34,56,23,20,17,65,76,15,35,14,13,25];age.forEach(function(item) {document.write(item+" ");});www.webstackacademy.com ‹#›
www.webstackacademy.com ‹#›Thefilter() Methodwww.webstackacademy.com ‹#›Filter() method creates a new array with all elements that pass the test implementedby the provided function.Syntax:var new_array =current_array.filter(function(currentItem,index,array){//Application Logic to filter current array items//return items for new array});
www.webstackacademy.com ‹#›Thefilter() MethodExample:var words = ['limit', 'elite', 'exuberant', 'destruction‘];function word(elem) {return elem.length > 6;}var result = words.filter(word);console.log(result);// expected output: Array ["exuberant", "destruction“];www.webstackacademy.com ‹#›
www.webstackacademy.com ‹#›Exercisewww.webstackacademy.com ‹#›Write a JavaScript program to squeeze a word in given sentence.For example:1. Input : what is what so whatOutput: what is so2. Input : I mean they can't be so meanOutput : I mean they can't be so3. Input : Butler bought bitter butter but he made it as a better butter by addingsweeter butterOutput : Butler bought bitter butter but he made it as a better by adding sweeter
www.webstackacademy.com ‹#›Themap() Methodwww.webstackacademy.com ‹#›The map() method creates a new array with the results of calling a providedfunction on each element in the calling array.Syntax:var new_array = current_array.map(function(currentItem, index, array) {//Application Logic//Return elements for new array});
www.webstackacademy.com ‹#›Themap() MethodExample:var curArray = [1, 4, 9, 16];// pass a function to mapvar doubleArray = curArray.map(doubleItem);function doubleItem(currentItem) {return 2 * currentItem;}console.log(doubleArray);www.webstackacademy.com ‹#›
www.webstackacademy.com ‹#›Exercisewww.webstackacademy.com ‹#›Write a JavaScript program to greet the guest.For example:1. Input : [‘Ram’,’Radhika’,’John’,’Sumit’]Output: Welcome RamWelcome RadhikaWelcome JohnWelcome Sumit
www.webstackacademy.com ‹#›www.webstackacademy.com ‹#›Multidimensional ArrayThe matrix
www.webstackacademy.com ‹#›Multidimensional ArrayDeclaring Multidimensional Arrayvar array2d = [ [10, 20, 30], [40, 50, 60], [70, 80, 90] ];for(let idx = 0; idx < array2d.length; idx++) {for(let jdx = 0; jdx < array2d[idx].length; jdx++) {document.write(array2d[idx][jdx] + " ");}document.write("<br>");}
www.webstackacademy.com ‹#›Exercise WAP to find out sum of diagonal elements in a 2D array WAP to find max and min value in a given row WAP to multiply two matrix using 2D arrays
www.webstackacademy.com ‹#›WebStack Academy#83, Farah Towers,1st Floor, MG Road,Bangalore – 560001M: +91-809 555 7332E: training@webstackacademy.comWSA in Social Media:

Recommended

PDF
JavaScript - Chapter 7 - Advanced Functions
PDF
JavaScript - Chapter 3 - Introduction
PDF
JavaScript - Chapter 15 - Debugging Techniques
PDF
JavaScript - Chapter 1 - Problem Solving
PDF
JavaScript - Chapter 4 - Types and Statements
PDF
JavaScript - Chapter 13 - Browser Object Model(BOM)
PDF
JavaScript - Chapter 8 - Objects
PPTX
Javascript functions
PDF
Basics of JavaScript
PPTX
Event In JavaScript
PPT
Javascript
PDF
JavaScript - Chapter 12 - Document Object Model
PPT
Javascript arrays
PPT
Java Script ppt
PDF
Javascript basics
PDF
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
PDF
JavaScript Programming
PPTX
Lab #2: Introduction to Javascript
PDF
JavaScript - Chapter 5 - Operators
PDF
jQuery for beginners
PPTX
HTML Forms
PDF
Bootstrap 5 basic
PDF
Javascript
PDF
JavaScript - Chapter 9 - TypeConversion and Regular Expressions
PPTX
Form using html and java script validation
PPT
PHP - Introduction to Object Oriented Programming with PHP
PPSX
Php and MySQL
PPTX
Web Development_Sec6_kkkkkkkkkkkkkkkkkkkkkkkkkJS.pptx
PDF
Web Development_Sec6_Java secriptvvvvv.pdf

More Related Content

PDF
JavaScript - Chapter 7 - Advanced Functions
PDF
JavaScript - Chapter 3 - Introduction
PDF
JavaScript - Chapter 15 - Debugging Techniques
PDF
JavaScript - Chapter 1 - Problem Solving
PDF
JavaScript - Chapter 4 - Types and Statements
PDF
JavaScript - Chapter 13 - Browser Object Model(BOM)
PDF
JavaScript - Chapter 8 - Objects
PPTX
Javascript functions
JavaScript - Chapter 7 - Advanced Functions
JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 15 - Debugging Techniques
JavaScript - Chapter 1 - Problem Solving
JavaScript - Chapter 4 - Types and Statements
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 8 - Objects
Javascript functions

What's hot

PDF
Basics of JavaScript
PPTX
Event In JavaScript
PPT
Javascript
PDF
JavaScript - Chapter 12 - Document Object Model
PPT
Javascript arrays
PPT
Java Script ppt
PDF
Javascript basics
PDF
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
PDF
JavaScript Programming
PPTX
Lab #2: Introduction to Javascript
PDF
JavaScript - Chapter 5 - Operators
PDF
jQuery for beginners
PPTX
HTML Forms
PDF
Bootstrap 5 basic
PDF
Javascript
PDF
JavaScript - Chapter 9 - TypeConversion and Regular Expressions
PPTX
Form using html and java script validation
PPT
PHP - Introduction to Object Oriented Programming with PHP
PPSX
Php and MySQL
Basics of JavaScript
Event In JavaScript
Javascript
JavaScript - Chapter 12 - Document Object Model
Javascript arrays
Java Script ppt
Javascript basics
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Programming
Lab #2: Introduction to Javascript
JavaScript - Chapter 5 - Operators
jQuery for beginners
HTML Forms
Bootstrap 5 basic
Javascript
JavaScript - Chapter 9 - TypeConversion and Regular Expressions
Form using html and java script validation
PHP - Introduction to Object Oriented Programming with PHP
Php and MySQL

Similar to JavaScript - Chapter 10 - Strings and Arrays

PPTX
Web Development_Sec6_kkkkkkkkkkkkkkkkkkkkkkkkkJS.pptx
PDF
Web Development_Sec6_Java secriptvvvvv.pdf
DOC
14922 java script built (1)
PPT
Javascript built in String Functions
PPTX
Ch08 - Manipulating Data in Strings and Arrays
PPT
JavaScript Objects
PPT
Javascript string method
PPS
CS101- Introduction to Computing- Lecture 38
PDF
Java script objects 2
byH K
 
PPTX
Module 2 Javascript. Advanced concepts of javascript
PPTX
Introduction to Client-Side Javascript
PPTX
1-JAVA SCRIPT. servere-side applications vs client side applications
PPTX
advancing in js Scripting languages pt4.pptx
PPT
9781305078444 ppt ch08
PPTX
An introduction to javascript
 
PPTX
JavaScript.pptx
PPS
CS101- Introduction to Computing- Lecture 29
PPTX
Java script
PPTX
An Introduction to JavaScript
 
PDF
GeoGebra JavaScript CheatSheet
Web Development_Sec6_kkkkkkkkkkkkkkkkkkkkkkkkkJS.pptx
Web Development_Sec6_Java secriptvvvvv.pdf
14922 java script built (1)
Javascript built in String Functions
Ch08 - Manipulating Data in Strings and Arrays
JavaScript Objects
Javascript string method
CS101- Introduction to Computing- Lecture 38
Java script objects 2
byH K
 
Module 2 Javascript. Advanced concepts of javascript
Introduction to Client-Side Javascript
1-JAVA SCRIPT. servere-side applications vs client side applications
advancing in js Scripting languages pt4.pptx
9781305078444 ppt ch08
An introduction to javascript
 
JavaScript.pptx
CS101- Introduction to Computing- Lecture 29
Java script
An Introduction to JavaScript
 
GeoGebra JavaScript CheatSheet

More from WebStackAcademy

PDF
Webstack Academy - Course Demo Webinar and Placement Journey
PDF
WSA: Scaling Web Service to Handle Millions of Requests per Second
PDF
WSA: Course Demo Webinar - Full Stack Developer Course
PDF
Career Building in AI - Technologies, Trends and Opportunities
PDF
Webstack Academy - Internship Kick Off
PDF
Building Your Online Portfolio
PDF
Front-End Developer's Career Roadmap
PDF
Angular - Chapter 9 - Authentication and Authorization
PDF
Angular - Chapter 7 - HTTP Services
PDF
Angular - Chapter 6 - Firebase Integration
PDF
Angular - Chapter 5 - Directives
PDF
Angular - Chapter 4 - Data and Event Handling
PDF
Angular - Chapter 3 - Components
PDF
Angular - Chapter 2 - TypeScript Programming
PDF
Angular - Chapter 1 - Introduction
PDF
JavaScript - Chapter 14 - Form Handling
PDF
JavaScript - Chapter 11 - Events
PDF
JavaScript - Chapter 6 - Basic Functions
PDF
jQuery - Chapter 4 - DOM Handling
PDF
jQuery - Chapter 5 - Ajax
Webstack Academy - Course Demo Webinar and Placement Journey
WSA: Scaling Web Service to Handle Millions of Requests per Second
WSA: Course Demo Webinar - Full Stack Developer Course
Career Building in AI - Technologies, Trends and Opportunities
Webstack Academy - Internship Kick Off
Building Your Online Portfolio
Front-End Developer's Career Roadmap
Angular - Chapter 9 - Authentication and Authorization
Angular - Chapter 7 - HTTP Services
Angular - Chapter 6 - Firebase Integration
Angular - Chapter 5 - Directives
Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 3 - Components
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 1 - Introduction
JavaScript - Chapter 14 - Form Handling
JavaScript - Chapter 11 - Events
JavaScript - Chapter 6 - Basic Functions
jQuery - Chapter 4 - DOM Handling
jQuery - Chapter 5 - Ajax

Recently uploaded

PDF
Day 2 - Network Security ~ 2nd Sight Lab ~ Cloud Security Class ~ 2020
PDF
Day 3 - Data and Application Security - 2nd Sight Lab Cloud Security Class
PPTX
Conversational Agents – Building Intelligent Assistants [Virtual Hands-on Wor...
PDF
API-First Architecture in Financial Systems
PDF
The major tech developments for 2026 by Pluralsight, a research and training ...
PPTX
Data Privacy and Protection: Safeguarding Information in a Connected World
PDF
Unser Jahresrückblick – MarvelClient in 2025
PDF
Six Shifts For 2026 (And The Next Six Years)
PPTX
Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]
PPTX
AI in Cybersecurity: Digital Defense by Yasir Naveed Riaz
PDF
Usage Control for Process Discovery through a Trusted Execution Environment
PPTX
Building Cyber Resilience for 2026: Best Practices for a Secure, AI-Driven Bu...
PDF
Access Control 2025: From Security Silo to Software-Defined Ecosystem
PPTX
Unit-4-ARTIFICIAL NEURAL NETWORKS.pptx ANN ppt Artificial neural network
PPTX
Chapter 3 Introduction to number system.pptx
PDF
Decoding the DNA: The Digital Networks Act, the Open Internet, and IP interco...
PPTX
Cybersecurity Best Practices - Step by Step guidelines
PDF
Making Sense of Raster: From Bit Depth to Better Workflows
PDF
GPUS and How to Program Them by Manya Bansal
PDF
Is It Possible to Have Wi-Fi Without an Internet Provider
Day 2 - Network Security ~ 2nd Sight Lab ~ Cloud Security Class ~ 2020
Day 3 - Data and Application Security - 2nd Sight Lab Cloud Security Class
Conversational Agents – Building Intelligent Assistants [Virtual Hands-on Wor...
API-First Architecture in Financial Systems
The major tech developments for 2026 by Pluralsight, a research and training ...
Data Privacy and Protection: Safeguarding Information in a Connected World
Unser Jahresrückblick – MarvelClient in 2025
Six Shifts For 2026 (And The Next Six Years)
Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]
AI in Cybersecurity: Digital Defense by Yasir Naveed Riaz
Usage Control for Process Discovery through a Trusted Execution Environment
Building Cyber Resilience for 2026: Best Practices for a Secure, AI-Driven Bu...
Access Control 2025: From Security Silo to Software-Defined Ecosystem
Unit-4-ARTIFICIAL NEURAL NETWORKS.pptx ANN ppt Artificial neural network
Chapter 3 Introduction to number system.pptx
Decoding the DNA: The Digital Networks Act, the Open Internet, and IP interco...
Cybersecurity Best Practices - Step by Step guidelines
Making Sense of Raster: From Bit Depth to Better Workflows
GPUS and How to Program Them by Manya Bansal
Is It Possible to Have Wi-Fi Without an Internet Provider

JavaScript - Chapter 10 - Strings and Arrays

  • 1.
  • 2.
    www.webstackacademy.com ‹#› StringsStrings access methods Array Array access methods Multi dimensional arraysTable of Content
  • 3.
  • 4.
    www.webstackacademy.com ‹#›What isString?• String is a sequence of Unicode characters.• Unicode characters are encoding standard that has widespread acceptance.• Some of the most commonly used character encodings areEncoding DescriptionUTF - 8 Widely used in email systems and on the internet.UTF - 16 Used in windows, Java and by JavaScript, and often for plain textand for word-processing data files on Windows.UTF - 32 The mainly used in internal APIs where the data is single codepoints or glyphs, rather than strings of characters.
  • 5.
    www.webstackacademy.com ‹#›Strings Syntax<script>varstr = “ ”;var str1 = “Hello World”;var str2 = new String(“Hi”);</script>
  • 6.
    www.webstackacademy.com ‹#›Strings -ImmutableExample:<script>var str = “Hello World”;str[0] = “h”;console.log(str); //will be “Hello World”</script>• In JavaScript strings are immutable or unchangeable.• An immutable object is an object whose state cannot be modified after it is created.
  • 7.
    www.webstackacademy.com ‹#›www.webstackacademy.com ‹#›StringMethods(Pre-defined methods to perform various operations in strings)
  • 8.
    www.webstackacademy.com ‹#›Strings MethodsMethodDescriptionlength Returns the length of the stringconcat() Joins the string with one or more stringstrim() Removes the white spaces from beginning and end of the stringreplace() Replaces old string with the new stringsubstring() Returns the part of stringsubstr() Returns the part of string
  • 9.
    www.webstackacademy.com ‹#›Strings MethodsMethodDescriptionindexOf() Returns the position of specified wordlastIndexOf() Returns the last occurrence of specified wordslice() Returns the part of the stringsplit() Converts string into arrayincludes() Returns true if string includes the specified word.
  • 10.
    www.webstackacademy.com ‹#›The length()Method The length method returns the size of the string.Example :var str = “Hello World”;var len = str.length;document.write(“Length of the string ” + len);Syntax :var length = string.length;
  • 11.
    www.webstackacademy.com ‹#›The concat()Method The concat() method will join the string with one or more strings.Syntax :var str1 = str.concat(“hello”,” “,”World”);orvar str2 = str.concat(str1,str2,str3…..strN);
  • 12.
    www.webstackacademy.com ‹#›The concat()MethodExample :var str1 = “Hello World”;var str2 = “Welcome”;var concatString = str1.concat(“ ”, str2, ” “, “to WSA”);document.write(“Concatenation of string” + concatString);
  • 13.
    www.webstackacademy.com ‹#›The trim()Method The trim() method will remove the spaces from beginning and end of thestrings.Syntax :var result = string.trim();Example :var str1 = “ Hello World ”;var trimmedString = str1.trim();console.log (“After trim” +trimmedString);
  • 14.
    www.webstackacademy.com ‹#›The trimStart()or trimLeft() Method The trimStart() or trimLeft() methods will remove the spaces from thebeginning of the strings.Syntax :var result = string.trimLeft();Orvar result = string.trimStart();
  • 15.
    www.webstackacademy.com ‹#›The trimStart()or trimLeft() MethodExample :var str1 = “ Hello World ”;var trimmedStart = str1.trimStart();var trimmedLeft = str1.trimLeft();console.log(“After trim” +trimmedStart);console.log(“<br>After trim” +trimmedLeft);
  • 16.
    www.webstackacademy.com ‹#›The trimEnd()or trimRight() Method The trimEnd() or trimRight() methods will remove the spaces from thebeginning of the strings.Syntax :var result = string.trimEnd();Orvar result = string.trimRight();
  • 17.
    www.webstackacademy.com ‹#›The trimEnd()or trimRight() MethodExample :var str1 = “ Hello World ”;var trimmedEnd = str1.trimEnd();var trimmedRight = str1.trimRight();console.log(“After trim” +trimmedEnd);console.log(“<br>After trim” +trimmedRight);
  • 18.
    www.webstackacademy.com ‹#›The replace()Method The replace() method will replace the specified string into new string.Syntax :var replacedStr = str.replace(‘string to replace’,’new string’);Orvar replacedStr = str.replace(RegularExpression, ’new string’);
  • 19.
    www.webstackacademy.com ‹#›The replace()MethodExample 1:var str1 =“Welcome to JS World”;var repStr = str1.replace(‘JS’,’JavaScript’);console.log(“Replaced String” +repStr);Example 2:var str =“A blue bottle with a blur liquid is on a blue table Blue”;var replacedStr = str.replace(/blue/g, ”green”);document.write(“After replace” +replacedStr);
  • 20.
    www.webstackacademy.com ‹#›The substring()Method The substring() method will return the part of the strings.Syntax :var subStr = str.substring(startIndex, EndIndex);Example :var str1 =“Javascript World”;var subStr = str1.substring(0,10);document.write(“Subtring is: ” +subStr);
  • 21.
    www.webstackacademy.com ‹#›The substr()Method The substr() method will return the part of the strings.Syntax :var subStr = str.substr(startIndex, numberOfCharacters);Example :var str1 =“Javascript World”;var subStr = str1.substr(0,10);document.write(“Subtring is: ” +subStr);
  • 22.
    www.webstackacademy.com ‹#›The indexOf()MethodThe indexOf() method will return the position of first occurrence of the specified stringSyntax :var index = str.indexOf(“string”);Example :var str1 =“Javascript World”;var indexStr = str1.indexOf(“World”);document.write(“Index of world” +indexStr);
  • 23.
    www.webstackacademy.com ‹#›The lastIndexOf()MethodThe lastIndexOf() method will return the position of last occurrence of the specified stringSyntax :var lastIndex = str.lastIndexOf(“string”);Example :var str1 =“Javascript World! Welcome to World”;var lastIndex = str1.lastIndexOf(“World”);document.write(“Last Index of world” +lastIndex);
  • 24.
    www.webstackacademy.com ‹#›ExerciseWrite aJavaScript program to extract the user name and domain name.• Accept email address from the user, extract the user name and the domain name, for• example,Input: abc.xyz@gmail.comOutput: username: abc.xyzdomain : gmail.com
  • 25.
    www.webstackacademy.com ‹#›The slice()Method The slice() method will return the part of the strings.Syntax :var slicedStr = str.slice(startIndex, EndIndex);Example :var str =“Javascript world”;var slicedStr = str.slice(1,5);document.write(“Sliced String” +slicedStr);
  • 26.
    www.webstackacademy.com ‹#›The split()Method The split() method will convert string into array of strings.Syntax :var splitStr = str.split(separator,limit);Example :var str =“Javascript world. Welcome to WSA”;var splitStr = str.split(“ “)document.write(“Array of string” +splitStr);var splitLimit = str.split(“ “,2);document.write(“Array of string” +splitLimit);
  • 27.
    www.webstackacademy.com ‹#›The includes()MethodThe includes() method will true if string includes the specified word else returns the false.Syntax :var includesStr = str.includes(searchString, position);Example :var str = 'To be, or not to be, that is the question.';console.log(str.includes('To be'));console.log(str.includes('question',0));console.log(str.includes('nonexistent'));
  • 28.
    www.webstackacademy.com ‹#›Exercisewww.webstackacademy.com ‹#›Convertthe given string into title case with following rules:• Capitalize the first letter of each word. Capitalize nouns, pronouns, adjectives, verbs,adverbs, and subordinate conjunctions.• Lowercase articles (a, an, the), coordinating conjunctions, and prepositions (under,between, over, on, at).• Lowercase the 'to' in an infinitive (I want to play guitar).Examples:• How Are You Doing Today?• Our Office between Metro and Barton Centre• What Is the Need of This Expensive Phone?
  • 29.
    www.webstackacademy.com ‹#›Exercisewww.webstackacademy.com ‹#›1.Count number of palindromes in a given string:2. Special Palindrome• In English we call a particular string as palindrome if it reads the same way from left andright (ex: Malayalam, mom etc..)• However there are some special kind of palindromes are there which will have:1. Upper case characters2. Special characters3. Spaces in-between.Examples:1. "Madam, I’m Adam“2. "A nut for a jar of tuna.“3. "Are we not pure? “No, sir!” Panama’s moody Noriega brags. It is garbage!”Irony dooms a man—a prisoner up to new era."
  • 30.
  • 31.
    www.webstackacademy.com ‹#›What isan Array? Array is a collection of similar or different data types Each data in array is called an element Each elements has a numeric position, known as its index / indices, in the array The index numbers start from zero In JavaScript, Array is also an object. The typeof operator will return the same Array object has length property which returns the total number of elements
  • 32.
    www.webstackacademy.com ‹#›Array(Syntax –Using [ ] )Syntax :// Creates initialized arrayvar array-name = [item1, item2, …];// Creates emptyvar array-name = [ ];
  • 33.
    www.webstackacademy.com ‹#›Array(Syntax –Using constructor)Syntax :var array-name = new Array(item1, item2, item3);Orvar array-name = Array(item1, item2, item3);Orvar array-name = Array(array-length);
  • 34.
    www.webstackacademy.com ‹#›Array -ExampleExample :var array = [10, 20, 30, 40, 50];Orvar array = new Array(10, 20, 30, 40, 50);Orvar array = Array(3);
  • 35.
    www.webstackacademy.com ‹#›Array Access– Using loopfor ( let idx = 0; idx < 5; idx++ ) {document.write(“Element at index ” + idx + “ is ” + myArray[idx]);}for ( let idx in myArray ) {document.write(“Element at index ” + idx + “ is ” + myArray[idx]);}
  • 36.
    www.webstackacademy.com ‹#›Array -HeterogeneousEach element in an array can be of different typesvar mixArray = [“Student”, 95, true];for(let idx = 0; idx < 3; idx++) {console.log (mixArray[idx]);}
  • 37.
    www.webstackacademy.com ‹#›Exercise WAPto create an array with 10 integers and find out the following: Sum of all number Average Maximum value & Minimum value WAP to reverse an array elements.
  • 38.
    www.webstackacademy.com ‹#›www.webstackacademy.com ‹#›ArrayMethods(Pre-defined methods to perform various operations in array)
  • 39.
    www.webstackacademy.com ‹#›Array MethodsMethodDescriptionjoin() Concatenates all the elements of array into stringpop() Deletes last element of an arraypush() Appends new element in the last of arraysort() Sorts an array in alphabetical orderreverse() Reverses array elements order in the array
  • 40.
    www.webstackacademy.com ‹#›Array MethodsMethodDescriptionshift() Removes first element from the array and shifts all other elementto a lower indexunshift() Unshift method adds elements to the beginning of an array andreturn new length of arrayslice() The array slice method returns part of an arraysplice() The array splice method can be used for adding and/or removingelements from an array
  • 41.
    www.webstackacademy.com ‹#›Array MethodsMethodDescriptionFilter() Creates a new array with all elements that pass the testimplemented by the provided function.map() Creates a new array with the results of calling a provided functionon each element in the calling array.
  • 42.
    www.webstackacademy.com ‹#›The join()Method The join() method converts all the elements of an array to strings andconcatenates them, returning the resulting string It behaves like toString(), but we can specify separatorExample :var fruits = ["Banana", "Orange","Apple", "Mango"];var str = fruits.join(" + ");document.write(str);
  • 43.
    www.webstackacademy.com ‹#›The push()and pop() methodsStack operations – LIFOvar numStack = [10, 20, 30, 40, 50];numStack.pop(); // Pop an elementfor (let idx=0; idx <numStack.length; idx++) {document.write(numStack[idx] + "<br>");}numStack.push(100); // Push an elementfor (let idx=0; idx <numStack.length; idx++) {document.write(numStack[idx] + "<br>");}
  • 44.
    www.webstackacademy.com ‹#›The shift()methodsExample:var array1 = [1, 2, 3];var firstElement = array1.shift();console.log(array1);// expected output: Array [2, 3]console.log(firstElement);// expected output: 1The shift() method removes the first element from an array and returnsthat removed element.Syntaxarray.shift();
  • 45.
    www.webstackacademy.com ‹#›The unshift()methodsExample:var array1 = [1, 2, 3];array1.unshift(2);console.log(array1);array1.unshift(5,8);console.log(array1);The unshift() method adds one or more elements to the beginning of anarray and returns the new length of the array.Syntaxarray.unshift();
  • 46.
    www.webstackacademy.com ‹#›The sort()MethodThe sort() method sorts an array in alphabetic ordervar numList = [‘banana’, ‘apple’, ‘mango’, ‘grapes’];numList.sort();for (let idx = 0; idx < numList.length; idx++){document.write(numList[idx] + "<br>");}
  • 47.
    www.webstackacademy.com ‹#›The reverse()MethodThe reverse() method reverses the elements in an arrayvar numList = [55, 3, 16, 21];numList.reverse();for(let idx = 0; idx < numList.length; idx++){document.write(numList[idx] + "<br>");}
  • 48.
    www.webstackacademy.com ‹#›Exercise WAPto represent two sets of integers. Find out union and intersection of those twosets (Ref – Set theory) Assume there are duplicates in the array Hint – Write a findElement() function to check if an element is present in an array or not• WAP to find Nth largest element in a given array• WAP to perform shift operations of a given element Shift Nth element by right by M positions Shift Nth element by left by M positions
  • 49.
    www.webstackacademy.com ‹#›Thesplice() MethodSyntax:array.splice(startIndex,number of elements, elements toadd);www.webstackacademy.com ‹#›The splice() method will change the content of original array by removing oradding the element.
  • 50.
    www.webstackacademy.com ‹#›Thesplice() Methodvarar = [1, 4, 9, 10, 11, 16];ar.splice(1,3);// will remove the elementsconsole.log(ar);ar.splice(1,0,5);// will insert the element 5 at index 1console.log(ar);www.webstackacademy.com ‹#›
  • 51.
    www.webstackacademy.com ‹#›TheforEach()Methodwww.webstackacademy.com ‹#›Themap() method creates a new array with the results of calling a providedfunction on each element in the calling array.Syntax:arrayName.forEach(callback_function(currentItem, index, array) {//Application Logic});
  • 52.
    www.webstackacademy.com ‹#›TheforEach() MethodExample:varage = [21,19,34,56,23,20,17,65,76,15,35,14,13,25];age.forEach(function(item) {document.write(item+" ");});www.webstackacademy.com ‹#›
  • 53.
    www.webstackacademy.com ‹#›Thefilter() Methodwww.webstackacademy.com‹#›Filter() method creates a new array with all elements that pass the test implementedby the provided function.Syntax:var new_array =current_array.filter(function(currentItem,index,array){//Application Logic to filter current array items//return items for new array});
  • 54.
    www.webstackacademy.com ‹#›Thefilter() MethodExample:varwords = ['limit', 'elite', 'exuberant', 'destruction‘];function word(elem) {return elem.length > 6;}var result = words.filter(word);console.log(result);// expected output: Array ["exuberant", "destruction“];www.webstackacademy.com ‹#›
  • 55.
    www.webstackacademy.com ‹#›Exercisewww.webstackacademy.com ‹#›Writea JavaScript program to squeeze a word in given sentence.For example:1. Input : what is what so whatOutput: what is so2. Input : I mean they can't be so meanOutput : I mean they can't be so3. Input : Butler bought bitter butter but he made it as a better butter by addingsweeter butterOutput : Butler bought bitter butter but he made it as a better by adding sweeter
  • 56.
    www.webstackacademy.com ‹#›Themap() Methodwww.webstackacademy.com‹#›The map() method creates a new array with the results of calling a providedfunction on each element in the calling array.Syntax:var new_array = current_array.map(function(currentItem, index, array) {//Application Logic//Return elements for new array});
  • 57.
    www.webstackacademy.com ‹#›Themap() MethodExample:varcurArray = [1, 4, 9, 16];// pass a function to mapvar doubleArray = curArray.map(doubleItem);function doubleItem(currentItem) {return 2 * currentItem;}console.log(doubleArray);www.webstackacademy.com ‹#›
  • 58.
    www.webstackacademy.com ‹#›Exercisewww.webstackacademy.com ‹#›Writea JavaScript program to greet the guest.For example:1. Input : [‘Ram’,’Radhika’,’John’,’Sumit’]Output: Welcome RamWelcome RadhikaWelcome JohnWelcome Sumit
  • 59.
  • 60.
    www.webstackacademy.com ‹#›Multidimensional ArrayDeclaringMultidimensional Arrayvar array2d = [ [10, 20, 30], [40, 50, 60], [70, 80, 90] ];for(let idx = 0; idx < array2d.length; idx++) {for(let jdx = 0; jdx < array2d[idx].length; jdx++) {document.write(array2d[idx][jdx] + " ");}document.write("<br>");}
  • 61.
    www.webstackacademy.com ‹#›Exercise WAPto find out sum of diagonal elements in a 2D array WAP to find max and min value in a given row WAP to multiply two matrix using 2D arrays
  • 62.
    www.webstackacademy.com ‹#›WebStack Academy#83,Farah Towers,1st Floor, MG Road,Bangalore – 560001M: +91-809 555 7332E: training@webstackacademy.comWSA in Social Media:
[8]ページ先頭
©2009-2025 Movatter.jp