DEV Community: Isabella

7 Must-Learn Things About JavaScript

Isabella — Fri, 06 Jan 2023 13:16:33 +0000

JavaScript is a programming language that is widely used to build interactive websites and web applications. It is a powerful and flexible language that has a large and active community of developers. Here are some must-learn things about JavaScript:

Variables: Variables are containers that store values, and they are an essential part of any programming language. In JavaScript, variables are used to store data such as numbers, strings, and objects. You can use variables to store user input, perform calculations, and much more.

Functions: Functions are blocks of code that can be called and executed at any time. Functions are used to organize and reuse code, and they are an important concept in JavaScript. Functions can take arguments, which are values that are passed to the function when it is called, and they can also return a value.

Control structures: Control structures are statements that allow you to control the flow of your code. In JavaScript, control structures include if statements, for loops, and while loops. These structures allow you to write code that can make decisions, repeat actions, and more.

Arrays: Arrays are data structures that allow you to store a collection of values in a single variable. Arrays are useful for storing lists of data, such as a list of names or a list of numbers. In JavaScript, arrays are zero-indexed, which means that the first element of an array is at index 0.

Objects: Objects are collections of key-value pairs that represent a data structure. Objects are used to store data and behavior in JavaScript, and they are an important concept to understand. Objects can have properties, which are values associated with the object, and methods, which are functions that are associated with the object.

Events: Events are actions that occur in the browser, such as a user clicking a button or a page loading. In JavaScript, you can use events to trigger actions or reactions in your code. For example, you can use an event listener to listen for a user's click and then execute a function in response.

The DOM: The DOM (Document Object Model) is a tree-like structure that represents the HTML of a web page. In JavaScript, you can use the DOM to access and manipulate elements on a web page. This allows you to create interactive and dynamic web pages that respond to user input and events.

These are just a few of the must-learn things about JavaScript. There is much more to learn about this powerful and popular language, and there are many resources available online to help you get started.

HTML and CSS: The Building Blocks of the Web

Isabella — Fri, 06 Jan 2023 13:12:28 +0000

HTML and CSS are two of the core technologies for building web pages. HTML (HyperText Markup Language) is a language used to describe the structure and content of a web page, while CSS (Cascading Style Sheets) is a language used to describe the style and layout of a document written in HTML. Together, HTML and CSS are the building blocks of the web and form the foundation for the design and implementation of websites and web applications.

HTML is a markup language, which means that it consists of a set of tags and attributes that are used to describe the content of a web page. The tags and attributes in HTML provide a way to structure and format the content of a web page, including headings, paragraphs, lists, links, images, and other types of media.

HTML has evolved over the years, and the current version is HTML5. HTML5 introduced new tags and attributes that provide more functionality and flexibility for building web pages. Some of the new features in HTML5 include the ability to play audio and video files natively in the browser, the ability to draw graphics on the fly using the canvas element, and the ability to store data locally in the browser using web storage.

CSS is a stylesheet language that is used to control the appearance and layout of a web page. CSS provides a way to apply styles to HTML elements, such as font size, color, and margin, as well as more advanced layout features such as floats and grid layouts.

CSS is used to separate the content of a web page from its presentation, which allows for more flexibility and easier maintenance of web pages. With CSS, designers and developers can create styles that can be reused across multiple pages and websites, and changes to the styles can be made in one place and automatically applied to all pages that use the styles.

There are several ways to apply CSS styles to an HTML document. One way is to use inline styles, which are styles that are applied directly to an HTML element using the style attribute. Another way is to use internal styles, which are styles that are defined in the head of an HTML document using the style element. External styles, on the other hand, are styles that are defined in a separate CSS file and linked to an HTML document using the link element.

CSS has also evolved over the years, and the current version is CSS3. CSS3 introduced new features such as media queries, which allow web pages to adapt to different screen sizes and devices, and animations, which allow elements on a web page to move and change over time.

HTML and CSS are essential technologies for building web pages and web applications, and they form the foundation for the design and implementation of the web. Whether you are a beginner just starting out with web development or an experienced developer looking to build complex web applications, learning HTML and CSS is an important step in your journey.

There are several reasons why someone should learn HTML and CSS:

HTML and CSS are essential for building websites and web applications: HTML is used to structure and format the content of a web page, while CSS is used to control the appearance and layout of a web page. Together, HTML and CSS form the foundation for the design and implementation of websites and web applications.

HTML and CSS are easy to learn: HTML and CSS are relatively easy languages to learn, especially compared to programming languages such as Java or C++. There are many resources available online, such as tutorials, articles, and video courses, that can help you learn HTML and CSS.

HTML and CSS are in demand: As the web continues to grow, the demand for web developers and designers with HTML and CSS skills is increasing. Knowing HTML and CSS can open up career opportunities in a variety of industries, including web development, design, marketing, and more.

HTML and CSS are constantly evolving: The web is constantly evolving, and HTML and CSS are evolving with it. Learning HTML and CSS will not only give you the skills to build web pages today, but it will also give you the foundation to learn and adapt to new technologies as they emerge.

HTML and CSS can be fun: Building websites and web applications can be a rewarding and creative process. Learning HTML and CSS can be a fun and fulfilling hobby, and it can also be a great way to express yourself and share your ideas with the world.

Objects and Constructor in JS

Isabella — Sun, 04 Dec 2022 12:15:37 +0000

1.Create a dog object that has four properties and three methods

let dog={} dog.breed='puddle' dog.color='golden' dog.legs= 4 dog.name='Fido' dog.barking = function(){ console.log('No barking') } dog.slepping = function(){ console.log('no sleep') } dog.behaviour = function(){ console.log('need to play daily') }

CONSTRUCTOR ******************
2.Create a Tony Hawk Pro Skater constructor that makes fighting game characters with 4 properties and 3 methods

function TonyHaukCharacter (chName,chStance,chSponsor,chStance){ this.characterName = chName this.stance = chStance this.sponsor = chSponsor this.specialMove = chMove this.flip = function(){ console.log('Kickflip!!') } this.taunt = function(){ console.log('Don"t make me use my $'{this.specialMove}) } this.grab = function(){ console.log('MELON GRAB') } }

//LET`S CREATE A CHARACTER NOW:

let kareemKampbell = new TonyHaukCharacter ('Kareem', 'Goofy','Element','Ghetto Bird')

// We capitalize the T on TonyHaukCharacter because of the constructor,to understand that is a constructor
// chName,chStance, chSponsor,chMove are parameters "function TonyHaukCharacter (chName,chStance,chSponsor,chStance)"
// We use 'new' to make a new object

.reverse() | .split('') | .join('') and palindrome in JS Explained

Isabella — Sun, 04 Dec 2022 11:10:46 +0000

1.Create a function that takes string.
Print the reverse of that string to the console.

let unoReverse = str => console.log(str.split('').reverse().join(''))

// .split(') takes the string and it returns it into an array
//once we have the array, reverse() **can reverse each
// in this case we split('')** in individual letters ; .reverse() can take those individual letters and it can reverse them
//Once we reversed our array, we joined back together join('') to get back a string, otherwise we will still be dealing with an array and we want our string back.
// reverse() doesnt need quotes "" because when theyve made the reverse method they didn`t needed to take in an argument to do the reversing.

2.Create a function that takes in a string.
Alert if the string is a palindrome or not.
const palindromeCheck = str => alert(str === str.split('').reverse().join('')) palindromeCheck('racecar')

//We are going to take in a string and see if it equals the same as that reversed. So if the str(string) equals the str reversed, we know that we have a palindrome. In this case will alert 'true'.

In simple terms, when the numbers, strings, or characters are reversed that return the same result as the original numbers or characters, it is called a Palindrome.

Javascript: .forEach and array.filter explained

Isabella — Sat, 22 Oct 2022 08:49:20 +0000

//Create and array of tv shows. Loop through and print each show to the console

let shows =['bachelor', 'big brother','weel of fourtune'] shows.forEach(show => console.log(show))

We`re going to run once for each element in the array,we have 3 elements in the array. Each time is going to run is,going to pick each element from the array,and then plug it into 'show'. They are going to be console log(show).

//Create and array of numbers

let num=[1,2,3,4,5,6]

//Return a new array of numbers that includes every even number from the previous Arrays

let onlyEvens = arr => arr.filter( n => n%2 === 0 )

We want to get just the even numbers ,so we will use a filter method with modulus . The cool thing about filter is that it runs once for each element in the array and it checks to see if something is true. If it is true it includes that in the new array.

n => n%2 === 0 ) so were going to take in an "n", and well say n is % (modulus) 2 ,and that equals 0.

arr => arr.filter(n => n%2 === 0 ) This is an arrow function that will work with any array. We named our parameter 'arr'.

Then I runned the filter method (arr.filter(n => n%2 === 0 ) ) on that array. Is same as running the "map", it`s filter another method build into JS. What the 'filter' will do it is that is going to help us set up a new array, just as like "map" set up a new array, filter method set up also a new array.

To add a value to this new array, this statement (n => n%2 === 0 ) winds up to be true. If is not true, we don`t add that value into the array. So the very first time this runs, we are filter throught 'nums' because 'nums' is the array that we pass in. We called only evens and we pass in nums console.log(onlyEvens(nums)) So wherever we see 'arr','arr' is 'nums' just how we declare the function values in console.log.

"filter" is going to run 6 times because their are 6 numbers,6 elements in the array let num=[1,2,3,4,5,6]

The very first time nums will run, will be 1. Does 1%2=0? NO 1 is not an even number so thats a false.S o we dont add 1 to our new array. Next we try with all the numbers from the array. So even numbers will be 2,4,6 and will be added to our new array.

This new array arr.filter(n => n%2 === 0 ) is created right here, and something specific is going to happen.It is an implicit return. That means the new array we just created it gets returned to where it is called ( console.log(onlyEvens(nums)) ) to (nums). So [2,4,6] is going to be putted into the new array.

The 'filter' is going to create a new array for us => arr.filter(n => n%2 === 0 ) , and whenever is done creating that new array ,it gets returned to where it was called. To nums here in the console.log(onlyEvens(nums)) .

let shows =['bachelor', 'big borther','weel of fourtune'] shows.forEach(show => console.log(show)) let num=[1,2,3,4,5,6] let onlyEvens = arr => arr.filter( n => n%2 === 0 ) console.log(onlyEvens(nums))

Javascript: Array exercise Explained

Isabella — Wed, 12 Oct 2022 06:13:36 +0000

> **Create a function that takes in an array of numbers. Return a new array containing every even number from the original array (do not use map or filter)**

function onlyEvens(nums){
let evens=[]
nums.forEach( n => {
    if(n % 2 === 0){             
  evens.push(n)              
    }

});
return evens
}
console.log(onlyEvens([1,2,3,4,5,6]))

//If is divided by 2 and is = 0 we know is even.
//Wherever we see nums is an array with 6 elements in it.
//We setup an empty array called evens.
//Then we loop through our array.Each times it runs(.forEach loop will run 6 times because are 6 elements in the array)
//When n=1, 1%2? NO
n=2, 2%2? YES Since is a true statement,we do the next line evens.push(n) . What will do,will push the (n) that now is 2,and push it into that empty array called evens.
//Same goes for 4 and 6.
//Will return the even [2,4,6]