Skip to content

Commit 4b2c1d1

Browse files
AsabenehAsabeneh
committed
content added
1 parent e2188f3 commit 4b2c1d1

1 file changed

Lines changed: 156 additions & 14 deletions

File tree

‎readMe.md‎

Lines changed: 156 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1384,20 +1384,20 @@ const users = {
13841384
```
13851385
1. Develop a small JavaScript library.
13861386
## Functional Programming
1387-
*forEach*:Iterate an array elements and use for array. It takes a callback function with elements and index parameter.
1387+
*forEach*: Iterate an array elements and use for array. It takes a callback function with elements and index parameter.
13881388
13891389
```js
13901390
arr.forEach(function(element, index){
13911391
console.log(index, element)
13921392
})
13931393
// The above code can be written using arrow function
1394-
arr.forEach((element, index)=>{
1394+
arr.forEach((element, index) => {
13951395
console.log(index, element)
13961396
})
13971397
// The above code can be written using arrow function and explicit return
1398-
arr.forEach((element, index) => console.log(index, element);
1398+
arr.forEach((element, index) => console.log(index, element));
13991399
```
1400-
*map*:Iterate an array elements and modify the array elements. It takes a callback function with elements and index parameter and return the modified array.
1400+
*map*: Iterate an array elements and modify the array elements. It takes a callback function with elements and index parameter and return the modified array.
14011401
```js
14021402
const modifiedArray = arr.map(function(element,index){
14031403
return element
@@ -1439,7 +1439,7 @@ const countriesToUpperCase = countries.map((country) => {
14391439
const countriesToUpperCase = countries.map(country => country.toUpperCase());
14401440
*/
14411441
```
1442-
*Filter*:Screen out the itmes which full fill screening requirments
1442+
*Filter*: Filter out itmes which full fill filtering conditions
14431443
14441444
```js
14451445
//Filter countries containing land
@@ -1535,7 +1535,7 @@ console.log(age) // 5
15351535
1. Find out with which letter are there many countries
15361536
15371537
## Document Object Model
1538-
HTML document is structured as a JavaScript Object. Every HTML element has a different properties which can help to manipulate it. It is possible get, create, append or remove HTML elements using JavaScript. Check the examples below. Selecting HTML element using JavaScript is similar to select CSS. To select an HTML element, we use tag name, id, class name. To create an HTML element we use tag name.
1538+
HTML document is structured as a JavaScript Object. Every HTML element has a different properties which can help to manipulate it. It is possible to get, create, append or remove HTML elements using JavaScript. Check the examples below. Selecting HTML element using JavaScript is similar to select CSS. To select an HTML element, we use tag name, id, class name. To create an HTML element we use tag name.
15391539
15401540
### Getting Element
15411541
```html
@@ -1563,8 +1563,8 @@ for(let i = 0; i < allTitles.length; i++){
15631563
}
15641564

15651565
```
1566-
#### Getting elements by tag class name
1567-
*getElementsByClassName()* method returns an HTMLCollection object. An HTMLCollection is an array like list of HTML elements. The length property provides the size of the collection.
1566+
#### Getting elements by class name
1567+
*getElementsByClassName()* method returns an HTMLCollection object. An HTMLCollection is an array like list of HTML elements. The length property provides the size of the collection. It is possible to loop through all the HTMLCollection elements. See the example below
15681568
```js
15691569
const allTitles = document.getElementsByClassName("title");
15701570
console.log(allTitles) //HTMCollections
@@ -1574,21 +1574,21 @@ for(let i = 0; i < allTitles.length; i++){
15741574
}
15751575
```
15761576
#### Getting an element by id
1577-
*getElementsById()* method returns an HTML element.
1577+
*getElementsById()* targets a single HTML element. We pass the id without # as an argument.
15781578
```js
15791579
let firstTitle = document.getElementById("first-title");
15801580
console.log(firstTitle) // <h1>First Title</h1>
15811581
```
15821582
#### Getting elements by using querySelector using tag, class and id:
1583-
*querySelector*: can be used to select html element by its tag name, id or class. If the tag name is used it selects only the first element
1583+
*querySelector*: can be used to select HTML element by its tag name, id or class. If the tag name is used it selects only the first element.
15841584
15851585
```js
15861586
let firstTitle = document.querySelect("h1");// select the first available h2 element
15871587
let firstTitle = document.querySelector("#first-title"); // select id with first-title
15881588
let firstTitle = document.querySelector(".title"); // select the first available h2 element with class title
15891589

15901590
```
1591-
*querySelectorAll*: can be used to select html element by its tag name or class. It return a nodeList which is an array like object which support array methods.
1591+
*querySelectorAll*: can be used to select html element by its tag name or class. It return a nodeList which is an array like object which support array methods. We can use *for loop* or *forEach* to loop through each nodeList elements.
15921592
```js
15931593
const allTitles = document.querySelectAll("h1");
15941594
console.log(allTitles.length) // 4
@@ -1601,17 +1601,27 @@ const allTitles = document.querySelectorAll(".title"); // the same goes for sele
16011601
### Adding attribute
16021602
An attribute is added in the opening tag of HTML which gives additional information about the element. Common HTML attributes: id, class, src, style, href,disabled, title, alt. Lets add id and class for the fourth title.
16031603
1604+
#### Adding attribute using setAttribute
1605+
The *setAttribute()* method set any html attribute. It takes two parameters the type of the attribute and the name of the attribute.
1606+
Let's add class and id attribute for the fourth title.
1607+
16041608
```js
16051609
const titles = document.querySelectorAll("h1");
16061610
titles[3].setAttribut("class", "title");
16071611
titles[3].setAttribut("id", "fourth-title");
1612+
```
1613+
#### Adding attribute without setAttribute
1614+
Some attributes are DOM object property and they can be set directly. For instance id and class
1615+
```js
16081616
//another way to setting an attribute
16091617
titles[3].className = "title";
16101618
titles[3].id = "fourth-title";
1611-
1619+
```
1620+
#### Adding class using classList
1621+
The class list method is a good method to append additional class. It doens't override the original class if a class exists
1622+
```js
16121623
//another way to setting an attribute: append the class, does't over ride
16131624
titles[3].classList.add("title", "header-title")
1614-
16151625
```
16161626
### Adding Text conent
16171627
```js
@@ -1672,9 +1682,43 @@ button.addEventListener("click", e => {
16721682
console.log(e.target);
16731683
});
16741684
```
1685+
### Getting value from an input element
1686+
We usaully fill forms and forms accept data. Form fields are created using input HTML element.
1687+
```html
1688+
<input type ="text" placeholder = "Mass in Killogram" />
1689+
<input type = "text" placeholder = "Height in meters" />
1690+
<button>Calculate BMI</button>
1691+
```
1692+
```js
1693+
const mass = document.querySelector('#mass');
1694+
const height = document.querySelector('#height');
1695+
const button = document.querySelector('button');
1696+
let bmi;
1697+
button.addEventListen('click', ()=>{
1698+
bmi = mass.value * height.value;
1699+
});
1700+
1701+
console.log(bmi)
16751702

1676-
#### Exercises:Document Object Model
16771703

1704+
```
1705+
1706+
#### Exercises:Document Object Model
1707+
```html
1708+
<!-- index.html -->
1709+
<p>First Paragraph</p>
1710+
<p>Second Paragraph</p>
1711+
<p>Third Paragraph</p>
1712+
<p>Fourth Paragraph</p>
1713+
```
1714+
1. Create an index.html file and put four p elementts as above:Get the first paragraph, get all paragraph
1715+
2. Set id and class attribute for all the paragraphs using different attribute setting methods
1716+
3. Change stye of each paragraph using JavaScript(eg. color, background, border, font-size, font-famil)
1717+
4. Select all paragraphs and loop through each elements and give the first and third paragraph a color of color, and the second and the fourth paragraph a red color
1718+
5. Create a div container on HTML document and create 100 numbers dynamically and append to the container div. Put each number in 150px by 150px box. If the number is even the background will be lightgreen else lightblue.
1719+
6. Use the rgb color generator function or hexaColor generator to create 10 divs with random background colors
1720+
1721+
16781722
## Class
16791723
16801724
```js
@@ -1755,3 +1799,101 @@ localStorage.clear();
17551799
17561800
17571801
1802+
1803+
<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
1804+
1805+
<!-- code_chunk_output -->
1806+
1807+
- [JavaScript for Everyone](#javascript-for-everyone)
1808+
- [Table of Contents](#table-of-contents)
1809+
- [Introduction](#introduction)
1810+
- [Setup](#setup)
1811+
- [Adding JavaScript to a web page](#adding-javascript-to-a-web-page)
1812+
- [Inline Script](#inline-script)
1813+
- [Internal script](#internal-script)
1814+
- [External script](#external-script)
1815+
- [Exercises:Setting Up your machine](#exercisessetting-up-your-machine)
1816+
- [Variables](#variables)
1817+
- [Exercise - 1 : Variables](#exercise---1--variables)
1818+
- [Comments](#comments)
1819+
- [Exercise - 2 : Comments](#exercise---2--comments)
1820+
- [Data Types](#data-types)
1821+
- [Exercises - 3 : Data Types](#exercises---3--data-types)
1822+
- [Strings](#strings)
1823+
- [String Concatination](#string-concatination)
1824+
- [Exercise - 4 : String](#exercise---4--string)
1825+
- [Numbers](#numbers)
1826+
- [Math Object](#math-object)
1827+
- [Booleans](#booleans)
1828+
- [Exercise - 5 : Booleans](#exercise---5--booleans)
1829+
- [Undefined](#undefined)
1830+
- [Null](#null)
1831+
- [Exercise - 6 : Data types](#exercise---6--data-types)
1832+
- [Operators](#operators)
1833+
- [Arthimetic Operators](#arthimetic-operators)
1834+
- [Exercises : Arthimetic Operators:](#exercises--arthimetic-operators)
1835+
- [Logical Operators](#logical-operators)
1836+
- [Exercises: Logical Operators](#exercises-logical-operators)
1837+
- [Comparison Operators](#comparison-operators)
1838+
- [Exercise - 7 : Comparison Operators](#exercise---7--comparison-operators)
1839+
- [Conditionals](#conditionals)
1840+
- [If](#if)
1841+
- [If Else](#if-else)
1842+
- [If Else if else](#if-else-if-else)
1843+
- [Switch](#switch)
1844+
- [Ternary Operators](#ternary-operators)
1845+
- [Exercise - 8 : Conditionals](#exercise---8--conditionals)
1846+
- [Loops](#loops)
1847+
- [For Loop](#for-loop)
1848+
- [While loop](#while-loop)
1849+
- [Do while loop](#do-while-loop)
1850+
- [Exercises:Loops](#exercisesloops)
1851+
- [Arrays](#arrays)
1852+
- [Exercise - 9 : Arrays](#exercise---9--arrays)
1853+
- [More on Arrays](#more-on-arrays)
1854+
- [Exercise -10 : Array Methods](#exercise--10--array-methods)
1855+
- [Functions](#functions)
1856+
- [Function Declaration](#function-declaration)
1857+
- [Function Expression](#function-expression)
1858+
- [Anonymous Function](#anonymous-function)
1859+
- [Arrow Function](#arrow-function)
1860+
- [Arrow Function vs Declaration Function](#arrow-function-vs-declaration-function)
1861+
- [Exercise - 10 : Functions](#exercise---10--functions)
1862+
- [Object](#object)
1863+
- [Object Methods:](#object-methods)
1864+
- [Date Object](#date-object)
1865+
- [Exercises:](#exercises)
1866+
- [Exercises:Objects](#exercisesobjects)
1867+
- [Functional Programming](#functional-programming)
1868+
- [Exercises:](#exercises-1)
1869+
- [Document Object Model](#document-object-model)
1870+
- [Getting Element](#getting-element)
1871+
- [Getting elements by tag name](#getting-elements-by-tag-name)
1872+
- [Getting elements by class name](#getting-elements-by-class-name)
1873+
- [Getting an element by id](#getting-an-element-by-id)
1874+
- [Getting elements by using querySelector using tag, class and id:](#getting-elements-by-using-queryselector-using-tag-class-and-id)
1875+
- [Adding attribute](#adding-attribute)
1876+
- [Adding attribute using setAttribute](#adding-attribute-using-setattribute)
1877+
- [Adding attribute without setAttribute](#adding-attribute-without-setattribute)
1878+
- [Adding class using classList](#adding-class-using-classlist)
1879+
- [Adding Text conent](#adding-text-conent)
1880+
- [Adding style](#adding-style)
1881+
- [Creating an Element](#creating-an-element)
1882+
- [Creating elements](#creating-elements)
1883+
- [Appending to a parent element](#appending-to-a-parent-element)
1884+
- [Event Listeners](#event-listeners)
1885+
- [Getting value from an input element](#getting-value-from-an-input-element)
1886+
- [Exercises:Document Object Model](#exercisesdocument-object-model)
1887+
- [Class](#class)
1888+
- [Exercises:Classes](#exercisesclasses)
1889+
- [Regular Expressions](#regular-expressions)
1890+
- [Creating a pattern](#creating-a-pattern)
1891+
- [Creatign a pattern with flags: global flag (g), case insensitive flag(i)](#creatign-a-pattern-with-flags-global-flag-g-case-insensitive-flagi)
1892+
- [RegExp Object Methods](#regexp-object-methods)
1893+
- [Exercises:Regular Expressions](#exercisesregular-expressions)
1894+
- [localStorage](#localstorage)
1895+
- [Exercises:Local Storage](#exerciseslocal-storage)
1896+
- [Cookies](#cookies)
1897+
- [Exercises:Cookies](#exercisescookies)
1898+
1899+
<!-- /code_chunk_output -->

0 commit comments

Comments
 (0)