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

More Related Content

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

What's hot

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

Similar to JavaScript - Chapter 10 - Strings and Arrays

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

More from WebStackAcademy

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

Recently uploaded

PDF
Security Forum Sessions from Houston 2025 Event
DOCX
iRobot Post‑Mortem and Alternative Paths - Discussion Document for Boards and...
PPTX
DYNAMICALLY.pptx good for the teachers or students to do seminars and for tea...
PPTX
Conversational Agents – Building Intelligent Assistants [Virtual Hands-on Wor...
PPTX
Unit-4-ARTIFICIAL NEURAL NETWORKS.pptx ANN ppt Artificial neural network
PDF
Making Sense of Raster: From Bit Depth to Better Workflows
PDF
Six Shifts For 2026 (And The Next Six Years)
PPTX
Data Privacy and Protection: Safeguarding Information in a Connected World
PDF
API-First Architecture in Financial Systems
PDF
TrustArc Webinar - Looking Ahead: The 2026 Privacy Landscape
PPTX
THIS IS CYBER SECURITY NOTES USED IN CLASS ON VARIOUS TOPICS USED IN CYBERSEC...
PPTX
AI in Cybersecurity: Digital Defense by Yasir Naveed Riaz
PPTX
Cybercrime in the Digital Age: Risks, Impact & Protection
PPTX
wob-report.pptxwob-report.pptxwob-report.pptx
PDF
Energy Storage Landscape Clean Energy Ministerial
PDF
Decoding the DNA: The Digital Networks Act, the Open Internet, and IP interco...
PDF
Unlocking the Power of Salesforce Architecture: Frameworks for Effective Solu...
PDF
Eredità digitale sugli smartphone: cosa resta di noi nei dispositivi mobili
PDF
The year in review - MarvelClient in 2025
PDF
Day 2 - Network Security ~ 2nd Sight Lab ~ Cloud Security Class ~ 2020
Security Forum Sessions from Houston 2025 Event
iRobot Post‑Mortem and Alternative Paths - Discussion Document for Boards and...
DYNAMICALLY.pptx good for the teachers or students to do seminars and for tea...
Conversational Agents – Building Intelligent Assistants [Virtual Hands-on Wor...
Unit-4-ARTIFICIAL NEURAL NETWORKS.pptx ANN ppt Artificial neural network
Making Sense of Raster: From Bit Depth to Better Workflows
Six Shifts For 2026 (And The Next Six Years)
Data Privacy and Protection: Safeguarding Information in a Connected World
API-First Architecture in Financial Systems
TrustArc Webinar - Looking Ahead: The 2026 Privacy Landscape
THIS IS CYBER SECURITY NOTES USED IN CLASS ON VARIOUS TOPICS USED IN CYBERSEC...
AI in Cybersecurity: Digital Defense by Yasir Naveed Riaz
Cybercrime in the Digital Age: Risks, Impact & Protection
wob-report.pptxwob-report.pptxwob-report.pptx
Energy Storage Landscape Clean Energy Ministerial
Decoding the DNA: The Digital Networks Act, the Open Internet, and IP interco...
Unlocking the Power of Salesforce Architecture: Frameworks for Effective Solu...
Eredità digitale sugli smartphone: cosa resta di noi nei dispositivi mobili
The year in review - MarvelClient in 2025
Day 2 - Network Security ~ 2nd Sight Lab ~ Cloud Security Class ~ 2020

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