diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/00-introduction.js b/00-introduction.js deleted file mode 100644 index 067b12c..0000000 --- a/00-introduction.js +++ /dev/null @@ -1,2 +0,0 @@ -console.log ('Welcome JavaScript'); -console.log ('Congratulations! You wrote you first JavaScript code.'); diff --git a/01-variables.js b/01-variables.js deleted file mode 100644 index 39be803..0000000 --- a/01-variables.js +++ /dev/null @@ -1,18 +0,0 @@ -// Declaring different variables of different data types -let firstName = "Asabeneh"; -let lastName = "Yetayeh"; -let location = "Helsinki"; -const country = "Finland"; -let age = 100; -let isMarried = true; -const gravity = 9.81; -const boilingPoint = 100; -const PI = 3.14; -console.log(firstName, lastName, location, country, age, gravity, PI); - -// Variables can also be declaring in one line separated by comma -let name = "Asabeneh", - job = "Teacher", - live = "Finland"; - console.log(name, job, live) - diff --git a/04-string_interpolation.js b/04-string_interpolation.js deleted file mode 100644 index a4588d8..0000000 --- a/04-string_interpolation.js +++ /dev/null @@ -1,28 +0,0 @@ -let firstName = "Asabeneh"; -let letlastName = "Yetayeh"; -var age = 200; // number data type -var country = "Finland"; -var job = 'teacher'; -let lang = 'JavaScript' -var personInfo = `I am ${fullName}.I am a ${age} years old. I am a ${job} and I love teaching. -I live in ${country}.`; //ES6 - String interpolation method -console.log(personInfo); - -let numberOne = 10; -let numberTwo = 90; -console.log(`The sum of ${numberOne} and ${numberTwo} is ${numberOne + numberTwo}.`); -//More Examples -var gravity = 9.81; -var boilingPoint = 100; -var bodyTemp = 37; - -/* - The boiling point of water is 100 oC. - Human body temperatue is 37 oC. - The gravity of earth is 9.81 m/s2. - */ -console.log(`The boiling point of water is ${boilingPoint} oC.\nHuman body temperatue is ${body} oC.\nThe gravity of earth is ${gravity} m / s2.` -); - - - diff --git a/10-if.js b/10-if.js deleted file mode 100644 index f63fb3b..0000000 --- a/10-if.js +++ /dev/null @@ -1,5 +0,0 @@ -//if -let isRaining = true; -if (isRaining) { - console.log("Remember to take your rain coat."); -} diff --git a/11-ifelse.js b/11-ifelse.js deleted file mode 100644 index eb2a7a3..0000000 --- a/11-ifelse.js +++ /dev/null @@ -1,6 +0,0 @@ -//if else -if (isRaining) { - console.log("It is raining. You need a rain coat."); -} else { - console.log("It is not raining. No need for rain coat."); -} diff --git a/12-if-else-if-else.js b/12-if-else-if-else.js deleted file mode 100644 index 8ee96bc..0000000 --- a/12-if-else-if-else.js +++ /dev/null @@ -1,11 +0,0 @@ -// if else if else -let weather = 'sunny'; -if (weather === "rainy") { - console.log("It is raining. You need a rain coat."); -} else if (weather === "cloudy") { - console.log("It might be cold you need a jacket."); -} else if (weather === "sunny") { - console.log("Go out freely."); -} else { - console.log("It is not raining. No need for rain coat."); -} diff --git a/14-switch.js b/14-switch.js deleted file mode 100644 index 06a9486..0000000 --- a/14-switch.js +++ /dev/null @@ -1,47 +0,0 @@ -// Switch -var weather = "cloudy"; -switch (weather) { - case "rainy": - console.log("It is raining. You need a rain coat."); - break; - case "cloudy": - console.log("It might be cold you need a jacket."); - break; - case "sunny": - console.log("Go out freely."); - break; - default: - console.log("It is not raining. No need for rain coat."); - break; -} - -// Swithc More Examples -var dayUserInput = prompt('What day is it ?'); -var day = dayUserInput.toLowerCase(); -switch (day) { - case 'monday': - console.log('Today is Monday'); - break; - case 'tuesday': - console.log('Today is Tuesday'); - break; - case 'wednesday': - console.log('Today is Wednesday'); - break; - case 'thursday': - console.log('Today is Thursday'); - break; - case 'friday': - console.log('Today is Friday'); - break; - case 'saturday': - console.log('Today is Saturday'); - break; - case 'sunday': - console.log('Today is Sunday'); - break; - - default: - console.log('It is not a week day.'); - break; -} \ No newline at end of file diff --git a/15-ternary-operator.js b/15-ternary-operator.js deleted file mode 100644 index 7a8151f..0000000 --- a/15-ternary-operator.js +++ /dev/null @@ -1,2 +0,0 @@ -let isRaining = true; -isRaining ? console.log("You need a rain coat.") : console.log("No need for a rain coat."); diff --git a/16-1.0-array.js b/16-1.0-array.js deleted file mode 100644 index f5fe3e5..0000000 --- a/16-1.0-array.js +++ /dev/null @@ -1,37 +0,0 @@ -const webTechs = [ - "HTML", - "CSS", - "JavaScript", - "React", - "Redux", - "Node", - "MongoDB" -]; -const countries = [ - "Albania", - "Bolivia", - "Canada", - "Denmark", - "Ethiopia", - "Finland", - "Germany", - "Hungary" -]; -const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; -const shoppingCart = [ - "Milk", - "Mango", - "Tomato", - "Potato", - "Avocado", - "Meat", - "Eggs", - "Sugar" -]; -console.log(webTechs); -console.log(webTechs.length); // => to know the size of the array, which is 7 -console.log(webTechs[0]); //--> HTML; -console.log(webTechs[webTechs.length - 1]); //--> MongoDB -console.log(countries); -console.log(numbers); -console.log(shoppingCart); diff --git a/data/melina_trump_speech.txt b/data/melina_trump_speech.txt new file mode 100755 index 0000000..06ec1de --- /dev/null +++ b/data/melina_trump_speech.txt @@ -0,0 +1,33 @@ +Thank you very much. Thank you. You have all been very kind to Donald and me, to our young son Barron, and to our whole family. It's a very nice welcome and we're excited to be with you at this historic convention. I am so proud of your choice for president of the United States, my husband, Donald J. Trump. + +And I can assure you, he is moved by this great honor. The 2016 Republican primaries were fierce and started with many candidates, 17 to be exact, and I know that Donald agrees with me when I mention how talented all of them are. They deserve respect and gratitude from all of us. + +However, when it comes to my husband, I will say that I am definitely biased, and for good reason. + +I have been with Donald for 18 years and I have been aware of his love for this country since we first met. He never had a hidden agenda when it comes to his patriotism, because, like me, he loves this country so much. I was born in Slovenia, a small, beautiful and then-communist country in Central Europe. My sister Ines, who is an incredible woman and a friend, and I were raised by my wonderful parents. My elegant and hard-working mother Amalia introduced me to fashion and beauty. My father Viktor instilled in me a passion for business and travel. Their integrity, compassion and intelligence reflects to this day on me and for my love of family and America. + +From a young age, my parents impressed on me the values that you work hard for what you want in life; that your word is your bond and you do what you say and keep your promise; that you treat people with respect. They taught and showed me values and morals in their daily life. That is a lesson that I continue to pass along to our son, and we need to pass those lessons on to the many generations to follow. Because we want our children in this nation to know that the only limit to your achievements is the strength of your dreams and your willingness to work for them. + +I am fortunate for my heritage, but also for where it brought me today. I traveled the world while working hard in the incredible arena of fashion. After living and working in Milan and Paris, I arrived in New York City 20 years ago, and I saw both the joys and the hardships of daily life. On July 28, 2006, I was very proud to become a citizen of the United States — the greatest privilege on planet Earth. I cannot, or will not, take the freedoms this country offers for granted. But these freedoms have come with a price so many times. The sacrifices made by our veterans are reminders to us of this. I would like to take this moment to recognize an amazing veteran, the great Sen. Bob Dole. And let us thank all of our veterans in the arena today, and those across our great country. We are all truly blessed to be here. That will never change. + +I can tell you with certainty that my husband has been concerned about our country for as long as I have known him. With all of my heart, I know that he will make a great and lasting difference. Donald has a deep and unbounding determination and a never-give-up attitude. I have seen him fight for years to get a project done — or even started — and he does not give up! If you want someone to fight for you and your country, I can assure you, he is the "guy." + +He will never, ever, give up. And, most importantly, he will never, ever, let you down. Donald is, and always has been, an amazing leader. Now, he will go to work for you. His achievements speak for themselves, and his performance throughout the primary campaign proved that he knows how to win. He also knows how to remain focused on improving our country — on keeping it safe and secure. He is tough when he has to be but he is also kind and fair and caring. This kindness is not always noted, but it is there for all to see. That is one reason I fell in love with him to begin with. + +Donald is intensely loyal. To family, friends, employees, country. He has the utmost respect for his parents, Mary and Fred, to his sisters Maryanne and Elizabeth, to his brother Robert and to the memory of his late brother Fred. His children have been cared for and mentored to the extent that even his adversaries admit they are an amazing testament to who he is as a man and a father. There is a great deal of love in the Trump family. That is our bond, and that is our strength. + +Yes, Donald thinks big, which is especially important when considering the presidency of the United States. No room for small thinking. No room for small results. Donald gets things done. + +Our country is underperforming and needs new leadership. Leadership is also what the world needs. Donald wants our country to move forward in the most positive of ways. Everyone wants change. Donald is the only one that can deliver it. We should not be satisfied with stagnation. Donald wants prosperity for all Americans. We need new programs to help the poor and opportunities to challenge the young. There has to be a plan for growth — only then will fairness result. + +My husband's experience exemplifies growth and successful passage of opportunity to the next generation. His success indicates inclusion rather than division. My husband offers a new direction, welcoming change, prosperity and greater cooperation among peoples and nations. Donald intends to represent all the people, not just some of the people. That includes Christians and Jews and Muslims, it includes Hispanics and African Americans and Asians, and the poor and the middle-class. Throughout his career, Donald has successfully worked with people of many faiths and with many nations. + +Like no one else, I have seen the talent, the energy, the tenacity, the resourceful mind, and the simple goodness of heart that God gave to Donald Trump. Now is the time to use those gifts as never before, for purposes far greater than ever before. And he will do this better than anyone else can — and it won't even be close. Everything depends on it, for our cause and for our country. + +People are counting on him — all the millions of you who have touched us so much with your kindness and your confidence. You have turned this unlikely campaign into a movement that is still gaining in strength and number. The primary season, and its toughness, is behind us. Let's all come together in a national campaign like no other. + +The race will be hard-fought, all the way to November. There will be good times and hard times and unexpected turns — it would not be a Trump contest without excitement and drama. But through it all, my husband will remain focused on only one thing: this beautiful country, that he loves so much. + +If I am honored to serve as first lady, I will use that wonderful privilege to try to help people in our country who need it the most. One of the many causes dear to my heart is helping children and women. You judge a society by how it treats its citizens. We must do our best to ensure that every child can live in comfort and security, with the best possible education. As citizens of this great nation, it is kindness, love, and compassion for each other that will bring us together — and keep us together. These are the values Donald and I will bring to the White House. My husband is ready to lead this great nation. He is ready to fight, every day, to give our children the better future they deserve. Ladies and gentlemen, Donald J. Trump is ready to serve and lead this country as the next president of the United States. + +Thank you, God bless you, and God bless America. \ No newline at end of file diff --git a/data/michelle_obama_speech.txt b/data/michelle_obama_speech.txt new file mode 100755 index 0000000..bc59c1b --- /dev/null +++ b/data/michelle_obama_speech.txt @@ -0,0 +1,83 @@ +As you might imagine, for Barack, running for president is nothing compared to that first game of basketball with my brother, Craig. + +I can't tell you how much it means to have Craig and my mom here tonight. Like Craig, I can feel my dad looking down on us, just as I've felt his presence in every grace-filled moment of my life. + +At 6-foot-6, I've often felt like Craig was looking down on me too ... literally. But the truth is, both when we were kids and today, he wasn't looking down on me. He was watching over me. + +And he's been there for me every step of the way since that clear February day 19 months ago, when — with little more than our faith in each other and a hunger for change — we joined my husband, Barack Obama, on the improbable journey that's brought us to this moment. + +But each of us also comes here tonight by way of our own improbable journey. + +I come here tonight as a sister, blessed with a brother who is my mentor, my protector and my lifelong friend. + +I come here as a wife who loves my husband and believes he will be an extraordinary president. + +I come here as a mom whose girls are the heart of my heart and the center of my world — they're the first thing I think about when I wake up in the morning, and the last thing I think about when I go to bed at night. Their future — and all our children's future — is my stake in this election. + +And I come here as a daughter — raised on the South Side of Chicago by a father who was a blue-collar city worker and a mother who stayed at home with my brother and me. My mother's love has always been a sustaining force for our family, and one of my greatest joys is seeing her integrity, her compassion and her intelligence reflected in my own daughters. + +My dad was our rock. Although he was diagnosed with multiple sclerosis in his early 30s, he was our provider, our champion, our hero. As he got sicker, it got harder for him to walk, it took him longer to get dressed in the morning. But if he was in pain, he never let on. He never stopped smiling and laughing — even while struggling to button his shirt, even while using two canes to get himself across the room to give my mom a kiss. He just woke up a little earlier and worked a little harder. + +He and my mom poured everything they had into me and Craig. It was the greatest gift a child can receive: never doubting for a single minute that you're loved, and cherished, and have a place in this world. And thanks to their faith and hard work, we both were able to go on to college. So I know firsthand from their lives — and mine — that the American dream endures. + +And you know, what struck me when I first met Barack was that even though he had this funny name, even though he'd grown up all the way across the continent in Hawaii, his family was so much like mine. He was raised by grandparents who were working-class folks just like my parents, and by a single mother who struggled to pay the bills just like we did. Like my family, they scrimped and saved so that he could have opportunities they never had themselves. And Barack and I were raised with so many of the same values: that you work hard for what you want in life; that your word is your bond and you do what you say you're going to do; that you treat people with dignity and respect, even if you don't know them, and even if you don't agree with them. + +And Barack and I set out to build lives guided by these values, and pass them on to the next generation. Because we want our children — and all children in this nation — to know that the only limit to the height of your achievements is the reach of your dreams and your willingness to work for them. + +And as our friendship grew, and I learned more about Barack, he introduced me to the work he'd done when he first moved to Chicago after college. Instead of heading to Wall Street, Barack had gone to work in neighborhoods devastated when steel plants shut down and jobs dried up. And he'd been invited back to speak to people from those neighborhoods about how to rebuild their community. + +The people gathered together that day were ordinary folks doing the best they could to build a good life. They were parents living paycheck to paycheck; grandparents trying to get by on a fixed income; men frustrated that they couldn't support their families after their jobs disappeared. Those folks weren't asking for a handout or a shortcut. They were ready to work — they wanted to contribute. They believed — like you and I believe — that America should be a place where you can make it if you try. + +Barack stood up that day, and spoke words that have stayed with me ever since. He talked about "The world as it is" and "The world as it should be." And he said that all too often, we accept the distance between the two, and settle for the world as it is — even when it doesn't reflect our values and aspirations. But he reminded us that we know what our world should look like. We know what fairness and justice and opportunity look like. And he urged us to believe in ourselves — to find the strength within ourselves to strive for the world as it should be. And isn't that the great American story? + +It's the story of men and women gathered in churches and union halls, in town squares and high school gyms — people who stood up and marched and risked everything they had — refusing to settle, determined to mold our future into the shape of our ideals. + +It is because of their will and determination that this week, we celebrate two anniversaries: the 88th anniversary of women winning the right to vote, and the 45th anniversary of that hot summer day when [Dr. Martin Luther King Jr.] lifted our sights and our hearts with his dream for our nation. + +I stand here today at the crosscurrents of that history — knowing that my piece of the American dream is a blessing hard won by those who came before me. All of them driven by the same conviction that drove my dad to get up an hour early each day to painstakingly dress himself for work. The same conviction that drives the men and women I've met all across this country: + +People who work the day shift, kiss their kids goodnight, and head out for the night shift — without disappointment, without regret — that goodnight kiss a reminder of everything they're working for. + +The military families who say grace each night with an empty seat at the table. The servicemen and women who love this country so much, they leave those they love most to defend it. + +The young people across America serving our communities — teaching children, cleaning up neighborhoods, caring for the least among us each and every day. + +People like Hillary Clinton, who put those 18 million cracks in the glass ceiling, so that our daughters — and sons — can dream a little bigger and aim a little higher. + +People like Joe Biden, who's never forgotten where he came from and never stopped fighting for folks who work long hours and face long odds and need someone on their side again. + +All of us driven by a simple belief that the world as it is just won't do — that we have an obligation to fight for the world as it should be. + +That is the thread that connects our hearts. That is the thread that runs through my journey and Barack's journey and so many other improbable journeys that have brought us here tonight, where the current of history meets this new tide of hope. + +That is why I love this country. + +And in my own life, in my own small way, I've tried to give back to this country that has given me so much. That's why I left a job at a law firm for a career in public service, working to empower young people to volunteer in their communities. Because I believe that each of us — no matter what our age or background or walk of life — each of us has something to contribute to the life of this nation. + +It's a belief Barack shares — a belief at the heart of his life's work. + +It's what he did all those years ago, on the streets of Chicago, setting up job training to get people back to work and after-school programs to keep kids safe — working block by block to help people lift up their families. + +It's what he did in the Illinois Senate, moving people from welfare to jobs, passing tax cuts for hard-working families, and making sure women get equal pay for equal work. + +It's what he's done in the United States Senate, fighting to ensure the men and women who serve this country are welcomed home not just with medals and parades but with good jobs and benefits and health care — including mental health care. + +That's why he's running — to end the war in Iraq responsibly, to build an economy that lifts every family, to make health care available for every American, and to make sure every child in this nation gets a world class education all the way from preschool to college. That's what Barack Obama will do as president of the United States of America. + +He'll achieve these goals the same way he always has — by bringing us together and reminding us how much we share and how alike we really are. You see, Barack doesn't care where you're from, or what your background is, or what party — if any — you belong to. That's not how he sees the world. He knows that thread that connects us — our belief in America's promise, our commitment to our children's future — is strong enough to hold us together as one nation even when we disagree. + +It was strong enough to bring hope to those neighborhoods in Chicago. + +It was strong enough to bring hope to the mother he met worried about her child in Iraq; hope to the man who's unemployed, but can't afford gas to find a job; hope to the student working nights to pay for her sister's health care, sleeping just a few hours a day. + +And it was strong enough to bring hope to people who came out on a cold Iowa night and became the first voices in this chorus for change that's been echoed by millions of Americans from every corner of this nation. + +Millions of Americans who know that Barack understands their dreams; that Barack will fight for people like them; and that Barack will finally bring the change we need. + +And in the end, after all that's happened these past 19 months, the Barack Obama I know today is the same man I fell in love with 19 years ago. He's the same man who drove me and our new baby daughter home from the hospital 10 years ago this summer, inching along at a snail's pace, peering anxiously at us in the rearview mirror, feeling the whole weight of her future in his hands, determined to give her everything he'd struggled so hard for himself, determined to give her what he never had: the affirming embrace of a father's love. + +And as I tuck that little girl and her little sister into bed at night, I think about how one day, they'll have families of their own. And one day, they — and your sons and daughters — will tell their own children about what we did together in this election. They'll tell them how this time, we listened to our hopes, instead of our fears. How this time, we decided to stop doubting and to start dreaming. How this time, in this great country — where a girl from the South Side of Chicago can go to college and law school, and the son of a single mother from Hawaii can go all the way to the White House – we committed ourselves to building the world as it should be. + +So tonight, in honor of my father's memory and my daughters' future — out of gratitude to those whose triumphs we mark this week, and those whose everyday sacrifices have brought us to this moment — let us devote ourselves to finishing their work; let us work together to fulfill their hopes; and let us stand together to elect Barack Obama president of the United States of America. + +Thank you, God bless you, and God bless America. \ No newline at end of file diff --git a/images/adding_project_to_vscode.png b/images/adding_project_to_vscode.png new file mode 100644 index 0000000..1935860 Binary files /dev/null and b/images/adding_project_to_vscode.png differ diff --git a/images/arithmetic.png b/images/arithmetic.png new file mode 100644 index 0000000..9830916 Binary files /dev/null and b/images/arithmetic.png differ diff --git a/images/array_index.png b/images/array_index.png new file mode 100644 index 0000000..355324e Binary files /dev/null and b/images/array_index.png differ diff --git a/images/assignment_operators.png b/images/assignment_operators.png new file mode 100644 index 0000000..99d51d2 Binary files /dev/null and b/images/assignment_operators.png differ diff --git "a/images/banners/Day -1 \342\200\223 31.png" "b/images/banners/Day -1 \342\200\223 31.png" new file mode 100644 index 0000000..d9a9639 Binary files /dev/null and "b/images/banners/Day -1 \342\200\223 31.png" differ diff --git a/images/banners/day_1_1.png b/images/banners/day_1_1.png new file mode 100644 index 0000000..dd583c7 Binary files /dev/null and b/images/banners/day_1_1.png differ diff --git a/images/banners/day_1_10.png b/images/banners/day_1_10.png new file mode 100644 index 0000000..e063dec Binary files /dev/null and b/images/banners/day_1_10.png differ diff --git a/images/banners/day_1_11.png b/images/banners/day_1_11.png new file mode 100644 index 0000000..0c2d60b Binary files /dev/null and b/images/banners/day_1_11.png differ diff --git a/images/banners/day_1_12.png b/images/banners/day_1_12.png new file mode 100644 index 0000000..232ac85 Binary files /dev/null and b/images/banners/day_1_12.png differ diff --git a/images/banners/day_1_13.png b/images/banners/day_1_13.png new file mode 100644 index 0000000..488f522 Binary files /dev/null and b/images/banners/day_1_13.png differ diff --git a/images/banners/day_1_14.png b/images/banners/day_1_14.png new file mode 100644 index 0000000..4c5a568 Binary files /dev/null and b/images/banners/day_1_14.png differ diff --git a/images/banners/day_1_15.png b/images/banners/day_1_15.png new file mode 100644 index 0000000..e3013f6 Binary files /dev/null and b/images/banners/day_1_15.png differ diff --git a/images/banners/day_1_16.png b/images/banners/day_1_16.png new file mode 100644 index 0000000..d116060 Binary files /dev/null and b/images/banners/day_1_16.png differ diff --git a/images/banners/day_1_17.png b/images/banners/day_1_17.png new file mode 100644 index 0000000..69cf7ae Binary files /dev/null and b/images/banners/day_1_17.png differ diff --git a/images/banners/day_1_18.png b/images/banners/day_1_18.png new file mode 100644 index 0000000..8b69340 Binary files /dev/null and b/images/banners/day_1_18.png differ diff --git a/images/banners/day_1_19.png b/images/banners/day_1_19.png new file mode 100644 index 0000000..2a785c9 Binary files /dev/null and b/images/banners/day_1_19.png differ diff --git a/images/banners/day_1_2.png b/images/banners/day_1_2.png new file mode 100644 index 0000000..0f6eefb Binary files /dev/null and b/images/banners/day_1_2.png differ diff --git a/images/banners/day_1_20.png b/images/banners/day_1_20.png new file mode 100644 index 0000000..befe1fc Binary files /dev/null and b/images/banners/day_1_20.png differ diff --git a/images/banners/day_1_21.png b/images/banners/day_1_21.png new file mode 100644 index 0000000..634d1eb Binary files /dev/null and b/images/banners/day_1_21.png differ diff --git a/images/banners/day_1_22.png b/images/banners/day_1_22.png new file mode 100644 index 0000000..81e33d9 Binary files /dev/null and b/images/banners/day_1_22.png differ diff --git a/images/banners/day_1_23.png b/images/banners/day_1_23.png new file mode 100644 index 0000000..ceb0321 Binary files /dev/null and b/images/banners/day_1_23.png differ diff --git a/images/banners/day_1_24.png b/images/banners/day_1_24.png new file mode 100644 index 0000000..9c8ec46 Binary files /dev/null and b/images/banners/day_1_24.png differ diff --git a/images/banners/day_1_25.png b/images/banners/day_1_25.png new file mode 100644 index 0000000..60a211e Binary files /dev/null and b/images/banners/day_1_25.png differ diff --git a/images/banners/day_1_26.png b/images/banners/day_1_26.png new file mode 100644 index 0000000..f187f2c Binary files /dev/null and b/images/banners/day_1_26.png differ diff --git a/images/banners/day_1_27.png b/images/banners/day_1_27.png new file mode 100644 index 0000000..8637069 Binary files /dev/null and b/images/banners/day_1_27.png differ diff --git a/images/banners/day_1_28.png b/images/banners/day_1_28.png new file mode 100644 index 0000000..1858aca Binary files /dev/null and b/images/banners/day_1_28.png differ diff --git a/images/banners/day_1_29.png b/images/banners/day_1_29.png new file mode 100644 index 0000000..959ee36 Binary files /dev/null and b/images/banners/day_1_29.png differ diff --git a/images/banners/day_1_3.png b/images/banners/day_1_3.png new file mode 100644 index 0000000..1268d2c Binary files /dev/null and b/images/banners/day_1_3.png differ diff --git a/images/banners/day_1_30.png b/images/banners/day_1_30.png new file mode 100644 index 0000000..18a77c4 Binary files /dev/null and b/images/banners/day_1_30.png differ diff --git a/images/banners/day_1_4.png b/images/banners/day_1_4.png new file mode 100644 index 0000000..d5262c6 Binary files /dev/null and b/images/banners/day_1_4.png differ diff --git a/images/banners/day_1_5.png b/images/banners/day_1_5.png new file mode 100644 index 0000000..21bc08c Binary files /dev/null and b/images/banners/day_1_5.png differ diff --git a/images/banners/day_1_6.png b/images/banners/day_1_6.png new file mode 100644 index 0000000..dbea5fd Binary files /dev/null and b/images/banners/day_1_6.png differ diff --git a/images/banners/day_1_7.png b/images/banners/day_1_7.png new file mode 100644 index 0000000..eff8dac Binary files /dev/null and b/images/banners/day_1_7.png differ diff --git a/images/banners/day_1_8.png b/images/banners/day_1_8.png new file mode 100644 index 0000000..ddf9007 Binary files /dev/null and b/images/banners/day_1_8.png differ diff --git a/images/banners/day_1_9.png b/images/banners/day_1_9.png new file mode 100644 index 0000000..1cf688b Binary files /dev/null and b/images/banners/day_1_9.png differ diff --git a/images/become_patreon.png b/images/become_patreon.png new file mode 100644 index 0000000..7de852e Binary files /dev/null and b/images/become_patreon.png differ diff --git a/images/comparison_operators.png b/images/comparison_operators.png new file mode 100644 index 0000000..26ccb91 Binary files /dev/null and b/images/comparison_operators.png differ diff --git a/images/console_log_multipl_arguments.png b/images/console_log_multipl_arguments.png new file mode 100644 index 0000000..f324a90 Binary files /dev/null and b/images/console_log_multipl_arguments.png differ diff --git a/images/date_time_object.png b/images/date_time_object.png new file mode 100644 index 0000000..c5297c7 Binary files /dev/null and b/images/date_time_object.png differ diff --git a/images/day_1.png b/images/day_1.png new file mode 100644 index 0000000..7daf57f Binary files /dev/null and b/images/day_1.png differ diff --git a/images/day_1_1.png b/images/day_1_1.png new file mode 100644 index 0000000..dd583c7 Binary files /dev/null and b/images/day_1_1.png differ diff --git a/images/download_node.png b/images/download_node.png new file mode 100644 index 0000000..f290b20 Binary files /dev/null and b/images/download_node.png differ diff --git a/images/google_chrome.png b/images/google_chrome.png new file mode 100644 index 0000000..af06acd Binary files /dev/null and b/images/google_chrome.png differ diff --git a/images/install_node.png b/images/install_node.png new file mode 100644 index 0000000..e5aecf1 Binary files /dev/null and b/images/install_node.png differ diff --git a/images/javascript_for_everyone.png b/images/javascript_for_everyone.png new file mode 100644 index 0000000..ab02a67 Binary files /dev/null and b/images/javascript_for_everyone.png differ diff --git a/images/js_code_on_chrome_console.png b/images/js_code_on_chrome_console.png new file mode 100644 index 0000000..7d6002c Binary files /dev/null and b/images/js_code_on_chrome_console.png differ diff --git a/images/js_code_vscode.png b/images/js_code_vscode.png new file mode 100644 index 0000000..6e1a661 Binary files /dev/null and b/images/js_code_vscode.png differ diff --git a/images/launched_on_new_tab.png b/images/launched_on_new_tab.png new file mode 100644 index 0000000..ed377dc Binary files /dev/null and b/images/launched_on_new_tab.png differ diff --git a/images/local_storage.png b/images/local_storage.png new file mode 100644 index 0000000..0876852 Binary files /dev/null and b/images/local_storage.png differ diff --git a/images/multiple_script.png b/images/multiple_script.png new file mode 100644 index 0000000..caa067f Binary files /dev/null and b/images/multiple_script.png differ diff --git a/images/opening_chrome_console_shortcut.png b/images/opening_chrome_console_shortcut.png new file mode 100644 index 0000000..eace03f Binary files /dev/null and b/images/opening_chrome_console_shortcut.png differ diff --git a/images/opening_developer_tool.png b/images/opening_developer_tool.png new file mode 100644 index 0000000..6eb33dd Binary files /dev/null and b/images/opening_developer_tool.png differ diff --git a/images/opening_project_on_vscode.png b/images/opening_project_on_vscode.png new file mode 100644 index 0000000..908c8fd Binary files /dev/null and b/images/opening_project_on_vscode.png differ diff --git a/images/paypal_lg.png b/images/paypal_lg.png new file mode 100644 index 0000000..cc2a45a Binary files /dev/null and b/images/paypal_lg.png differ diff --git a/images/raising_syntax_error.png b/images/raising_syntax_error.png new file mode 100644 index 0000000..81f6245 Binary files /dev/null and b/images/raising_syntax_error.png differ diff --git a/images/regex.png b/images/regex.png new file mode 100644 index 0000000..c7116b4 Binary files /dev/null and b/images/regex.png differ diff --git a/images/running_script.png b/images/running_script.png new file mode 100644 index 0000000..deac13d Binary files /dev/null and b/images/running_script.png differ diff --git a/images/scripts_on_vscode.png b/images/scripts_on_vscode.png new file mode 100644 index 0000000..f6257be Binary files /dev/null and b/images/scripts_on_vscode.png differ diff --git a/images/string_indexes.png b/images/string_indexes.png new file mode 100644 index 0000000..cc2f638 Binary files /dev/null and b/images/string_indexes.png differ diff --git a/images/vscode.png b/images/vscode.png new file mode 100644 index 0000000..724fc10 Binary files /dev/null and b/images/vscode.png differ diff --git a/images/vscode_ui.png b/images/vscode_ui.png new file mode 100644 index 0000000..7210a08 Binary files /dev/null and b/images/vscode_ui.png differ diff --git a/readMe.md b/readMe.md index efbb05c..ab8a68b 100644 --- a/readMe.md +++ b/readMe.md @@ -1,37 +1,240 @@ -# JavaScript for Everyone - -![JS](https://cdn-images-1.medium.com/max/1600/1*H-25KB7EbSHjv70HXrdl6w.png) - -## Table of Contents - -1. [Introduction](#introduction) -2. [Setup](#setup) -3. [Variables](#variables) -4. [Data Types](#data-types) -5. [Operators](#operators) -6. [Conditionals](#conditionals) -7. [Arrays](#arrays) -8. [Loops](#loops) -9. [Functions](#functions) -10. [Scope](#scope) -11. [Hoisting](#Hoisting) -12. [Object](#object) -13. [Document Object Model](#document-object-model) -14. [Class](#class) -15. [Call Back and Higher Order Functions](#call-back-and-higher-order-functions) -16. [Functional Programming](#functional-programming) -17. [Destructuring](#destructuring) -18. [Rest and Spread](#rest-and-spread) -19. [Regular Expressions](#regular-expressions) -20. [Local Storage](#local-storage) -21. [Cookies](#cookies) +
+

JavaScript for Everyone

+ + + + + Twitter Follow + + + Author: + Asabeneh Yetayeh
+ January, 2018 +
+
+ +
+ +Support the **author** to create more educational materials +Paypal Logo + +
+ +![JS](./images/javascript_for_everyone.png) +- [Introduction](#introduction) +- [Setup](#setup) +- [Requirements](#requirements) +- [Setup](#setup-1) + - [Install Node.js](#install-nodejs) + - [Browser](#browser) + - [Installing Google Chrome](#installing-google-chrome) + - [Opening Google Chrome Console](#opening-google-chrome-console) + - [Writing Code on browser Console](#writing-code-on-browser-console) + - [Console.log](#consolelog) + - [Console.log with multiple arguments](#consolelog-with-multiple-arguments) + - [Comment](#comment) + - [Syntax](#syntax) + - [Arithmetics](#arithmetics) + - [Code Editor](#code-editor) + - [Installing Visual Studio Code](#installing-visual-studio-code) + - [How to use visual studio code](#how-to-use-visual-studio-code) + - [Adding JavaScript to a web page](#adding-javascript-to-a-web-page) + - [Inline Script](#inline-script) + - [Internal script](#internal-script) + - [External script](#external-script) + - [Exercises:Setting Up your machine](#exercisessetting-up-your-machine) +- [Variables](#variables) + - [Exercise - 1 : Variables](#exercise---1--variables) +- [Comments](#comments) + - [Exercise: Comments](#exercise-comments) +- [Data types](#data-types) + - [Primitive Data Types](#primitive-data-types) + - [Non-Primitive Data Types](#non-primitive-data-types) +- [Numbers](#numbers) + - [Declaring number data types](#declaring-number-data-types) + - [Math Object](#math-object) + - [Random number generator](#random-number-generator) +- [Strings](#strings) + - [String Concatenation](#string-concatenation) + - [Concatenating using addition operator](#concatenating-using-addition-operator) + - [Long Literal Strings](#long-literal-strings) + - [Escape Sequences in string](#escape-sequences-in-string) + - [Template Literals(Template Strings)](#template-literalstemplate-strings) + - [String Methods](#string-methods) +- [Checking Data types and Casting](#checking-data-types-and-casting) + - [Checking data types](#checking-data-types) + - [Changing data type(Casting)](#changing-data-typecasting) + - [String to Int](#string-to-int) + - [String to Float](#string-to-float) + - [Float to Int](#float-to-int) + - [Exercises: Data Types](#exercises-data-types) + - [Exercise: String](#exercise-string) + - [Booleans](#booleans) + - [Exercise: Booleans](#exercise-booleans) + - [Undefined](#undefined) + - [Null](#null) + - [Exercise - 6 : Data types](#exercise---6--data-types) +- [Operators](#operators) + - [Arithmetic Operators](#arithmetic-operators) + - [Exercises : Arithmetic Operators](#exercises--arithmetic-operators) + - [Logical Operators](#logical-operators) + - [Exercises: Logical Operators](#exercises-logical-operators) + - [Comparison Operators](#comparison-operators) + - [Exercise: Comparison Operators](#exercise-comparison-operators) +- [Conditionals](#conditionals) + - [if](#if) + - [if else](#if-else) + - [if else if else](#if-else-if-else) + - [switch](#switch) + - [Ternary Operators](#ternary-operators) + - [Exercise: Conditionals](#exercise-conditionals) + - [While loop](#while-loop) + - [Do while loop](#do-while-loop) + - [Exercises:Loops](#exercisesloops) +- [Arrays](#arrays) + - [Exercise : Arrays](#exercise--arrays) +- [More on Arrays](#more-on-arrays) + - [Exercise -10 : Array Methods](#exercise--10--array-methods) +- [Functions](#functions) + - [Function Declaration](#function-declaration) + - [Function Expression](#function-expression) + - [Anonymous Function](#anonymous-function) + - [Arrow Function](#arrow-function) + - [Arrow Function vs Declaration Function](#arrow-function-vs-declaration-function) + - [Exercise - 10 : Functions](#exercise---10--functions) +- [Object](#object) + - [Object Methods](#object-methods) + - [Date Object](#date-object) + - [Exercises: Date Object](#exercises-date-object) + - [Exercises:Objects](#exercisesobjects) +- [JSON](#json) + - [Converting JSON to JavaScript Object](#converting-json-to-javascript-object) + - [JSON.parse()](#jsonparse) + - [Using a reviver function with JSON.parse()](#using-a-reviver-function-with-jsonparse) + - [Converting Object to JSON](#converting-object-to-json) + - [Using a Filter Array with JSON.stringify](#using-a-filter-array-with-jsonstringify) + - [Exercises](#exercises) + - [Exercises Level 1](#exercises-level-1) + - [Exercises Level 2](#exercises-level-2) +- [Higher Order Function](#higher-order-function) + - [Callback](#callback) + - [Returning function](#returning-function) + - [setting time](#setting-time) + - [setInterval](#setinterval) + - [setTimeout](#settimeout) + - [Exercises Level 3](#exercises-level-3) +- [Functional Programming](#functional-programming) + - [Exercises](#exercises-1) +- [Destructuring and Spread](#destructuring-and-spread) + - [Destructing Arrays](#destructing--arrays) + - [Destructuring Object](#destructuring-object) + - [Renaming during structuring](#renaming-during-structuring) + - [Spread or Rest Operator](#spread-or-rest-operator) + - [Exercise: Destructuring](#exercise-destructuring) +- [Map and Set](#map-and-set) +- [Set](#set) + - [Creating a set](#creating-a-set) + - [Adding an element to a set](#adding-an-element-to-a-set) + - [Deleting an element a set](#deleting-an-element-a-set) + - [Checking an element in the set](#checking-an-element-in-the-set) + - [Clearing the set](#clearing-the-set) +- [Set](#set-1) + - [Creating an empty set](#creating-an-empty-set) + - [Creating set from array](#creating-set-from-array) + - [Adding an element to a set](#adding-an-element-to-a-set-1) + - [Deleting an element a set](#deleting-an-element-a-set-1) + - [Checking an element in the set](#checking-an-element-in-the-set-1) + - [Clearing the set](#clearing-the-set-1) + - [Union of sets](#union-of-sets) + - [Intersection of sets](#intersection-of-sets) + - [Difference of sets](#difference-of-sets) +- [Map](#map) + - [Creating an empty Map](#creating-an-empty-map) + - [Creating an Map from array](#creating-an-map-from-array) + - [Adding values to the Map](#adding-values-to-the-map) + - [Getting a value from Map](#getting-a-value-from-map) + - [Checking key in Map](#checking-key-in-map) + - [Exercises: Set and Map](#exercises-set-and-map) + - [Exercises:Level 1](#exerciseslevel-1) + - [Exercises:Level 2](#exerciseslevel-2) + - [Exercises:Level 3](#exerciseslevel-3) +- [Document Object Model (DOM)](#document-object-model-dom) + - [Getting Element](#getting-element) + - [Getting elements by tag name](#getting-elements-by-tag-name) + - [Getting elements by class name](#getting-elements-by-class-name) + - [Getting an element by id](#getting-an-element-by-id) + - [Getting elements by using querySelector using tag, class and id:](#getting-elements-by-using-queryselector-using-tag-class-and-id) + - [Adding attribute](#adding-attribute) + - [Adding attribute using setAttribute](#adding-attribute-using-setattribute) + - [Adding attribute without setAttribute](#adding-attribute-without-setattribute) + - [Adding class using classList](#adding-class-using-classlist) + - [Adding Text content](#adding-text-content) + - [Adding style](#adding-style) + - [Creating an Element](#creating-an-element) + - [Creating elements](#creating-elements) + - [Appending to a parent element](#appending-to-a-parent-element) + - [Event Listeners](#event-listeners) + - [Getting value from an input element](#getting-value-from-an-input-element) + - [Exercises:Document Object Model](#exercisesdocument-object-model) + - [DOM: Mini Projects](#dom-mini-projects) +- [Classes](#classes) + - [Defining a classes](#defining-a-classes) + - [Class Instantiation](#class-instantiation) + - [Class Constructor](#class-constructor) + - [Default values with constructor](#default-values-with-constructor) + - [Class methods](#class-methods) + - [Properties with initial value](#properties-with-initial-value) + - [getter](#getter) + - [setter](#setter) + - [Static method](#static-method) +- [Inheritance](#inheritance) + - [Overriding methods](#overriding-methods) +- [Exercises](#exercises-2) + - [Exercises Level 1](#exercises-level-1-1) + - [Exercises Level 2](#exercises-level-2-1) + - [Exercises Level 3](#exercises-level-3-1) +- [Regular Expressions](#regular-expressions) + - [RegEx parameters](#regex-parameters) + - [Pattern](#pattern) + - [Flags](#flags) + - [Creating a pattern with RegEx Constructor](#creating-a-pattern-with-regex-constructor) + - [Creating a pattern without RegEx Constructor](#creating-a-pattern-without-regex-constructor) + - [RegExp Object Methods](#regexp-object-methods) + - [Testing for a match](#testing-for--a-match) + - [Array containing all of the match](#array-containing-all-of-the-match) + - [Replacing a substring](#replacing-a-substring) + - [Square Bracket](#square-bracket) + - [Escape character(\\) in RegEx](#escape-character-in-regex) + - [One or more times(+)](#one-or-more-times) + - [Period(.)](#period) + - [Zero or more times(*)](#zero-or-more-times) + - [Zero or one times(?)](#zero-or-one-times) + - [Quantifier in RegEx](#quantifier-in-regex) + - [Cart ^](#cart-) + - [Exact match](#exact-match) +- [💻 Exercises](#-exercises) + - [Exercises: Level 1](#exercises-level-1-2) + - [Exercises: Level 2](#exercises-level-2-2) + - [Exercises: Level 3](#exercises-level-3-2) +- [Async and Await](#async-and-await) +- [localStorage](#localstorage) + - [Setting item to the localStorage](#setting-item-to-the-localstorage) + - [Getting item from localStorage](#getting-item-from-localstorage) + - [Clearing the localStorage](#clearing-the-localstorage) + - [Exercises:Local Storage](#exerciseslocal-storage) +- [Cookies](#cookies) + - [Exercises:Cookies](#exercisescookies) +- [JavaScript Interview Questions](#javascript-interview-questions) + - [JavaScript Tests](#javascript-tests) + - [JavaScript Test 1](#javascript-test-1) + - [JavaScript Test 2](#javascript-test-2) + - [JavaScript Test 3](#javascript-test-3) ## Introduction -Welcome to JavaScript. **_Congratulations_** for deciding to learn JavaScript. -**_JavaScript for Everone_** is a guide for both beginner and advanced JavaScript developers. +**_JavaScript for Everyone_** is a guide for both beginners and advanced JavaScript developers. Welcome to JavaScript. **_Congratulations_** for deciding to learn JavaScript, the language of the browser. -In this step by step tutorial, I will teach you JavaScript, the most popular programming language in the history of mankind. +In this step by step tutorial, you will learn JavaScript, the most popular programming language in the history of mankind. You use JavaScript **_to add interactivity to websites, to develop mobile apps, desktop applications, games_** and nowadays JavaScript can be used for **_machine learning_** and **_AI_**. **_JavaScript (JS)_** has increased in popularity in recent years and has been the leading programming language for four consecutive years and is the most used programming language on @@ -42,19 +245,211 @@ Github. First thing first, lets install text or code editor. Install code editor, it could be [vscode](https://code.visualstudio.com/), [atom](https://atom.io/), [bracket](http://brackets.io/), [notepad++](https://notepad-plus-plus.org/) or others. I recommend vscode. Install either [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/en-US/firefox/new/?v=b) if you didn't have yet. -## Adding JavaScript to a web page -JavaScript can be added to a web pages in three ways: +If you want help, you may join the [telegram](https://t.me/JavaScriptforEveryone) channel. + +## Requirements + +No prior knowledge of programming is required to follow this guide. You need only: + +1. Motivation +2. Computer +3. Internet +4. Browser +5. Code Editor + +## Setup + +I believe you have the motivation and a strong desire to be a developer, computer and Internet. If you have those, then you have everything. + +### Install Node.js + +You may not need it right now but you may need it for later. Install [node.js](https://nodejs.org/en/). + +![Node download](images/download_node.png) + +After downloading double click and install + + ![Install node](images/install_node.png) + +We can check if node is installed in our local machine by opening our device terminal or command prompt. + +```sh +asabeneh $ node -v +v12.14.0 +``` + +I am using node version 12.14.0, which is the recommended version of node. + +### Browser + +There are many browsers out there. However, I strongly recommend Google Chrome. + +#### Installing Google Chrome + +Install [google chrome](https://www.google.com/chrome/) if you do not have one yet. We can write small JavaScript code on the browser console, but we do not use the browser console to develop applications. + +![Google Chrome](images/google_chrome.png) + +#### Opening Google Chrome Console + +You can open Google Chrome either by clicking three dots at the top right corner of the Chrome browser or using a shortcut. I prefer using shortcuts. + +![Opening chrome](images/opening_developer_tool.png) + +To open the Chrome console using a short cut. + +```sh +Mac +Command+Option+I + +Windows: +Ctl+Shift+I +``` + +![Opening console](images/opening_chrome_console_shortcut.png) + +After you open the Google Chrome console, try to explore the marked buttons. We will spend most of the time on the Console part. The Console is the place where your JavaScript code goes. The Google Console V8 engine changes your JavaScript code to machine code. +Let us write a JavaScript code on the Google Chrome console: + +![write code on console](./images/js_code_on_chrome_console.png) + +#### Writing Code on browser Console + +We can write any JavaScript code on the Google console or any browser console. However, for this challenge, we only focus on Google Chrome console. Open the console using: + +```sh +Mac +Command+Option+I + +Windows: +Ctl+Shift+I +``` + +##### Console.log + +To write our first JavaScript code, we used a builtin function **console.log()**. We passed an argument as input data, and the function displays the output. We passed 'Hello, World' as input data or argument in the console.log() function. + +```js +console.log('Hello, World!') +``` + +##### Console.log with multiple arguments + +The console.log(param1, param2, param3), can take multiple arguments. + +![console log multiple arguments](./images/console_log_multipl_arguments.png) + +```js +console.log('Hello', 'World', '!') +console.log('HAPPY', 'NEW', 'YEAR', 2020) +console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript') +``` + +As you can see from the above snippet code, *console.log()* can take multiple arguments. + +Congratulations! You wrote your first JavaScript code using *console.log()*. + +##### Comment + +We add comments to our code. Comments are very important to make code more readable and to leave remarks in our code. JavaScript does not execute the comment part of our code. Any text starts with // in JavaScript is a comment or anything enclose like this /* */ is a comment. + +**Example: Single Line Comment** + + // This is the first comment + // This is the second comment + // I am a single line comment + +**Example: Multiline Comment** + + /* + This is a multiline comment + Multiline comments can take multiple lines + JavaScript is the language of the web + */ + +##### Syntax + +JavaScript is a programming language. As a result, it has its syntax like other programming languages. If we do not write a syntax that JavaScript understands, it will raise different types of errors. We will explore different kinds of JavaScript errors later. For now, let us see syntax errors. + +![Error](images/raising_syntax_error.png) + +I made a deliberate mistake. As a result, the console raises a syntax error. Actually, the syntax is very informative. It informs what type of mistake we made. By reading the error feedback guideline, we can correct the syntax and fix the problem. The process of identifying and removing errors from a program is called debugging. Let us fix the errors: + +```js +console.log("Hello, World!") +console.log('Hello, World!') +``` + +So far, we saw how to display text using a *console.log()*. If we are printing text or string using *console.log()*, the text has to be under the single, double, or backtick. +**Example:** + +```js +console.log("Hello, World!") +console.log('Hello, World!') +console.log(`Hello, World!`) +``` + +#### Arithmetics + +Now, let us practice more writing JavaScript codes using *console.log()* on google chrome console for number data types. +In addition to the text, we can also do mathematical calculations using JavaScript. Let us do the following simple calculations. + +![Arithmetic](images/arithmetic.png) + +```js +console.log(2 + 3) // Addition +console.log(3 - 2) // Subtraction +console.log(2 * 3) // Multiplication +console.log(3 / 2) // Division +console.log(3 % 2) // Modulus - finding remainder +console.log(3 ** 2) // Exponential +``` + +### Code Editor + +We can write our codes on the browser console, but it won't be for bigger projects. In a real working environment, developers use different code editors to write their codes. In this 30 days python JavaScript challenge, we will use visual studio code. + +#### Installing Visual Studio Code + +Visual studio code is a very popular open-source text editor. I would recommend to [download](https://code.visualstudio.com/) visual studio code, but if you are in favor of other editors, feel free to follow with what you have. + +![Vscode](images/vscode.png) + +If you installed visual studio code, let us start using it. + +#### How to use visual studio code + +Open the visual studio code by double-clicking the visual studio icon. When you open it, you will get this kind of interface. Try to interact with the labeled icons. + +![Vscode ui](./images/vscode_ui.png) + +![Vscode add project](./images/adding_project_to_vscode.png) + +![Vscode open project](./images/opening_project_on_vscode.png) + +![script file](images/scripts_on_vscode.png) + +![running script](./images/running_script.png) + +![coding running](./images/launched_on_new_tab.png) + + +### Adding JavaScript to a web page + +JavaScript can be added to a web page in three ways: + - **_Inline script_** - **_Internal script_** - **_External script_** -The following sections shows different ways of adding JavaScript code to your web page. -### Inline Script +The following sections show different ways of adding JavaScript code to your web page. + +#### Inline Script -Create a folder on your desktop or in any location and create an **_index.html_** file. Then paste the following code and open it in a browser, either in [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/en-US/firefox/new/?v=b). +Create a folder on your desktop or in any location and create an **_index.html_** file in your folder. Then paste the following code and open it in a browser, either in [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/en-US/firefox/new/?v=b). ```html - + JavaScript for Everyone @@ -65,11 +460,31 @@ Create a folder on your desktop or in any location and create an **_index.html_* ``` -### Internal script -Internal script can be written in the _head_ or the _body_ but it is preferrable to put it on the body of the html document. +#### Internal script + +Internal script can be written in the _head_ or the _body_ but it is preferred to put it on the body of the html document. + +- Internal script at the head + +```html + + + + JavaScript for Everyone + + + + + + +``` + +- Internal script at the body ```html - + JavaScript for Everyone @@ -82,48 +497,114 @@ Internal script can be written in the _head_ or the _body_ but it is preferrable ``` -### External script +#### External script + +The external script link can be on the head or body but it is preferred to put it in the body. + +- External script at the head + +```html + + + + JavaScript for Everyone + + + + + + JavaScript for Everyone - //it could be in header or in the body // Here is the recommended place to - put the script + //it could be in the header or in the body + // Here is the recommended place to put the script - + , < >=, <=, !=, !==,===. - Which are true or which are false ? - 1. 4 > 3 - 1. 4 >= 3 - 1. 4 < 3 - 1. 4 <= 3 - 1. 4 == 4 - 1. 4 === 4 - 1. 4 != 4 - 1. 4 !== 4 - 1. 4 != '4' - 1. 4 == '4' - 1. 4 === '4' +#### Random number generator -### Undefined +The JavaScript Math Object has a random() method number generator which generates number from 0 to 0.999999999... ```js -let firstName; -console.log(firstName); //not defined, because it is not assigned to a value yet +let randomNum = Math.random() // generates 0 to 0.999 ``` -### Null +Now, let us see how we can use random() method to generate a random number between 0 and 10 inclusive. ```js -let empty = null; -console.log(empty); // -> null , means no value -``` +let randomNum = Math.random() // generates 0 to 0.999 +let numBtnZeroAndTen = randomNum * 11 -#### Exercise - 6 : Data types +console.log(numBtnZeroAndTen) // this gives: min 0 and max 10.99 -String, number, boolean, null, undefined and symbol(ES6) are JavaScript primitive data types. +let randomNumRoundToFloor = Math.floor(numBtnZeroAndTen) +console.log(randomNumRoundToFloor) // this gives between 0 and 10 +``` -1. The JavaScript typeof operator uses to check different data types. Check the data type of each variables from question number 1. +## Strings -## Operators +Strings are texts, which are under **_single_** or **_double_** quote. To declare a string, we need a variable name, assignment operator, a value under a single quote, double-quote, or backtick. +Lets' see some examples of string: -### Arthimetic Operators +```js +let space = ' ' // an empty space string +let firstName = 'Asabeneh' +let lastName = 'Yetayeh' +let country = 'Finland' +let city = 'Helsinki' +let language = 'JavaScript' +let job = 'teacher' +``` -Arthimetic operators are mathematical operators:+, -, _, /, _ +### String Concatenation + +Connect two or more strings together is called concatenation. ```js -let numOne = 4; -let numTwo = 3; -let sum = numOne + numTwo; -let diff = numOne - numTwo; -let mult = numOne * numTwo; -let div = numOne / numTwo; -let remainder = numOne % numTwo; -console.log(sum, diff, mult, div, remainder); // ->7,1,12,1.33,1 +// Declaring different variables of different data types +let space = ' ' +let firstName = 'Asabeneh' +let lastName = 'Yetayeh' +let country = 'Finland' +let city = 'Helsinki' +let language = 'JavaScript' +let job = 'teacher' +``` -let PI = 3.14; -let radius = 100; // length in meter +```js +let fullName = firstName + space + lastName; // concatenation, merging two string together. +console.log(fullName); +``` + +```sh +Asabeneh Yetayeh +``` -const gravity = 9.81; // in m/s2 -let mass = 72; // in Killogram -const boilingPoint = 100; // temperature in oC, boiling point of water -const bodyTemp = 37; // body temperature in oC +We can concatenate string in different ways. -//Lets calculate area of a circle -const areaOfCircle = PI * radius * radius; -console.log(areaOfCircle); // -> 314 m -// Lets calculate weight of a substance -const weight = mass * gravity; -console.log(weigth); // -> 706.32 N(Newton) +#### Concatenating using addition operator -//Concatinating string with numbers using string interpolation -/* - The boiling point of water is 100 oC. - Human body temperatue is 37 oC. - The gravity of earth is 9.81 m/s2. - */ -console.log( - `The boiling point of water is ${boilingPoint} oC.\nHuman body temperatue is ${body} oC.\nThe gravity of earth is ${gravity} m / s2.` -); +Concatenating using the addition operator is an old way. This way of concatenating is tedious and error-prone. It is good to know how to concatenate this way, but I strongly suggest to use the second way. + +```js +// Declaring different variables of different data types +let space = ' ' +let firstName = 'Asabeneh' +let lastName = 'Yetayeh' +let country = 'Finland' +let city = 'Helsinki' +let language = 'JavaScript' +let job = 'teacher' +let age = 250 +let fullName = firstName + space + lastName + +let personInfoOne = fullName + '. I am ' + age + '. I live in ' + country; // ES5 + +console.log(personInfoOne) ``` -#### Exercises : Arthimetic Operators: +```sh +Asabeneh Yetayeh. I am 250. I live in Finland +``` -JavaScript arithmetic operators are addition(+), subtraction(-), multiplication(\*), division(/), modulus(%), increment(++) and decrement(--). +#### Long Literal Strings + +A string could be a single character or paragraph or a page. If the string length is too big it does not fit in one line. We can use the backslash character (\\) at the end of each line to indicate that the string will continue on the next line. +**Example:** ```js -let operandOne = 4; -let operandTwo = 3; +const paragraph = "My name is Asabeneh Yetayeh. I live in Finland, Helsinki.\ +I am a teacher and I love teaching. I teach HTML, CSS, JavaScript, React, Redux, \ +Node.js, Python, Data Analysis and D3.js for anyone who is interested to learn. \ +In the end of 2019, I was thinking to expand my teaching and to reach \ +to global audience and I started a Python challenge from November 20 - December 19.\ +It was one of the most rewarding and inspiring experience.\ +Now, we are in 2020. I am enjoying preparing the 30DaysOfJavaScript challenge and \ +I hope you are enjoying too." +console.log(paragraph) ``` -Using the above operands apply different JavaScript arithmetic operators +#### Escape Sequences in string -### Logical Operators +In JavaScript and other programming language \ followed by some characters is an escape sequence. Let's see the most common escape characters: -The following symbols are the common logical operators: -&&(ampersand) , ||(pipe) and !(negation). -&& gets true only if the two operands are true. -|| gets true either of the operand is true. -! negates true to false, false to true. +- \n: new line +- \t: Tab means(8 spaces) +- \\\\: Back slash +- \\': Single quote (') +- \\":Double quote (") + +```js +console.log('I hope every one is enjoying the 30 Days Of JavaScript challenge.\nDo you ?') // line break +console.log('Days\tTopics\tExercises') +console.log('Day 1\t3\t5') +console.log('Day 2\t3\t5') +console.log('Day 3\t3\t5') +console.log('Day 4\t3\t5') +console.log('This is a back slash symbol (\\)') // To write a back slash +console.log('In every programming language it starts with \"Hello, World!\"') +console.log("In every programming language it starts with \'Hello, World!\'") +console.log('The saying \'Seeing is Believing\' is\'t correct in 2020') +``` + +#### Template Literals(Template Strings) + +To create a template string, we use two backticks. We can inject data as expression inside a template string. To inject data, we enclose the expression with a curly bracket({}) followed by a $ sign. See the syntax below. ```js -//&& ampersand example -const check = 4 > 3 && 10 > 5; // true and true -> true -const check = 4 > 3 && 10 < 5; // true and false -> false -const check = 4 < 3 && 10 < 5; // false and false -> false -//|| pipe or, example -const check = 4 > 3 || 10 > 5; // true and true -> true -const check = 4 > 3 || 10 < 5; // true and false -> true -const check = 4 < 3 || 10 < 5; // false and false -> false -//! Negation examples -let check = 4 > 3; // -> true -let check = !(4 > 3); // -> false -let isLightOn = true; -let isLightOff = !isLightOn; // -> false -let isMarried = !false; // -> true +//Syntax +`String literal text` +`String literal text ${expression}` ``` -#### Exercises: Logical Operators +**Example: 1** -Which are true or which are false ? +```js +console.log(`The sum of 2 and 3 is 5`) // statically writing the data +let a = 2 +let b = 3 +console.log(`The sum of ${a} and ${b} is ${a + b}`) // injecting the data dynamically +``` -1. 4 > 3 && 10 < 12 -1. 4 > 3 && 10 > 12 -1. 4 > 3 || 10 < 12 -1. 4 > 3 || 10 > 12 -1. !(4 > 3) -1. !(4 < 3) -1. !(false) -1. !(4 > 3 && 10 < 12) -1. !(4 > 3 && 10 > 12) -1. !(4 === '4') +**Example:2** -### Comparison Operators +```js +let firstName = 'Asabeneh' +let lastName = 'Yetayeh' +let country = 'Finland' +let city = 'Helsinki' +let language = 'JavaScript' +let job = 'teacher' +let age = 250 +let fullName = firstName + ' ' + lastName + +let personInfoTwo = `I am ${fullName}. I am ${age}. I live in ${country}.` //ES6 - String interpolation method +let personInfoThree = `I am ${fullName}. I live in ${city}, ${country}. I am a ${job}. I teach ${language}.` +console.log(personInfoTwo) +console.log(personInfoThree) +``` + +```sh +I am Asabeneh Yetayeh. I am 250. I live in Finland. +I am Asabeneh Yetayeh. I live in Helsinki, Finland. I am a teacher. I teach JavaScript. +``` + +Using a string template or string interpolation method, we can add expression, which could be a value or some operations(comparison, arithmetic operations, ternary operation). ```js -4 > 3; -4 >= 4; -4 < 3; -4 <= 3; -4 != 3; -4 !== "4"; -4 == "4"; -4 === "4"; -4 === 4; +let a = 2 +let b = 3 +console.log(`${a} is greater than ${b}: ${a > b}`) ``` -#### Exercise - 7 : Comparison Operators +```sh +2 is greater than 3: false +``` -Boolean value is either true or false. Any comparison return a boolean either true or false. -Use all the following comparison operators to compare the following values: >, < >=, <=, !=, !==,===. -Which are true or which are false ? +### String Methods -1. 4 > 3 -1. 4 >= 3 -1. 4 < 3 -1. 4 <= 3 -1. 4 == 4 -1. 4 === 4 -1. 4 != 4 -1. 4 !== 4 -1. 4 != '4' -1. 4 == '4' -1. 4 === '4' +Everything in JavaScript is an object. A string is a primitive data type that means we can not modify once it is created. The string object has many string methods. There are different string methods that can help us to work with strings. -## Conditionals +1. *length*: The string *length* method returns the number of characters in a string included empty space. + **Example:** -#### If + ```js + let js = 'JavaScript' + console.log(js.length) // 10 + let firstName = 'Asabeneh' + console.log(firstName.length) // 8 + ``` + +2. *Accessing characters in a string*: We can access each character in a string using its index. In programming, counting starts from 0. The first index of the string is zero, and the last index is one minus the length of the string. + + ![Accessing sting by index](./images/string_indexes.png) + +Let us access different characters in 'JavaScript' string. ```js -if (condition) { - //code goes here -} +let string = 'JavaScript' +let firstLetter = string[0] -let isRaining = true; -if (isRaining) { - console.log("Remember to take your rain coat."); -} +console.log(firstLetter) // J + +let secondLetter = string[1] // a +let thirdLetter = string[2] +let lastLetter = string[9] + +console.log(lastLetter) // t + +let lastIndex = string.length - 1 + +console.log(lastIndex) // 9 +console.log(string[lastIndex]) // t ``` -#### If Else +3. *toUpperCase()*: this method changes the string to uppercase letters. ```js -if (condition) { - // if the condition meets -} else { - // if condition doesn't meet -} -let isRaining = true; -if (isRaining) { - console.log("You need a rain coat."); -} else { - console.log("No need for a rain coat."); -} +let string = 'JavaScript' + +console.log(string.toUpperCase()) // JAVASCRIPT + +let firstName = 'Asabeneh' + +console.log(firstName.toUpperCase()) // ASABENEH + +let country = 'Finland' + +console.log(country.toUpperCase()) // FINLAND ``` -#### If else if else +4. *toLowerCase()*: this method changes the string to lowercase letters. ```js -// if else if else -let weather = "sunny"; -if (weather === "rainy") { - console.log("You need a rain coat."); -} else if (weather === "cloudy") { - console.log("It might be cold, you need a jacket."); -} else if (weather === "sunny") { - console.log("Go out freely."); -} else { - console.log("No need for rain coat."); -} -``` +let string = 'JavasCript' -#### Switch +console.log(string.toLowerCase()) // javascript -Switch an alternative for if else if else +let firstName = 'Asabeneh' -```js -var weather = "cloudy"; -switch (weather) { - case "rainy": - console.log("You need a rain coat."); - break; - case "cloudy": - console.log("It might be cold, you need a jacket."); - break; - case "sunny": - console.log("Go out freely."); - break; - default: - console.log(" No need for rain coat."); - break; -} -// Switch More Examples -var dayUserInput = prompt("What day is it ?"); -var day = dayUserInput.toLowerCase(); -switch (day) { - case "monday": - console.log("Today is Monday"); - break; - case "tuesday": - console.log("Today is Tuesday"); - break; - case "wednesday": - console.log("Today is Wednesday"); - break; - case "thursday": - console.log("Today is Thursday"); - break; - case "friday": - console.log("Today is Friday"); - break; - case "saturday": - console.log("Today is Saturday"); - break; - case "sunday": - console.log("Today is Sunday"); - break; +console.log(firstName.toLowerCase()) // asabeneh - default: - console.log("It is not a week day."); - break; -} +let country = 'Finland' + +console.log(country.toLowerCase()) // finland ``` -#### Ternary Operators +5. *substr()*: It takes two arguments, the starting index and number of characters to slice. -Another way to write conditionals is using ternary operators. +```js +let string = 'JavaScript' +console.log(string.substr(4,6)) // Script + +let country = 'Finland' +console.log(country.substr(3, 4)) // land +``` + +6. *substring()*: It takes two arguments, the starting index and the stopping index but it doesn't include the stopping index. ```js -let isRaining = true; -isRaining - ? console.log("You need a rain coat.") - : console.log("No need for a rain coat."); +let string = 'JavaScript' + +console.log(string.substring(0,4)) // Java +console.log(string.substring(4,10)) // Script +console.log(string.substring(4)) // Script + +let country = 'Finland' + +console.log(country.substring(0, 3)) // Fin +console.log(country.substring(3, 7)) // land +console.log(country.substring(3)) // land ``` -#### Exercise - 8 : Conditionals +7. *split()*: The split method splits a string at a specified place. -1. Get user input using prompt(“Enter your age:”). If user is 18 or older , give feedback:You are old enough to drive but if not 18 give feedback to wait for the years he supposed to wait for. - Output: - ```sh - Enter your age: 30 - You are old enough to drive. - ``` - Output: - ```sh - Enter your age:15 - You are left with 3 years to drive. - ``` -1. Compare the values of myAge and yourAge using if … else. Based on the comparison log to console who is older (me or you). Use prompt(“Enter your age:”) to get the age as input. - Output: - ```sh - Enter your age: 30 - You are 5 years older than me. - ``` -1. If a is greater than b return a is greater than b else a is less than b. - Output: - `sh let a = 4; let b = 3; 4 is greater than 3` -1. Write a code which give grade students according to theirs scores: - - 80-100, A - - 70-89, B - - 60-69, C - - 50-59, D - - 0 -49, F -1. Check if the season is Autumn, Winter, Spring or Summer. - If the user input is: - - September, October or November, the season is Autumn. - - December, January or February, the season is Winter. - - March, April or May, the season is Spring - - June, July or August, the season is Summer +```js +let string = '30 Days Of JavaScript' -## Loops +console.log(string.split()) // ["30 Days Of JavaScript"] +console.log(string.split(' ')) // ["30", "Days", "Of", "JavaScript"] -In programming languages to carry out repetitive task we use different kinds of loop. The following examples are the commonly used loops. +let firstName = 'Asabeneh' -### For Loop +console.log(firstName.split()) // ["Asabeneh"] +console.log(firstName.split('')) // ["A", "s", "a", "b", "e", "n", "e", "h"] + +let countries = 'Finland, Sweden, Norway, Denmark, and Iceland' + +console.log(countries.split(',')) // ["Finland", " Sweden", " Norway", " Denmark", " and Iceland"] +console.log(countries.split(', ')) //  ["Finland", "Sweden", "Norway", "Denmark", "and Iceland"] +``` + +8. *trim()*: Removes trailing space in the beginning or the end of a string. ```js -//For loop structure -for(initialization, condition, increment/decrement){ - // code goes here -} -for(let i = 0; i <= 5; i++){ - console.log(i) -} +let string = ' 30 Days Of JavaScript ' +console.log(string) +console.log(string.trim(' ')) + +let firstName = ' Asabeneh ' + +console.log(firstName) +console.log(firstName.trim()) ``` -### While loop +```sh + 30 Days Of JavasCript +30 Days Of JavasCript + Asabeneh +Asabeneh +``` + +9. *includes()*: It takes a substring argument and it check if substring argument exists in the string. *includes()* returns a boolean. It checks if a substring exist in a string and it returns true if it exists and false if it doesn't exist. ```js -let i = 0; -while (i <= 5) { - console.log(i); - i++; -} +let string = '30 Days Of JavaScript' + +console.log(string.includes('Days')) // true +console.log(string.includes('days')) // false +console.log(string.includes('Script')) // true +console.log(string.includes('script')) // false +console.log(string.includes('java')) // false +console.log(string.includes('Java')) // true + +let country = 'Finland' + +console.log(country.includes('fin')) // false +console.log(country.includes('Fin')) // true +console.log(country.includes('land')) // true +console.log(country.includes('Land')) // false ``` -### Do while loop +10. *replace()*: takes to parameter the old substring and new substring. ```js -let i = 0; -do { - console.log(i); - i++; -} while (i <= 5); +string.replace(oldsubstring, newsubstring) ``` -#### Exercises:Loops +```js +let string = '30 Days Of JavaScript' +console.log(string.replace('JavaScript', 'Python')) // 30 Days Of Python -1. Iterate 0 to 10 using for loop, do the same using while and do while loop. -1. Iterate 10 to 0 using for loop, do the same using while and do while loop. -1. Write a loop that makes seven calls to console.log to output the following triangle: - ```js - # - ## - ### - #### - ##### - ###### - ####### - ``` -1. Iterate the array, ['HTML', 'CSS', 'JavaScript'] using a for loop and print out the items. -1. Use for loop to iterate from 0 to 100 and print only even numbers -1. Use for loop to iterate from 0 to 100 and print only odd numbers -1. Use for loop to iterate from 0 to 100 and print and print the sum of all numbers. - ```js - The sum all numbers is 5050. - ``` -1. Use for loop to iterate from 0 to 100 and print the sum of all evens and the sum of all odds. - ```js - The sum of all evens is 2550. And the sum of all odds is 2500. - ``` +let country = 'Finland' +console.log(country.replace('Fin', 'Noman')) // Nomanland +``` -## Arrays +11. *charAt()*: Takes index and it returns the value at that index -In contrast to variables array can store _multiple values_. Each value in an array has an _index_ and each index has _a reference in a memory address_. Each value can be accessed by using their _indexes_. The index of an array starts from _zero_ and the last element is less by one from the lenght of the array. +```js +string.charAt(index) +``` ```js -const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // set of numbers -console.log(numbers.length) // => to know the size of the array, which is 6 -console.log(numbers) // -> [0, 3.14, 9.81, 37, 98.6, 100] -console.log(numbers[0]) // -> 0 -console.log(numbers[5]) // -> 100 -let lastIdex = numbers.length - 1; -console.log(numbers[lastIndex]) -> 100 -const webTechs = [ - "HTML", - "CSS", - "JavaScript", - "React", - "Redux", - "Node", - "MongoDB" -]; // List of web technologies -console.log(webTechs) // all the array items -console.log(webTechs.length) // => to know the size of the array, which is 7 -console.log(webTechs[0]) // -> HTML -console.log(webTechs[6]) // -> MongoDB -let lastIdex = webTechs.length - 1; -console.log(webTechs[lastIndex]) -> MongoDB -const countries = [ - "Albania", - "Bolivia", - "Canada", - "Denmark", - "Ethiopia", - "Finland", - "Germany", - "Hungary", - "Ireland", - "Japan", - "Kenya" -]; // List of countries; -console.log(countries) // -> all countries in array -console.log(countries[0]) // -> Albania -console.log(countries[10]) // -> Kenya -let lastIdex = countries.length - 1; -console.log(countries[lastIndex]) -> // Kenya +let string = '30 Days Of JavaScript' +console.log(string.charAt(0)) // 3 -const shoppingCart = [ - "Milk", - "Mango", - "Tomato", - "Potato", - "Avocado", - "Meat", - "Eggs", - "Sugar" -]; // List of food products -console.log(shoppingCart) // -> all shoppingCart in array -console.log(shoppingCart[0]) // -> Milk -console.log(shoppingCart[7]) // -> Sugar -let lastIdex = shoppingCart.length - 1; -console.log(shoppingCart[lastIndex]) -> // Sugar +let lastIndex = string.length - 1 +console.log(string.charAt(lastIndex)) // t ``` -#### Exercise - 9 : Arrays +12. *charCodeAt()*: Takes index and it returns char code(ASCII number) of the value at that index -1. Declare an _empty_ array; -1. Declare an array with more than 5 number of items -1. Find the length of your array -1. Get the first item, the middle item and the last item of the array -1. Declare an array called _mixedDataTypes_,put different data types and in your array and the array size should be greater than 5 -1. Declare an array variable name itCompanies and assign initial values Facebook, Google, Microsoft, Apple, IBM, Oracle and Amazon. -1. Print the array using _console.log()_ -1. Print the number of companies in the array -1. Print the first company, middle and last company -1. Print out each company -1. Change companies to uppercase and print them out -1. Print the array like as a sentence: Facebook, Google, Microsoft, Apple, IBM,Oracle and Amazon are big IT companies. -1. Check if a certain company exists in the itCompanies array. If it exist return the company else return a company is _not found_. -1. Filter out companies which have more than one 'o' without the filter method -1. Sort the array using _sort()_ method -1. Reverse the array without _reverse_ method -1. Reverse the array using _reverse()_ method -1. Slice out the first 3 companies from the array -1. Slice out the last 3 companies from the array -1. Slice out the middle IT company or companies from the array -1. Remove the first IT company from the array -1. Remove the middle IT company or companies from the array -1. Remove the last IT company from the array -1. Remove all IT companies +```js +string.charCodeAt(index) +``` -## More on Arrays +```js +let string = '30 Days Of JavaScript' +console.log(string.charCodeAt(3)) // D ASCII number is 51 -There are different methods to manipulate an array. These are some of the available methods to deal with arrays:_Array,length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift_ -Array:To create an array. +let lastIndex = string.length - 1 +console.log(string.charCodeAt(lastIndex)) // t ASCII is 116 -```js -const arr = Array(); // creates an an empty array -console.log(arr); -const eightEmptyValues = Array(8); // it creates eight empty values -console.log(eightEmptyValues); // [empty x 8] ``` - fill:Fill all the array elements with a static value +13. *indexOf()*: Takes a substring and if the substring exists in a string it returns the first position of the substring if does not exist it returns -1 ```js -const arr = Array(); // creates an an empty array -console.log(arr); -const eightXvalues = Array(8).fill("X"); // it creates eight element values -console.log(eightXvalue); // ['X', 'X','X','X','X','X','X','X'] +string.indexOf(substring) ``` - concat:To concatinate two arrays. - ```js -const firstList = [1, 2, 3]; -const secondList = [4, 5, 6]; -const thirdList = firstList.concat(secondList); -console.log(thirdList); // [1,2,3,4,5,6] +let string = '30 Days Of JavaScript' + +console.log(string.indexOf('D')) // 3 +console.log(string.indexOf('Days')) // 3 +console.log(string.indexOf('days')) // -1 +console.log(string.indexOf('a')) // 4 +console.log(string.indexOf('JavaScript')) // 11 +console.log(string.indexOf('Script')) //15 +console.log(string.indexOf('script')) // -1 ``` -Length:To know the size of the array +14. *lastIndexOf()*: Takes a substring and if the substring exists in a string it returns the last position of the substring if it does not exist it returns -1 ```js -const numbers = [1, 2, 3, 4, 5]; -console.log(numbers.length); // -> 5 +//syntax +string.lastIndexOf(substring) ``` -indexOf:To check if an item exist in an array. If it exist it returns the index else it returns -1. - ```js -const numbers = [1, 2, 3, 4, 5]; -console.log(numbers.indexOf(5)); // -> 4 -console.log(numbers.indexOf(0)); // -> -1 -console.log(numbers.indexOf(1)); // -> 0 -console.log(numbers.indexOf(6)); // -> -1 +let string = 'I love JavaScript. If you do not love JavaScript what else can you love.' + +console.log(string.lastIndexOf('love')) // 67 +console.log(string.lastIndexOf('you')) // 63 +console.log(string.lastIndexOf('JavaScript')) // 38 ``` -lastIndexOf:Give the position of the last item in the array. If it exist it returns the index else it returns -1. +15. *concat()*: it takes many substrings and creates concatenation. ```js -const numbers = [1, 2, 3, 4, 5, 3, 1, 2]; -console.log(numbers.lastIndexOf(2)); // -> 7 -console.log(numbers.lastIndexOf(0)); // -> -1 -console.log(numbers.lastIndexOf(1)); // -> 6 -console.log(numbers.lastIndexOf(4)); // -> 3 -console.log(numbers.lastIndexOf(6)); // -> -1 +string.concat(substring, substring, substring) ``` -includes:To check if an item exist in an array. If it exist it returns the true else it returns false. - ```js -const numbers = [1, 2, 3, 4, 5]; -console.log(numbers.includes(5)); // -> true -console.log(numbers.includes(0)); // -> false -console.log(numbers.includes(1)); // -> true -console.log(numbers.includes(6)); // -> false +let string = '30' +console.log(string.concat("Days", "Of", "JavaScript")) // 30DaysOfJavaScript + +let country = 'Fin' +console.log(country.concat("land")) // Finland ``` -Array.isArray:To check if the data type is an array +16. *startsWith*: it takes a substring as an argument and it checks if the string starts with that specified substring. It returns a boolean(true or false). ```js -const numbers = [1, 2, 3, 4, 5]; -console.log(Array.isArray(numbers)); // -> true -const number = 100; -console.log(Array.isArray(number)); // -> false +//syntax +string.startsWith(substring) ``` -toString:Converts array to string - ```js -const numbers = [1, 2, 3, 4, 5]; -console.log(numbers.toString()); // 1,2,3,4,5 -const names = ["Asabeneh", "Matias", "Elias", "Brook"]; -console.log(names.toString()); // Asabeneh,Matias,Elias,Brook +let string = 'Love is the best to in this world' + +console.log(string.startsWith('Love')) // true +console.log(string.startsWith('love')) // false +console.log(string.startsWith('world')) // false + +let country = 'Finland' + +console.log(country.startsWith('Fin')) // true +console.log(country.startsWith('fin')) // false +console.log(country.startsWith('land')) // false ``` -join:To join the elements of the array, the argument passed in the join method will be joined in the array and return as a string. +17. *endsWith*: it takes a substring as an argument and it checks if the string starts with that specified substring. It returns a boolean(true or false). ```js -const numbers = [1, 2, 3, 4, 5]; -console.log(numbers.join()); // 1,2,3,4,5 -const names = ["Asabeneh", "Matias", "Elias", "Brook"]; -console.log(names.join()); // Asabeneh,Matias,Elias,Brook -console.log(names.join("")); //AsabenehMatiasEliasBrook -console.log(names.join(" ")); //Asabeneh Matias Elias Brook -console.log(names.join(", ")); //Asabeneh, Matias, Elias, Brook -console.log(names.join(" # ")); //Asabeneh # Matias # Elias # Brook +string.endsWith(substring) ``` -Slice: To cut out a multiple items in range. It takes two paramters:starting and ending position. It doesn't include the ending position - ```js - const numbers = [1,2,3,4,5]; - console.log(numbers.slice() // -> it copies all item - console.log(numbers.slice(0) // -> it copies all item - console.log(numbers.indexOf(0, numbers.length)) // it copies all item - console.log(numbers.slice(1,4)) // -> [2,3,4] // it doesn't include the ending position +let string = 'Love is the best to in this world' + +console.log(string.endsWith('world')) // true +console.log(string.endsWith('love')) // false +console.log(string.endsWith('in this world')) // true + +let country = 'Finland' + +console.log(country.endsWith('land')) // true +console.log(country.endsWith('fin')) // false +console.log(country.endsWith('Fin')) // false ``` -Splice: It takes three parameters:Starting position, number of times to be removed and number items to be added. +18. *search*: it takes a substring as an argument and it returns the index of the first match. ```js - const numbers = [1, 2, 3, 4, 5]; - console.log(numbers.splice() // -> remove all items - console.log(numbers.splice(0,1)) // remove the first item - console.log(numbers.splice(3, 3, 6, 7, 8)) // -> [1,2,6,7,8] //it removes two item and replace three items +string.search(substring) +``` +```js +let string = 'I love JavaScript. If you do not love JavaScript what else can you love.' +console.log(string.search('love')) // 2 ``` -Push: adding item in the end +19. *match*: it takes a substring or regular expression pattern as an argument and it returns an array if there is match if not it returns null. Let us see how a regular expression pattern looks like. It starts with / sign and ends with / sign. ```js -const numbers = [1, 2, 3, 4, 5]; -numbers.push(6); -console.log(numbers); // -> [1,2,3,4,5,6] -numbers.pop(); // -> remove one item from the end -console.log(numbers); // -> [1,2,3,4,5] +let string = 'love' +let patternOne = /love/ // with out any flag +let patternTwo = /love/gi // g-means to search in the whole text, i - case insensitive ``` -Pop: Removing item in the end +Match syntax ```js -const numbers = [1, 2, 3, 4, 5]; -numbers.pop(); // -> remove one item from the end -console.log(numbers); // -> [1,2,3,4] +// syntax +string.match(substring) ``` -shift: Removing item in the beginning - ```js -const numbers = [1, 2, 3, 4, 5]; -numbers.shift(); // -> remove one item from the beginning -console.log(numbers); // -> [2,3,4,5] +let string = 'I love JavaScript. If you do not love JavaScript what else can you love.' +console.log(string.match('love')) ``` -unshift: Adding item in the beginning +```sh +["love", index: 2, input: "I love JavaScript. If you do not love JavaScript what else can you love.", groups: undefined] +``` ```js -const numbers = [1, 2, 3, 4, 5]; -numbers.unshift(0); // -> remove one item from the beginning -console.log(numbers); // -> [0,1,2,3,4,5] +let pattern = /love/gi +console.log(string.match(pattern)) // ["love", "love", "love"] ``` ---- +Let us extract numbers from text using regular expression. This is not regular expression section, no panic, we will cover regular expression in other section. -#### Exercise -10 : Array Methods ```js -const shoppingCart = ['Milk','Coffee','Tea', 'Honey']; -const todoList = [ -{ - task:'Learn JavaScript', - time:'4/3/2019 8:30', - completed:true - -}, -{ - task:'Help some in need', - time:'4/3/2019 4:00', - completed:false - -}, -{ - task:'Do some physical exercises', - time:'4/3/2019 6:00', - completed:false - -}] +let txt = 'In 2019, I run 30 Days of Python. Now, in 2020 I super exited to start this challenge' +let regEx = /\d+/ +// d with escape character means d not a normal d instead acts a digit +// + means one or more digit numbers, +// if there is g after that it means global, search everywhere. + +console.log(txt.match(regEx)) // ["2", "0", "1", "9", "3", "0", "2", "0", "2", "0"] +console.log(txt.match(/\d+/g)) // ["2019", "30", "2020"] ``` -## Functions +20. *repeat()*: it takes a number argument and it returned the repeated version of the string. -A function is a block of code designed to perform a certain task. -A function is declared by a function key word followed by a name, followed by parentheses (). A parentheses can take a parameter. If a function take a parameter it will be called with argument. A function can also take a default paramenter. -A function can be declared or created in couple of ways: +```js +string.repeat(n) +``` -- _Decleration function_ -- _Expression function_ -- _Anonymous function_ -- _Arrow function_ +```js +let string = 'love' +console.log(string.repeat(10)) // lovelovelovelovelovelovelovelovelovelove +``` -### Function Declaration +## Checking Data types and Casting -```js -//function without parameter -function functionName(){ -// code goes here -} -functionName() // calling function by its name and with parentheses +### Checking data types -//function without parameter -function addTwoNumbers() { - var numOne = 10; - var numTwo = 20; - var sum = numOne + numTwo; - console.log(sum); -} -addTwoNumbers(); // function has to be called to be executed by it name +- Check Data types: To check the data type of a certain data type we use the _typeof_ and we also change one data type to another. + **Example:** -// function with one parameter -function functionName(parm1){ - //code goes ther -} -functionName(parm1); // during calling or invoking one argument needed -function areaOfCircle(r){ - let area = Math.PI * r * r; - return area; -} -console.log(areaOfCircle(10)) // should be called with one argument -function square(number) { - return number * number; -} -console.log(square(10)); +```js +// Different javascript data types +// Let's declare different data types + +let firstName = 'Asabeneh' // string +let lastName = 'Yetayeh' // string +let country = 'Finland' // string +let city = 'Helsinki' // string +let age = 250 // number, it is not my real age, do not worry about it +let job // undefined, because a value was not assigned + +console.log(typeof 'Asabeneh') // string +console.log(typeof firstName) // string +console.log(typeof 10) // number +console.log(typeof 3.14) // number +console.log(typeof true) // boolean +console.log(typeof false) // boolean +console.log(typeof NaN) // number +console.log(typeof job) // undefined +console.log(typeof undefined) // undefined +console.log(typeof null) // object +``` -// function with two parameters -function functionName(parm1, parm2){ - //code goes ther -} -functionName(parm1,parm2); // during calling or invoking two arguments needed -// Function without parater doesn' take input, so lets make a parameter with parameter -function sumTwoNumbers(numOne, numTwo) { - var sum = numOne + numTwo; - console.log(sum); -} -sumTwoNumbers(10, 20); // calling functions -// If a function doesn't return it doesn't store data, so it should return -function sumTwoNumbersAndReturn(numOne, numTwo) { - var sum = numOne + numTwo; - return sum; -} -console.log(sumTwoNumbersAndReturn(10, 20)); -function printFullName(firstName, lastName) { - return `${firstName} ${lastName}`; -} -console.log(printFullName("Asabeneh", "Yetayeh")); -console.log(printFullName("Dean", "Phan")); +### Changing data type(Casting) -// function with multiple parameters -function functionName(parm1, parm2, parm3,...){ - //code goes ther -} -functionName(parm1,parm2,parm3,...) // during calling or invoking three arguments needed +- Casting: Converting one data type to another data type. We use _parseInt()_, _parseFloat()_, _Number()_, _+ sign_, _str()_ + When we do arithmetic operations string numbers should be first converted to integer or float if not it returns an error. +#### String to Int -// this function takes array as a parameter and sum up the numbers in the array -function sumArrayValues(arr) { - var sum = 0; - for (var i = 0; i < arr.length; i++) { - sum = sum + numbers[i]; - } - return sum; -} -const numbers = [1, 2, 3, 4, 5]; -console.log(sumArrayValues(numbers)); - //calling a function - AddTwoNumbers(4,3) - const areaOfCircle = (radius) => { - let area = Math.PI * radius * radius; - return area; - } +We can convert string number to a number. Any number inside a quote is a string number. An example of a string number: '10', '5', etc. +We can convert string to number using the following methods: + +- parseInt() +- Number() +- Plus sign(+) +```js +let num = '10' +let numInt = parseInt(num) +console.log(numInt) // 10 ``` -### Function Expression +```js +let num = '10' +let numInt = Number(num) + +console.log(numInt) // 10 +``` ```js -//Declaration function -function square(n) { - return n * n; -} -console.log(square(2)); // -> 4 -// Function expression -const square = function(n) { - return n * n; -}; -console.log(square(2)); // -> 4 +let num = '10' +let numInt = +num + +console.log(numInt) // 10 ``` -### Anonymous Function +#### String to Float + +We can convert string float number to a float number. Any float number inside a quote is a string float number. An example of a string float number: '9.81', '3.14', '1.44', etc. +We can convert string float to number using the following methods: + +- parseFloat() +- Number() +- Plus sign(+) ```js -// Self invoking functions -(function(n) { - return n * n; -})(10); +let num = '9.81' +let numFloat = parseFloat(num) + +console.log(numFloat) // 9.81 ``` -### Arrow Function +```js +let num = '9.81' +let numFloat = Number(num) + +console.log(numFloat) // 9.81 +``` ```js -const square = n => { - return n * n; -}; -console.log(square(2)); // -> 4 -// if we have only one line, it can be written as follows -const square = n => n * n; // -> 4 +let num = '9.81' +let numFloat = +num + +console.log(numInt) // 9.81 ``` -### Arrow Function vs Declaration Function +#### Float to Int + +We can convert float numbers to integers. +We use the following method to convert float to int: +- parseInt() + ```js +let num = 9.81 +let numInt = parseInt(num) + +console.log(numInt) // 9 ``` -#### Exercise - 10 : Functions -1. Declare a function _fullName_ and it print out your full name. -1. Declare a function _fullName_ and now it takes firstName, lastName as a parameter and it returns your full - name. -1. Declare a function _addNumbers_ and it takes two two parameters and it returns sum. -1. An area of a rectangle is calculated as follows: _area = lenght x width_. Write a function which calculates _areaOfRectangle_. -1. A perimeter of a rectangle is calculated as follows: _perimeter= 2x(lenght + width)_. Write a function which calculates _perimeterOfRectangle_. -1. A volume of a rectangular prism is calculated as follows: _volume = lenght x width x height_. Write a function which calculates _volumeOfRectPrism_. -1. Area of a circle is calculated as follows: _area = π x r x r_. Write a function which calculates _areaOfCircle_ -1. Circumference of a circle is calculated as follows: _circumference = 2πr_. Write a function which calculates _circumOfCircle_ -1. Density of a substance is calculated as follows:_density= mass/volume_. Write a function which calculates _density_. -1. Speed is calculated by dividing the total distance covered by a moving object divided by the total amount of time taken. Write a fucntion which calculates a speed of a moving object, _speed_. -1. Weight of a substance is calculated as follows: _weight = mass x gravity_. Write a function which calculates _weight_. -1. Temperature in oC can be converted to oF using this formula: _oF = (oC x 9/5) + 32_. Write a function which converst oC to oF _convertCelciusToFahrenheit_. -1. Body mass index(BMI) is calculated as follows: _bmi = weight in Kg / (height x height) in m2_. Write a function which calculates _bmi_. BMI is used to broadly define different weight groups in adults 20 years old or older.Check if a person is _underweight, normal, overweight_ or _obsese_ based the information given below. - - The same groups apply to both men and women. - - _Underweight_: BMI is less than 18.5 - - _Normal weight_: BMI is 18.5 to 24.9 - - _Overweight_: BMI is 25 to 29.9 - - _Obese_: BMI is 30 or more -1. Write a function called _checkSeason_, it takes a month parameter and returns the season:Autumn, Winter, Spring or Summer. -1. Math.max returns its largest argument. Write a function findMax that takes three arguments and returns their maxiumum with out using Math.max method. - ```js - console.log(findMax(0, 10, 5)); - 10; - console.log(findMax(0, -10, -2)); - 0; - ``` -1. Linear equation is calculated as follows: _ax + b = c_. Write a function which calculates value of a linear equation, _solveLinEquation_. -1. Quadratic equation is calculated as follows: _ax2 + bx + c = 0_. Write a function which calculates value or values of a quadratic equation, _solveQuadEquation_. -1. Declare a function name _printArray_. It takes array as a parameter and it prints out each value of thearray. -1. Declare a functin name _swapValues_. This function swaps value of x to y. - ```js - swapValues(3, 4); // x => 4, y=>3 - swapValues(4, 5); // x = 5, y = 4 - ``` -1. Declare a function name _reverseArray_. It takes array as a parameter and it returns the reverse of the array (dont’ use method). - ```js - console.log(reverseArray([1, 2, 3, 4, 5])); - [5, 4, 3, 2, 1]; - console.log(reverseArray(["A", "B", "C"])); - ["C", "B", "A"]; - ``` -1. Declare a function name _capitalizeArray_. It takes array as a parameter and it returns the - capitalizedarray. -1. Declare a function name _addItem_. It takes an item parameter and it returns an array after adding the item -1. Declare a function name _removeItem_. It takes an index parameter and it returns an array after removing an item -1. Declare a function name _sumOfNumbers_. It takes a number parameter and it adds all the numbers in that range. -1. Declare a function name _sumOfOdds_. It takes a number parameter and it adds all the odd numbers in that - range. +### Exercises: Data Types + +1. Declare variables and assign string, boolean, undefined and null data types +1. The JavaScript ***typeof*** operator uses to check different data types. Check the data type of each variables from question number 1. + +#### Exercise: String + +1. Declare a variable name company and assign it to an initial value **'Coding Academy'**. +1. Print the string on the browser console using __console.log()__ +1. Print the __length__ of the string on the browser console using _console.log()_ +1. Change all the string to capital letters using __toUpperCase()__ method +1. Change all the string to lowercase letters using __toLowerCase()__ method +1. Cut(slice) out the first word of the string using __slice__, __substr()__ or __substring()__ method +1. Use __substr__ to slice out the phase __because because because__ in the following sentence:__'You cannot end a sentence with because because because is a conjunction'__ +1. Check if the string contains a word __Academy__ using __includes()__ method +1. Split the __string__ into __array__ using __split()__ method +1. Split the string Coding Academy at the space using __split()__ method +1. 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon' __split__ the string at the comma and change it to an array. +1. Change Coding Academy to Microsoft Academy using __replace()__ method. +1. What is character at index 10 in 'Coding Academy' string use __charAt()__ method. +1. What is the character code of A in 'Coding Academy' string using __charCodeAt()__ +1. Use __indexOf__ to determine the position of the first occurrence of c in Coding Academy +1. Use __lastIndexOf__ to determine the position of the last occurrence of c in Coding Academy. +1. Use __indexOf__ to find the position of the first occurrence of the word __because__ in the following sentence:__'You cannot end a sentence with because because because is a conjunction'__ +1. Use __lastIndexOf__ to find the position of the first occurrence of the word __because__ in the following sentence:__'You cannot end a sentence with because because because is a conjunction'__ +1. Use __search__ to find the position of the first occurrence of the word __because__ in the following sentence:__'You cannot end a sentence with because because because is a conjunction'__ +1. Use __trim()__ to remove if there is trailing whitespace at the beginning and the end of a string.E.g ' Coding Academy '. +1. Use __startsWith()__ method with the string Coding Academy make the result true +1. Use __endsWith()__ method with the string Coding Academy make the result true +1. Use __match()__ method to find all the c’s in Coding Academy +1. Use __match()__ to count the number all because's in the following sentence:__'You cannot end a sentence with because because because is a conjunction'__ +1. Use __concat()__ and merge 'Coding' and 'Academy' to a single string, 'Coding Academy' +1. Use __repeat()__ method to print Coding Academy 5 times +1. Calculate the total annual income of the person by extract the numbers from the following text. 'He earns 5000 euro from salary per month, 10000 euro annual bonus, 15000 euro online courses per month.' + +### Booleans + +Boolean value is either true or false. Any comparisons return a boolean value which is either true or false. + +```js +let isLightOn = true; +let isRaining = false; +let hungry = false; +let isMarried = true; +``` + +#### Exercise: Booleans + +Boolean value is either true or false. + +1. Write three JavaScript statement which provide truthy value. +1. Write three JavaScript statement which provide falsy value. +1. Use all the following comparison operators to compare the following values: >, < >=, <=, !=, !==,===. + Which are true or which are false ? + 1. 4 > 3 + 1. 4 >= 3 + 1. 4 < 3 + 1. 4 <= 3 + 1. 4 == 4 + 1. 4 === 4 + 1. 4 != 4 + 1. 4 !== 4 + 1. 4 != '4' + 1. 4 == '4' + 1. 4 === '4' + +### Undefined + +```js +let firstName; +console.log(firstName); //not defined, because it is not assigned to a value yet +``` + +### Null + +```js +let empty = null; +console.log(empty); // -> null , means no value +``` + +### Exercise - 6 : Data types + +String, number, boolean, null, undefined and symbol(ES6) are JavaScript primitive data types. + +1. The JavaScript *typeof* operator uses to check different data types. Check the data type of each variables from question number 1. + +## Operators + +### Arithmetic Operators + +Arithmetic operators are mathematical operators:+, -, _, /, _ + +```js +let numOne = 4; +let numTwo = 3; +let sum = numOne + numTwo; +let diff = numOne - numTwo; +let mult = numOne * numTwo; +let div = numOne / numTwo; +let remainder = numOne % numTwo; + +console.log(sum, diff, mult, div, remainder); // ->7,1,12,1.33,1 + +let PI = 3.14; +let radius = 100; // length in meter + +const gravity = 9.81; // in m/s2 +let mass = 72; // in Kilogram +const boilingPoint = 100; // temperature in oC, boiling point of water +const bodyTemp = 37; // body temperature in oC + +// Lets calculate area of a circle + +const areaOfCircle = PI * radius * radius; +console.log(areaOfCircle); // -> 314 m + +// Lets calculate weight of a substance +const weight = mass * gravity; +console.log(weight); // -> 706.32 N(Newton) + +// ConcatEnating string with numbers using string interpolation +/* + The boiling point of water is 100 oC. + Human body temperature is 37 oC. + The gravity of earth is 9.81 m/s2. + */ +console.log( + `The boiling point of water is ${boilingPoint} oC.\nHuman body temperature is ${body} oC.\nThe gravity of earth is ${gravity} m / s2.` +); +``` + +### Exercises : Arithmetic Operators + +JavaScript arithmetic operators are addition(+), subtraction(-), multiplication(\*), division(/), modulus(%), increment(++) and decrement(--). + +```js +let operandOne = 4; +let operandTwo = 3; +``` + +Using the above operands apply different JavaScript arithmetic operators + +### Logical Operators + +The following symbols are the common logical operators: +&&(ampersand) , ||(pipe) and !(negation). +&& gets true only if the two operands are true. +|| gets true either of the operand is true. +! negates true to false, false to true. + +```js +// && ampersand example + +const check = 4 > 3 && 10 > 5; // true and true -> true +const check = 4 > 3 && 10 < 5; // true and false -> false +const check = 4 < 3 && 10 < 5; // false and false -> false + +// || pipe or, example + +const check = 4 > 3 || 10 > 5; // true and true -> true +const check = 4 > 3 || 10 < 5; // true and false -> true +const check = 4 < 3 || 10 < 5; // false and false -> false + +// ! Negation examples + +let check = 4 > 3; // -> true +let check = !(4 > 3); // -> false +let isLightOn = true; // -> true +let isLightOff = !isLightOn; // -> false +let isMarried = !false; // -> true +``` + +### Exercises: Logical Operators + +Which are true or which are false ? + +1. 4 > 3 && 10 < 12 +1. 4 > 3 && 10 > 12 +1. 4 > 3 || 10 < 12 +1. 4 > 3 || 10 > 12 +1. !(4 > 3) +1. !(4 < 3) +1. !(false) +1. !(4 > 3 && 10 < 12) +1. !(4 > 3 && 10 > 12) +1. !(4 === '4') + +### Comparison Operators + +```js +4 > 3; +4 >= 4; +4 < 3; +4 <= 3; +4 != 3; +4 !== '4'; +4 == '4'; +4 === '4'; +4 === 4; +``` + +### Exercise: Comparison Operators + +Boolean value is either true or false. Any comparison return a boolean either true or false. +Use all the following comparison operators to compare the following values: >, < >=, <=, !=, !==,===. +Which are true or which are false ? + +1. 4 > 3 +1. 4 >= 3 +1. 4 < 3 +1. 4 <= 3 +1. 4 == 4 +1. 4 === 4 +1. 4 != 4 +1. 4 !== 4 +1. 4 != '4' +1. 4 == '4' +1. 4 === '4' + +## Conditionals + +### if + +We use if condition to check only on condition. + +```js +if (condition) { + // code goes here +} + +let isRaining = true; +if (isRaining) { + console.log('Remember to take your rain coat.'); +} +``` + +### if else + +When we have more than one condition we use the if and else condition. + +```js +if (condition) { + // if the condition meets, this block of code runs +} else { + // if condition doesn't meet, this block code runs +} + +let isRaining = true; +if (isRaining) { + console.log('You need a rain coat.'); +} else { + console.log('No need for a rain coat.'); +} +``` + +### if else if else + +Whenever we have multiple conditions. + +```js +// if else if else +let weather = 'sunny'; +if (weather === 'rainy') { + console.log('You need a rain coat.'); +} else if (weather === 'cloudy') { + console.log('It might be cold, you need a jacket.'); +} else if (weather === 'sunny') { + console.log('Go out freely.'); +} else { + console.log('No need for rain coat.'); +} +``` + +### switch + +Switch an alternative for if else if else + +```js +var weather = 'cloudy'; +switch (weather) { + case 'rainy': + console.log('You need a rain coat.'); + break; + case 'cloudy': + console.log('It might be cold, you need a jacket.'); + break; + case 'sunny': + console.log('Go out freely.'); + break; + default: + console.log(' No need for rain coat.'); + break; +} +// Switch More Examples +var dayUserInput = prompt('What day is it ?'); +var day = dayUserInput.toLowerCase(); +switch (day) { + case 'monday': + console.log('Today is Monday'); + break; + case 'tuesday': + console.log('Today is Tuesday'); + break; + case 'wednesday': + console.log('Today is Wednesday'); + break; + case 'thursday': + console.log('Today is Thursday'); + break; + case 'friday': + console.log('Today is Friday'); + break; + case 'saturday': + console.log('Today is Saturday'); + break; + case 'sunday': + console.log('Today is Sunday'); + break; + + default: + console.log('It is not a week day.'); + break; +} +``` + +### Ternary Operators + +Another way to write conditionals is using ternary operators. + +```js +let isRaining = true; +isRaining + ? console.log('You need a rain coat.') + : console.log('No need for a rain coat.'); +``` + +### Exercise: Conditionals + +1. Get user input using prompt(“Enter your age:”). If user is 18 or older , give feedback:You are old enough to drive but if not 18 give feedback to wait for the years he supposed to wait for. + Output: + + ```sh + Enter your age: 30 + You are old enough to drive. + ``` + + Output: + + ```sh + Enter your age:15 + You are left with 3 years to drive. + ``` + +1. Compare the values of myAge and yourAge using if … else. Based on the comparison log to console who is older (me or you). Use prompt(“Enter your age:”) to get the age as input. + Output: + + ```sh + Enter your age: 30 + You are 5 years older than me. + ``` + +1. If a is greater than b return a is greater than b else a is less than b. + Output: + + ```sh + let a = 4 + let b = 3 + 4 is greater than 3 + ``` + +1. Write a code which give grade students according to theirs scores: + - 80-100, A + - 70-89, B + - 60-69, C + - 50-59, D + - 0 -49, F +1. Check if the season is Autumn, Winter, Spring or Summer. + If the user input is: + - September, October or November, the season is Autumn. + - December, January or February, the season is Winter. + - March, April or May, the season is Spring + - June, July or August, the season is Summer + +## Loops + +In programming languages to carry out repetitive task we use different kinds of loop. The following examples are the commonly used loops. + +### For Loop + +```js +// for loop structure +for(initialization, condition, increment/decrement){ + // code goes here +} +for(let i = 0; i <= 5; i++){ + console.log(i) +} + +``` + +### While loop + +```js +let i = 0; +while (i <= 5) { + console.log(i); + i++; +} +``` + +### Do while loop + +```js +let i = 0; +do { + console.log(i); + i++; +} while (i <= 5); +``` + +### Exercises:Loops + +1. Iterate 0 to 10 using for loop, do the same using while and do while loop. +1. Iterate 10 to 0 using for loop, do the same using while and do while loop. +1. Write a loop that makes seven calls to console.log to output the following triangle: + + ```js + # + ## + ### + #### + ##### + ###### + ####### + ``` + +1. Iterate the array, ['HTML', 'CSS', 'JavaScript'] using a for loop and print out the items. +1. Use for loop to iterate from 0 to 100 and print only even numbers +1. Use for loop to iterate from 0 to 100 and print only odd numbers +1. Use for loop to iterate from 0 to 100 and print and print the sum of all numbers. + + ```js + The sum all numbers is 5050. + ``` + +1. Use for loop to iterate from 0 to 100 and print the sum of all evens and the sum of all odds. + + ```js + The sum of all evens is 2550. And the sum of all odds is 2500. + ``` + +## Arrays + +In contrast to variables array can store _multiple values_. Each value in an array has an _index_ and each index has _a reference in a memory address_. Each value can be accessed by using their _indexes_. The index of an array starts from _zero_ and the last element is less by one from the length of the array. + +```js +const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // set of numbers + +console.log(numbers.length) // => to know the size of the array, which is 6 +console.log(numbers) // -> [0, 3.14, 9.81, 37, 98.6, 100] +console.log(numbers[0]) // -> 0 +console.log(numbers[5]) // -> 100 + +let lastIndex = numbers.length - 1; +console.log(numbers[lastIndex]) -> 100 +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +]; // List of web technologies + +console.log(webTechs) // all the array items +console.log(webTechs.length) // => to know the size of the array, which is 7 +console.log(webTechs[0]) // -> HTML +console.log(webTechs[6]) // -> MongoDB + +let lastIndex = webTechs.length - 1; +console.log(webTechs[lastIndex]) -> MongoDB +const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary', + 'Ireland', + 'Japan', + 'Kenya' +]; // List of countries; + +console.log(countries) // -> all countries in array +console.log(countries[0]) // -> Albania +console.log(countries[10]) // -> Kenya + +let lastIndex = countries.length - 1; +console.log(countries[lastIndex]) -> // Kenya + +const shoppingCart = [ + 'Milk', + 'Mango', + 'Tomato', + 'Potato', + 'Avocado', + 'Meat', + 'Eggs', + 'Sugar' +]; // List of food products + +console.log(shoppingCart) // -> all shoppingCart in array +console.log(shoppingCart[0]) // -> Milk +console.log(shoppingCart[7]) // -> Sugar + +let lastIndex = shoppingCart.length - 1; +console.log(shoppingCart[lastIndex]) -> // Sugar +``` + +### Exercise : Arrays + +1. Declare an _empty_ array; +1. Declare an array with more than 5 number of items +1. Find the length of your array +1. Get the first item, the middle item and the last item of the array +1. Declare an array called _mixedDataTypes_,put different data types and in your array and the array size should be greater than 5 +1. Declare an array variable name itCompanies and assign initial values Facebook, Google, Microsoft, Apple, IBM, Oracle and Amazon. +1. Print the array using _console.log()_ +1. Print the number of companies in the array +1. Print the first company, middle and last company +1. Print out each company +1. Change companies to uppercase and print them out +1. Print the array like as a sentence: Facebook, Google, Microsoft, Apple, IBM,Oracle and Amazon are big IT companies. +1. Check if a certain company exists in the itCompanies array. If it exist return the company else return a company is _not found_. +1. Filter out companies which have more than one 'o' without the filter method +1. Sort the array using _sort()_ method +1. Reverse the array without _reverse_ method +1. Reverse the array using _reverse()_ method +1. Slice out the first 3 companies from the array +1. Slice out the last 3 companies from the array +1. Slice out the middle IT company or companies from the array +1. Remove the first IT company from the array +1. Remove the middle IT company or companies from the array +1. Remove the last IT company from the array +1. Remove all IT companies + +## More on Arrays + +There are different methods to manipulate an array. These are some of the available methods to deal with arrays:_Array,length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift_ +Array:To create an array. + +```js +const arr = Array(); // creates an an empty array +console.log(arr); + +const eightEmptyValues = Array(8); // it creates eight empty values +console.log(eightEmptyValues); // [empty x 8] +``` + +- *fill*: Fill all the array elements with a static value + +```js +const arr = Array(); // creates an an empty array +console.log(arr); +const eightXvalues = Array(8).fill('X'); // it creates eight element values +console.log(eightXvalues); // ['X', 'X','X','X','X','X','X','X'] +``` + +- *concat*: To concatenate two arrays. + +```js +const firstList = [1, 2, 3]; +const secondList = [4, 5, 6]; +const thirdList = firstList.concat(secondList); + +console.log(thirdList); // [1,2,3,4,5,6] +``` + +- *length*: To know the size of the array + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(numbers.length); // -> 5 +``` + +- *indexOf*: To check if an item exist in an array. If it exist it returns the index else it returns -1. + +```js +const numbers = [1, 2, 3, 4, 5]; + +console.log(numbers.indexOf(5)); // -> 4 +console.log(numbers.indexOf(0)); // -> -1 +console.log(numbers.indexOf(1)); // -> 0 +console.log(numbers.indexOf(6)); // -> -1 +``` + +- *lastIndexOf* :Give the position of the last item in the array. If it exist it returns the index else it returns -1. + +```js +const numbers = [1, 2, 3, 4, 5, 3, 1, 2]; + +console.log(numbers.lastIndexOf(2)); // -> 7 +console.log(numbers.lastIndexOf(0)); // -> -1 +console.log(numbers.lastIndexOf(1)); // -> 6 +console.log(numbers.lastIndexOf(4)); // -> 3 +console.log(numbers.lastIndexOf(6)); // -> -1 +``` + +*includes*: To check if an item exist in an array. If it exist it returns the true else it returns false. + +```js +const numbers = [1, 2, 3, 4, 5]; + +console.log(numbers.includes(5)); // -> true +console.log(numbers.includes(0)); // -> false +console.log(numbers.includes(1)); // -> true +console.log(numbers.includes(6)); // -> false +``` + +- *isArray*: To check if the data type is an array + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(Array.isArray(numbers)); // -> true + +const number = 100; +console.log(Array.isArray(number)); // -> false +``` + +- *toString*: Converts array to string + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(numbers.toString()); // 1,2,3,4,5 + +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; +console.log(names.toString()); // Asabeneh,Mathias,Elias,Brook +``` + +join:To join the elements of the array, the argument passed in the join method will be joined in the array and return as a string. + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(numbers.join()); // 1,2,3,4,5 +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; +console.log(names.join()); // Asabeneh,Mathias,Elias,Brook +console.log(names.join('')); //AsabenehMathiasEliasBrook +console.log(names.join(' ')); //Asabeneh Mathias Elias Brook +console.log(names.join(', ')); //Asabeneh, Mathias, Elias, Brook +console.log(names.join(' # ')); //Asabeneh # Mathias # Elias # Brook +``` + +Slice: To cut out a multiple items in range. It takes two parameters:starting and ending position. It doesn't include the ending position + +```js + const numbers = [1,2,3,4,5]; + console.log(numbers.slice() // -> it copies all item + console.log(numbers.slice(0) // -> it copies all item + console.log(numbers.indexOf(0, numbers.length)) // it copies all item + console.log(numbers.slice(1,4)) // -> [2,3,4] // it doesn't include the ending position +``` + +Splice: It takes three parameters:Starting position, number of times to be removed and number items to be added. + +```js + const numbers = [1, 2, 3, 4, 5]; + console.log(numbers.splice() // -> remove all items + console.log(numbers.splice(0,1)) // remove the first item + console.log(numbers.splice(3, 3, 6, 7, 8)) // -> [1,2,6,7,8] //it removes two item and replace three items + +``` + +- *push*: adding item in the end + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.push(6); + +console.log(numbers); // -> [1,2,3,4,5,6] + +numbers.pop(); // -> remove one item from the end +console.log(numbers); // -> [1,2,3,4,5] +``` + +- *pop*: Removing item in the end + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.pop(); // -> remove one item from the end + +console.log(numbers); // -> [1,2,3,4] +``` + +- *shift*: Removing item in the beginning + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.shift(); // -> remove one item from the beginning + +console.log(numbers); // -> [2,3,4,5] +``` + +- *unshift*: Adding item in the beginning + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.unshift(0); // -> remove one item from the beginning +console.log(numbers); // -> [0,1,2,3,4,5] +``` + +--- + +### Exercise -10 : Array Methods + +```js +const shoppingCart = ['Milk','Coffee','Tea', 'Honey']; +const todoList = [ + { + task:'Learn JavaScript', + time:'4/3/2019 8:30', + completed:true + }, + { + task:'Help some in need', + time:'4/3/2019 4:00', + completed:false + }, + { + task:'Do some physical exercises', + time:'4/3/2019 6:00', + completed:false + } +] +``` + +## Functions + +A function is a block of code designed to perform a certain task. +A function is declared by a function key word followed by a name, followed by parentheses (). A parentheses can take a parameter. If a function take a parameter it will be called with argument. A function can also take a default parameter. +A function can be declared or created in couple of ways: + +- _Declaration function_ +- _Expression function_ +- _Anonymous function_ +- _Arrow function_ + +### Function Declaration + +```js +//function without parameter + +function functionName(){ +// code goes here +} +functionName() // calling function by its name and with parentheses + +//function without parameter + +function addTwoNumbers() { + var numOne = 10; + var numTwo = 20; + var sum = numOne + numTwo; + console.log(sum); +} +addTwoNumbers(); // function has to be called to be executed by it name + +// function with one parameter + +function functionName(parm1){ + //code goes her +} +functionName(parm1); // during calling or invoking one argument needed + +function areaOfCircle(r){ + let area = Math.PI * r * r; + return area; +} +console.log(areaOfCircle(10)) // should be called with one argument + +function square(number) { + return number * number; +} +console.log(square(10)); + +// function with two parameters +function functionName(parm1, parm2){ + //code goes her +} +functionName(parm1,parm2); // during calling or invoking two arguments needed + +// Function without parameter doesn't take input, so lets make a parameter with parameter +function sumTwoNumbers(numOne, numTwo) { + var sum = numOne + numTwo; + console.log(sum); +} +sumTwoNumbers(10, 20); // calling functions + +// If a function doesn't return it doesn't store data, so it should return +function sumTwoNumbersAndReturn(numOne, numTwo) { + var sum = numOne + numTwo; + return sum; +} +console.log(sumTwoNumbersAndReturn(10, 20)); + +function printFullName(firstName, lastName) { + return `${firstName} ${lastName}`; +} +console.log(printFullName('Asabeneh', 'Yetayeh')); +console.log(printFullName('Dean', 'Phan')); + +// function with multiple parameters +function functionName(parm1, parm2, parm3,...){ + //code goes ther +} +functionName(parm1,parm2,parm3,...) // during calling or invoking three arguments needed + + +// this function takes array as a parameter and sum up the numbers in the array +function sumArrayValues(arr) { + var sum = 0; + for (var i = 0; i < arr.length; i++) { + sum = sum + numbers[i]; + } + return sum; +} +const numbers = [1, 2, 3, 4, 5]; +console.log(sumArrayValues(numbers)); + + +const areaOfCircle = (radius) => { + let area = Math.PI * radius * radius; + return area; + } +console.log(areaOfCircle(10)) +``` + +### Function Expression + +```js +//Declaration function +function square(n) { + return n * n; +} +console.log(square(2)); // -> 4 +// Function expression +const square = function(n) { + return n * n; +}; +console.log(square(2)); // -> 4 +``` + +### Anonymous Function + +```js +// Self invoking functions +(function(n) { + return n * n; +})(2); + +const x = (function(n) { + return n * n; +})(2); +console.log(x) // 4 + +``` + +### Arrow Function + +```js +const square = n => { + return n * n; +}; +console.log(square(2)); // -> 4 + +// if we have only one line, it can be written as follows +// Explicit return +const square = n => n * n; // -> 4 +``` + +### Arrow Function vs Declaration Function + +Arrow function and regular functions are not exactly the same. + +```js + +``` + +### Exercise - 10 : Functions + +1. Declare a function _fullName_ and it print out your full name. +1. Declare a function _fullName_ and now it takes firstName, lastName as a parameter and it returns your full - name. +1. Declare a function _addNumbers_ and it takes two two parameters and it returns sum. +1. An area of a rectangle is calculated as follows: _area = length x width_. Write a function which calculates _areaOfRectangle_. +1. A perimeter of a rectangle is calculated as follows: _perimeter= 2x(length + width)_. Write a function which calculates _perimeterOfRectangle_. +1. A volume of a rectangular prism is calculated as follows: _volume = length x width x height_. Write a function which calculates _volumeOfRectPrism_. +1. Area of a circle is calculated as follows: _area = π x r x r_. Write a function which calculates _areaOfCircle_ +1. Circumference of a circle is calculated as follows: _circumference = 2πr_. Write a function which calculates _circumOfCircle_ +1. Density of a substance is calculated as follows:_density= mass/volume_. Write a function which calculates _density_. +1. Speed is calculated by dividing the total distance covered by a moving object divided by the total amount of time taken. Write a function which calculates a speed of a moving object, _speed_. +1. Weight of a substance is calculated as follows: _weight = mass x gravity_. Write a function which calculates _weight_. +1. Temperature in oC can be converted to oF using this formula: _oF = (oC x 9/5) + 32_. Write a function which convert oC to oF _convertCelciusToFahrenheit_. +1. Body mass index(BMI) is calculated as follows: _bmi = weight in Kg / (height x height) in m2_. Write a function which calculates _bmi_. BMI is used to broadly define different weight groups in adults 20 years old or older.Check if a person is _underweight, normal, overweight_ or _obese_ based the information given below. + - The same groups apply to both men and women. + - _Underweight_: BMI is less than 18.5 + - _Normal weight_: BMI is 18.5 to 24.9 + - _Overweight_: BMI is 25 to 29.9 + - _Obese_: BMI is 30 or more +1. Write a function called _checkSeason_, it takes a month parameter and returns the season:Autumn, Winter, Spring or Summer. +1. Math.max returns its largest argument. Write a function findMax that takes three arguments and returns their maximum with out using Math.max method. + + ```js + console.log(findMax(0, 10, 5)); + 10; + console.log(findMax(0, -10, -2)); + 0; + ``` + +1. Linear equation is calculated as follows: _ax + b = c_. Write a function which calculates value of a linear equation, _solveLinEquation_. +1. Quadratic equation is calculated as follows: _ax2 + bx + c = 0_. Write a function which calculates value or values of a quadratic equation, _solveQuadEquation_. +1. Declare a function name _printArray_. It takes array as a parameter and it prints out each value of the array. +1. Declare a function name _swapValues_. This function swaps value of x to y. + + ```js + swapValues(3, 4); // x => 4, y=>3 + swapValues(4, 5); // x = 5, y = 4 + ``` + +1. Declare a function name _reverseArray_. It takes array as a parameter and it returns the reverse of the array (don't use method). + + ```js + console.log(reverseArray([1, 2, 3, 4, 5])); + [5, 4, 3, 2, 1]; + console.log(reverseArray(['A', 'B', 'C'])); + ['C', 'B', 'A']; + ``` + +1. Declare a function name _capitalizeArray_. It takes array as a parameter and it returns the - capitalizedarray. +1. Declare a function name _addItem_. It takes an item parameter and it returns an array after adding the item +1. Declare a function name _removeItem_. It takes an index parameter and it returns an array after removing an item +1. Declare a function name _sumOfNumbers_. It takes a number parameter and it adds all the numbers in that range. +1. Declare a function name _sumOfOdds_. It takes a number parameter and it adds all the odd numbers in that - range. 1. Declare a function name _sumOfEven_. It takes a number parameter and it adds all the even numbers in that - range. 1. Declare a function name evensAndOdds . It takes a positive integer as parameter and it counts number of evens and odds in the number. - ```she + + ```sh evensAndOdds(100); The number of odds are 50. The number of evens are 51. ``` -1. Write a funcition which takes any number of arguments and return the sum of the arguments + +1. Write a function which takes any number of arguments and return the sum of the arguments + + ```js + sum(1, 2, 3); // -> 6 + sum(1, 2, 3, 4); // -> 10 + ``` + +1. Writ a function which generates a _randomUserIp_. +1. Write a function which generates a _randomMacAddress_ +1. Declare a function name _randomHexaNumberGenerator_. When this function is called it generates a random hexadecimal number. The function return the hexadecimal number. + + ```sh + console.log(randomHexaNumberGenerator()); + '#ee33df' + ``` + +1. Declare a function name _userIdGenerator_. When this function is called it generates seven character id. The function return the id. + + ```sh + console.log(userIdGenerator()); + 41XTDbE + ``` + +1. Modify question number n . Declare a function name _userIdGeneratedByUser_. It doesn’t take any parameter but it takes two inputs using prompt(). One of the input is the number of characters and the second input is the number of ids which are supposed to be generated. + + ```sh + userIdGeneratedByUser() + 'kcsy2 + SMFYb + bWmeq + ZXOYh + 2Rgxf + ' + userIdGeneratedByUser() + '1GCSgPLMaBAVQZ26 + YD7eFwNQKNs7qXaT + ycArC5yrRupyG00S + UbGxOFI7UXSWAyKN + dIV0SSUTgAdKwStr + ' + ``` + +1. Write a function name _rgbColorGenerator_ and it generates rgb colors. + + ```sh + rgbColorGenerator() + rgb(125,244,255) + ``` + +1. Write a function ***arrayOfHexaColors*** which return any number of hexadecimal colors in an array. +1. Write a function ***arrayOfRgbColors*** which return any number of RGB colors in an array. +1. Write a function ***convertHexaToRgb*** which converts hexa color to rgb and it returns an rgb color. +1. Write a function ***convertRgbToHexa*** which converts rgb to hexa color and it returns an hexa color. +1. Write a function ***generateColors*** which can generate any number of hexa or rgb colors. + + ```js + generateColors('hexa', 3) + ['#a3e12f','#03ed55','#eb3d2b'] + generateColors('hexa', 1) + '#b334ef' + + generateColors('rgb', 3) + ['rgb(5, 55, 175','rgb(50, 105, 100','rgb(15, 26, 80'] + generateColors('rgb', 1) + 'rgb(33,79, 176)' + ``` + +1. Call your function _shuffleArray_, it takes an array as a parameter and it returns a shuffled array +1. Call your function _factorial_, it takes a whole number as a parameter and it return a factorial of the number +1. Call your function _isEmpty_, it takes a parameter and it checks if it is empty or not +1. Call your function _sum_, it takes any number of arguments and it returns the sum. +1. Write a function called _sumOfArrayItems_, it takes an array parameter and return the sum of all the items. Check if all the array items are number types. If not give return reasonable feedback. +1. Write a function called _average_, it takes an array parameter and returns the average of the items. Check if all the array items are number types. If not give return reasonable feedback. +1. Write a function called _modifyArray_ takes array as parameter and modifies the fifth item of the array and return the array. If the array length is less than five it return 'item not found'. + + ```js + console.log(modifyArray(['Avocado', 'Tomato', 'Potato','Mango', 'Lemon','Carrot']); + // →['Avocado', 'Tomato', 'Potato','Mango', 'LEMON', 'Carrot'] + console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon','Microsoft', 'IBM']); + // →['Google', 'Facebook','Apple', 'Amazon','MICROSOFT', 'IBM'] + console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon']); + // →'Not Found' + ``` + +1. Write a function called *isPrime*, which checks if a number is prime number. +1. Write a functions which checks if all items are unique in the array. +1. Write a function which checks if all the items of the array are the same data type. +1. JavaScript variable name does not support special characters or symbols except $ or _. Write a function ***isValidVariable** which check if a variable is valid or invalid variable. +1. Write a function which returns array of seven random numbers in a range of 0-9. All the numbers must be unique. + + ```js + sevenRandomNumbers()[(1, 4, 5, 7, 9, 8, 0)]; + ``` + +## Object + +Everything can be an object and objects do have properties and properties have values. +Creating an object literal. To create an object literal, we use two curly brackets. +An empty object + +```js +const person = {}; +``` + +Now, the person object has firstName, lastName, age, location, skills and getFullName properties. The getFullName is function inside the person object and we call it method. The _this_ key word refers to the object itself.Example of object: + +```js +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 100, + location: 'Helsinki', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Node', + 'MongoDB', + 'Python', + 'D3.js' + ], + getFullName: function() { + return `${this.firstName}${this.lastName}`; + } +}; + +const rectangle = { + length: 20, + width: 20, + getArea: function() { + return this.length * this.width; + }, + getPerimeter: function() { + return 2 * (this.length + this.width); + } +}; +``` + +Getting values from an object: + +```js + const person = { + firstName:'Asabeneh', + lastName:'Yetayeh', + age:100, + location:'Helsinki', + skills:['HTML', 'CSS', 'JavaScript', 'React','Node','MongoDB', 'Python', 'D3.js'] + getFullName:function() { + return `${this.firstName}${this.lastName}` + } + } + console.log(person.firstName); + console.log(person.lastName); + console.log(person.getFullName()); + // value can be accessed + console.log(person['age'); + console.log(person['location']); +``` + +Setting a new keys in an object + +```js + const person = { + firstName:'Asabeneh', + lastName:'Yetayeh', + age:100, + location:'Helsinki', + skills:['HTML', 'CSS', 'JavaScript', 'React','Node','MongoDB', 'Python', 'D3.js'] + getFullName:function() { + return `${this.firstName}${this.lastName}` + } + } + person.nationality = 'Ethiopian' + person.live = 'Finland'; + console.log(person) +``` + +### Object Methods + +_Object.assign_: To copy an object without modifying the original object + +```js +const person = { + name: 'Asabeneh', + age: 200, + country: 'Finland', + skills: ['HTML', 'CSS', 'JS'], + address: { + street: 'Heitamienkatu 16', + pobox: 2002, + city: 'Helsinki' + }, + getPersonInfo: function() { + return `I am ${this.name} and I live in ${this.country}. I am ${this.age}.`; + } +}; + +//Object methods: Object.assign, Object.keys, Object.values, Object.entries +//hasOwnProperty + +const copyPerson = Object.assign({}, person); +console.log(copyPerson); +``` + +_Object.keys_: To get keys of an objet as an array + +```js +const keys = Object.keys(copyPerson); +console.log(keys); //['name', 'age', 'country', 'skills', 'address', 'getPersonInfo'] +const address = Object.keys(copyPerson.address); +console.log(address); //['street', 'pobox', 'city'] +``` + +_Object.values_:To get values of an object as an array + +```js +const values = Object.values(copyPerson); +console.log(values); +``` + +_Object.entries_:To get the keys and values in an array + +```js +const entries = Object.entries(copyPerson); +console.log(entries); +``` + +_hasOwnProperty_: To check if a specific key or property exist in an object + +```js +console.log(copyPerson.hasOwnProperty('name')); +console.log(copyPerson.hasOwnProperty('score')); +``` + +### Date Object + +In JavaScript current time and date is created using JavaScript Date Object. +Some of the methods to extract date object values:*getFullYear(), getMonths(), getDate(), getDay(), getHours(), getMinutes* + +```js +const now = new Date (); +const year = now.getFullYear(); // return year +const month = now.getMonth() + 1; // return month(0 - 11) +const date = now.getDate(); // return date (1 - 31) +const hours = now.getHours(); // return number (0 - 23) +const minutes = now.getMinutes();// return number (0 -59) +console.log(`${date}/${month}/${year} ${hours}:${minutes}`) +``` + +#### Exercises: Date Object + +1. Use the new Date() object to get _month, date, year, hour_ and _minute_. +1. Write a function name _displayDateTime_ which display time in this format: 10/03/2019 04:08 + + ```sh + displayDateTime() + 10/03/2019 04:08 + ``` + +### Exercises:Objects + +1. Create an empty object called dog +1. Print the the dog object on the console +1. Add name, legs, color, age and bark properties for the dog object. The bark property is a method which return *woof woof* +1. Get name, legs, color, age and bark value from the dog object +1. Set new properties the dog object: breed, getDogInfo +1. Create an object literal called _personAccount_. It has _firstName, lastName, incomes, expenses_ properties and it has _totalIncome, totalExpense, accountInfo,addIncome, addExpense_ and _accountBalance_ methods. Incomes is a set of incomes and its description and the same for expenses. +1. Count logged in users,count users having greater than equal to 50 points from the following object. + + ```js + const users = { + Alex: { + email: 'alex@alex.com', + skills: ['HTML', 'CSS', 'JavaScript'], + age: 20, + isLoggedIn: false, + points: 30 + }, + Asab: { + email: 'asab@asab.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'], + age: 25, + isLoggedIn: false, + points: 50 + }, + Brook: { + email: 'daniel@daniel.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'], + age: 30, + isLoggedIn: true, + points: 50 + }, + Daniel: { + email: 'daniel@alex.com', + skills: ['HTML', 'CSS', 'JavaScript', 'Python'], + age: 20, + isLoggedIn: false, + points: 40 + }, + John: { + email: 'john@john.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'], + age: 20, + isLoggedIn: true, + point: 50 + }, + Thomas: { + email: 'thomas@thomas.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React'], + age: 20, + isLoggedIn: false, + points: 40 + } + }; + ``` + +1. Set your name in the users object without modifying the original users object +1. Get all keys or properties of users object +1. Get all the values of users object +1. ** Develop a small JavaScript library. + +## JSON + +JSON stands for JavaScript Object Notation. The JSON syntax is derived from JavaScript object notation syntax, but the JSON format is text or string only. JSON is a light weight data format for storing and transporting. JSON is mostly used when data is sent from a server to a client. JSON is an easier-to-use alternative to XML. + +**Example:** + +```js +{ +"users":[ + { + "firstName":"Asabeneh", + "lastName":"Yetayeh", + "age":250, + "email":"asab@asb.com" + }, + { + "firstName":"Alex", + "lastName":"James", + "age":25, + "email":"alex@alex.com" + }, + { + "firstName":"Lidiya", + "lastName":"Tekle", + "age":28, + "email":"lidiya@lidiya.com" + } +] +} +``` + +The above JSON example is not much different for a normal object. Then, what is the difference ? The difference is the key of a JSON object should be with double quotes or it should be a string. JavaScript Object and JSON are very similar that we can change JSON to Object and Object to JSON. + +Let us see the above example in more detail, it starts with a curly bracket. Inside the curly bracket, there is "users" key which has a value array. Inside the array we have different objects and each objects has keys, each keys has to have double quotes. For instance, we use "firstNaMe" instead of just firstName, however in object we use keys without double quotes. This is the major difference between an object and a JSON. Let's see more examples about JSON. + +**Example:** + +```js +{ + "Alex": { + "email": "alex@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript" + ], + "age": 20, + "isLoggedIn": false, + "points": 30 + }, + "Asab": { + "email": "asab@asab.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Redux", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 25, + "isLoggedIn": false, + "points": 50 + }, + "Brook": { + "email": "daniel@daniel.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux" + ], + "age": 30, + "isLoggedIn": true, + "points": 50 + }, + "Daniel": { + "email": "daniel@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Python" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "John": { + "email": "john@john.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node.js" + ], + "age": 20, + "isLoggedIn": true, + "points": 50 + }, + "Thomas": { + "email": "thomas@thomas.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "Paul": { + "email": "paul@paul.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + } +} +``` + +### Converting JSON to JavaScript Object + +Mostly we fetch JSON data from HTTP response or from a file, but we can store the JSON as a string and we can change to Object for sake of demonstration. In JavaScript the keyword _JSON_ has _parse()_ and _stringify()_ methods. When we want to change the JSON to an object we parse the JSON using _JSON.parse()_. When we want to change the object to JSON we use _JSON.stringify()_. + +#### JSON.parse() + +```js +JSON.parse(json[, reviver]) +// json or text , the data +// reviver is an optional callback function +``` + +```js +const usersText = `{ +"users":[ + { + "firstName":"Asabeneh", + "lastName":"Yetayeh", + "age":250, + "email":"asab@asb.com" + }, + { + "firstName":"Alex", + "lastName":"James", + "age":25, + "email":"alex@alex.com" + }, + { + "firstName":"Lidiya", + "lastName":"Tekle", + "age":28, + "email":"lidiya@lidiya.com" + } +] +}` + +const usersObj = JSON.parse(usersText, undefined, 4) +console.log(usersObj) +``` + +### Using a reviver function with JSON.parse() + +To use the reviver function as a formatter, we put the keys we want to format first name and last name value. Let us say, we are interested to format the firstName and lastName of the JSON data . + +```js +const usersText = `{ +"users":[ + { + "firstName":"Asabeneh", + "lastName":"Yetayeh", + "age":250, + "email":"asab@asb.com" + }, + { + "firstName":"Alex", + "lastName":"James", + "age":25, + "email":"alex@alex.com" + }, + { + "firstName":"Lidiya", + "lastName":"Tekle", + "age":28, + "email":"lidiya@lidiya.com" + } +] +}` + +const usersObj = JSON.parse(usersText, (key, value) => { + let newValue = + typeof value == 'string' && key != 'email' ? value.toUpperCase() : value + return newValue +}) +console.log(usersObj) +``` + +The _JSON.parse()_ is very handy to use. You do not have to pass optional parameter, you can just use it with the required parameter and you will achieve quite a lot. + +### Converting Object to JSON + +When we want to change the object to JSON we use _JSON.stringify()_. The stringify method takes one required parameter and two optional parameters. The replacer is used as filter and the space is an indentations. If we do not want to filter out any of the keys from the object we can just pass undefined. + +```js +JSON.stringify(obj, replacer, space) +// json or text , the data +// reviver is an optional callback function +``` + +Let us convert the following object to a string. First let use keep all the keys and also let us have 4 space indentation. + +```js +const users = { + Alex: { + email: 'alex@alex.com', + skills: ['HTML', 'CSS', 'JavaScript'], + age: 20, + isLoggedIn: false, + points: 30 + }, + Asab: { + email: 'asab@asab.com', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'Redux', + 'MongoDB', + 'Express', + 'React', + 'Node' + ], + age: 25, + isLoggedIn: false, + points: 50 + }, + Brook: { + email: 'daniel@daniel.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'], + age: 30, + isLoggedIn: true, + points: 50 + }, + Daniel: { + email: 'daniel@alex.com', + skills: ['HTML', 'CSS', 'JavaScript', 'Python'], + age: 20, + isLoggedIn: false, + points: 40 + }, + John: { + email: 'john@john.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'], + age: 20, + isLoggedIn: true, + points: 50 + }, + Thomas: { + email: 'thomas@thomas.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React'], + age: 20, + isLoggedIn: false, + points: 40 + }, + Paul: { + email: 'paul@paul.com', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'MongoDB', + 'Express', + 'React', + 'Node' + ], + age: 20, + isLoggedIn: false, + points: 40 + } +} + +const txt = JSON.stringify(users, undefined, 4) +console.log(txt) // text means JSON- because json is a string form of an object. +``` + +```sh +{ + "Alex": { + "email": "alex@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript" + ], + "age": 20, + "isLoggedIn": false, + "points": 30 + }, + "Asab": { + "email": "asab@asab.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Redux", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 25, + "isLoggedIn": false, + "points": 50 + }, + "Brook": { + "email": "daniel@daniel.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux" + ], + "age": 30, + "isLoggedIn": true, + "points": 50 + }, + "Daniel": { + "email": "daniel@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Python" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "John": { + "email": "john@john.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node.js" + ], + "age": 20, + "isLoggedIn": true, + "points": 50 + }, + "Thomas": { + "email": "thomas@thomas.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "Paul": { + "email": "paul@paul.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + } +} +``` + +### Using a Filter Array with JSON.stringify + +Now, lets use the replacer as a filter. The user object has long list of keys but we are interested only in few of them. We put the keys we want to keep in array as show in the example and use it the place of the replacer. + +```js +const user = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + country: 'Finland', + city: 'Helsinki', + email: 'alex@alex.com', + skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Pyhton'], + age: 250, + isLoggedIn: false, + points: 30 +} + +const txt = JSON.stringify(user,['firstName', 'lastName', 'country', 'city', 'age'],4) +console.log(txt) +``` + +```sh +{ + "firstName": "Asabeneh", + "lastName": "Yetayeh", + "country": "Finland", + "city": "Helsinki", + "age": 250 +} +``` + +### Exercises + +```js +const skills = ['HTML', 'CSS', 'JS', 'React','Node', 'Python'] +let age = 250; +let isMarried = true +const student = { + firstName:'Asabeneh', + lastName:'Yetayehe', + age:250, + isMarried:true, + skills:['HTML', 'CSS', 'JS', 'React','Node', 'Python', ] +} +const txt = `{ + "Alex": { + "email": "alex@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript" + ], + "age": 20, + "isLoggedIn": false, + "points": 30 + }, + "Asab": { + "email": "asab@asab.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Redux", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 25, + "isLoggedIn": false, + "points": 50 + }, + "Brook": { + "email": "daniel@daniel.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux" + ], + "age": 30, + "isLoggedIn": true, + "points": 50 + }, + "Daniel": { + "email": "daniel@alex.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "Python" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "John": { + "email": "john@john.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node.js" + ], + "age": 20, + "isLoggedIn": true, + "points": 50 + }, + "Thomas": { + "email": "thomas@thomas.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "React" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + }, + "Paul": { + "email": "paul@paul.com", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "MongoDB", + "Express", + "React", + "Node" + ], + "age": 20, + "isLoggedIn": false, + "points": 40 + } +} +` +``` + +### Exercises Level 1 + +1. Change skills array to JSON using JSON.stringify() +1. Stringify the age variable +1. Stringify the isMarried variable +1. Stringify the student object + +### Exercises Level 2 + +1. Stringify the students object with only firstName, lastName and skills properties + + +## Higher Order Function + +Higher order functions are functions which take other function as a parameter or return a function as a value. The function passed as a parameter is called callback. + +### Callback + +A callback is a function which can be passed as parameter to other function. See the example below. + +```js +// a callback function, the function could be any name +const callback = (n) => { + return n ** 2 +} +​ +// function take other function as a callback +function cube(callback, n) { + return callback(n) * n +} +​ +console.log(cube(callback, 3)) +``` + +### Returning function + +Higher order functions return function as a value +​ + +```js +// Higher order function returning an other function +const higherOrder = n => { + const doSomething = m => { + const doWhatEver = t => { + return 2 * n + 3 * m + t + } + return doWhatEver + } +​ + return doSomething +} +console.log(higherOrder(2)(3)(10)) +``` + +Let us see were we use call back functions.For instance the _forEach_ method uses call back. + +```js +const numbers = [1, 2, 3, 4] +​ +const sumArray = arr => { + let sum = 0 + const callBack = function(element) { + sum += element + } + numbers.forEach(callback) + return sum + +} +console.log(sumArray(numbers)) +``` + +```sh +15 +``` + +The above example can be simplified as follows: + +```js +const numbers = [1, 2, 3, 4] +​ +const sumArray = arr => { + let sum = 0 + numbers.forEach(function(element) { + sum += element + }) + return sum + +} +console.log(sumArray(numbers)) +``` + +```sh +15 +``` + +### setting time + +In JavaScript we can execute some activity on certain interval of time or we can schedule(wait) for sometime to execute some activities. + +- setInterval +- setTimeout + +#### setInterval + +In JavaScript, we use setInterval higher order function to do some activity continuously with in some interval of time. The setInterval global method take a callback function and a duration as a parameter. The duration is in milliseconds and the callback will be always called in that interval of time. + +```js +// syntax +function callBack() { + // code goes here +} +setInterval(callback, duration) +``` + +```js +function sayHello() { + console.log('Hello') +} +setInterval(sayHello, 2000) // it prints hello in every 2 seconds +``` + +#### setTimeout + +In JavaScript, we use setTimeout higher order function to execute some action at some time in the future. The setTimeout global method take a callback function and a duration as a parameter. The duration is in milliseconds and the callback wait for that amount of time. + +```js +// syntax +function callback() { + // code goes here +} +setTimeout(callback, duration) // duration in milliseconds +``` + +```js +function sayHello() { + console.log('Hello') +} +setTimeout(sayHello, 2000) // it prints hello after it waits for 2 seconds. +``` + +### Exercises Level 3 + +1. Parse the *txt* JSON to object. +2. Find the the user who has many skills from the variable stored in *txt*. + +## Functional Programming + +- *forEach*: Iterate an array elements and use for array. It takes a callback function with elements and index parameter. + +```js +arr.forEach(function(element, index){ + console.log(index, element) +}) +// The above code can be written using arrow function +arr.forEach((element, index) => { + console.log(index, element) +}) +// The above code can be written using arrow function and explicit return +arr.forEach((element, index) => console.log(index, element)); +``` + +- *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. + +```js +const modifiedArray = arr.map(function(element,index){ + return element +}); +/*Arrow function and explicit return +const modifiedArray = arr.map((element,index) => element); +*/ +//Example +const numbers = [1,2,3,4,5]; +const numbersSquare = numbers.map((num) => num * num) +console.log(numbersSquare) // [1,4,9,16,25] +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; +const namesToUpperCase = names.map((name) => name.toUpperCase()); +console.log(namesToUpperCase) //['ASABENEH', 'MATHIAS', 'ELIAS', 'BROOK'] +const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary', + 'Ireland', + 'Japan', + 'Kenya' +]; +const countriesToUpperCase = countries.map(function(country){ + return country.toUpperCase(); +}); +console.log(countriesToUpperCase) +// ['ALBANIA', 'BOLIVIA', 'CANADA', 'DENMARK', 'ETHIOPIA', 'FINLAND', 'GERMANY', 'HUNGARY', 'IRELAND', 'JAPAN', 'KENYA'] +/* +// Arrow function +const countriesToUpperCase = countries.map((country) => { + return country.toUpperCase(); +}) +//Explicit return arrow function +const countriesToUpperCase = countries.map(country => country.toUpperCase()); +*/ +``` + +- *Filter*: Filter out items which full fill filtering conditions + +```js + +// Filter countries containing land +const countriesContainingLand = countries.filter(country => country.includes('land')); +console.log(countriesContainingLand ) //['Finland', 'Ireland'] + +const countriesEndByia = countries.filter(country => country.includes('ia')); +console.log(countriesEndByia) //['Albania', 'Bolivia','Ethiopia'] + +const countriesHaveFiveLetters = countries.filter(country => country.length === 5); +console.log(countriesHaveFiveLetters ) //  ['Japan', 'Kenya'] + +const scores = [{name:'Asabeneh', score:95},{name:'Mathias', score:80},{name:'Elias', score:50},{name:'Martha', score:85},{name:'John', score:100}]; + +const scoresGreaterEight = scores.filter((score) => score.score > 80); +console.log(scoresGreaterEight) //[{name: 'Asabeneh', score: 95}, {name: 'Martha', score: 85},{name: 'John', score: 100}] +``` + +- *reduce*: Reduce takes a callback function. The call back function takes accumulator and current value as a parameter and returns a single value: + +```js + const numbers = [1,2,3,4,5]; + const sum = numbers.reduce((accum, curr)=> accum + curr); + + console.log(sum); // 15 +``` + +- *every*: Check if all the elements are similar in one aspect. It returns boolean + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; +const bools = [true, true, true, true]; +const result = bools.every((b)=> { + return b === true; +}); + +console.log(result) //true + +const checkType = names.every((name) => typeof name ==='string'); + +console.log(checkDataTypes) // true; +``` + +- *some*: Check if some of the elements are similar in one aspect. It returns boolean + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; +const bools = [true, true, true, true]; +const result = bools.some((b)=> { + return b === true; +}); +console.log(result) //true +const checkType = names.some((name) => typeof name ==='number'); +console.log(checkDataTypes) // false +``` + +- *find*: Return the first element which satisfies the condition + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; +const ages = [24, 22,25,32,35,18]; +const result = names.find(name => name.length > 7); +console.log(result) // Asabeneh +const age = ages.find((age) => age < 20); +console.log(age) // 18 +``` + +- *findIndex*: Return the position of the first element which satisfies the condition + +```js +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; +const ages = [24, 22,25,32,35,18]; +const result = names.findIndex(name => name.length > 7); +console.log(result) // 0 + +const age = ages.findIndex((age) => age < 20); +console.log(age) // 5 +``` + +- *sort*: The sort methods arranges the array elements either ascending or descending order. By default, the ***sort()*** method sorts values as strings.This works well for string array items but not for numbers. If number values are sorted as strings and it give us wrong result. Sort method modify the original array. It is recommended to copy the original document before you start sorting. + +- *Sorting string values* + +```js +const products = ['Milk', 'Coffee', 'Sugar', 'Honey', 'Apple', 'Carrot']; +console.log(products.sort()) // ['Apple', 'Carrot', 'Coffee', 'Honey', 'Milk', 'Sugar'] +//Now the original products array is also sorted +``` + +- *Sorting Numeric values* + +As you can see in the example below, 100 came first after sorted in ascending order. Sort converts items to string , since '100' and other numbers compared, 1 which the beginning of the string '100' became the smallest. To avoid this, we use a compare call back function inside the sort method, which return a negative, zero or positive. + +```js +const numbers = [9.81, 3.14, 100, 37] +// Using sort method to sort number items provide a wrong result. see below +console.log(numbers.sort()) //[100, 3.14, 37, 9.81] +numbers.sort(function(a, b) { +return a - b; +}) + +console.log(numbers) // [3.14, 9.81, 37, 100] +numbers.sort(function(a, b) { +return b - a; +}); +console.log(numbers) //[100, 37, 9.81, 3.14] + +``` + +- *Sorting Object Arrays* + +When ever we sort objects in an array. We use the object key to compare. Lets see the example below. + +```js +objArr.sort(function(a, b) { + if (a.key < b.key) return -1; + if (a.key > b.key) return 1; + return 0; +}); + +// or + +objArr.sort(function(a, b) { + if (a['key'] < b['key']) return -1; + if (a['key'] > b['key']) return 1; + return 0; +}); + +const users = [{name:'Asabeneh', age:150}, {name:'Brook', age:50}, {name:'Eyo', age:100},{name:'Elias', age:22}]; +users.sort((a, b) => { + if (a.age < b.age) return -1; + if (a.age > b.age) return 1; + return 0; +}); + +console.log(users); // sorted ascending +//[{…}, {…}, {…}, {…}] +``` + +### Exercises + +```js + const countries = ['Estonia', 'Finland', 'Sweden', 'Denmark', 'Norway', 'IceLand']; + const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; + const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] +``` + +1. Explain the difference between ***forEach, map, filter, and reduce***. +2. Define a call function before you them in forEach, map, filter or reduce. +3. Use ***forEach*** to console.log each country in the countries array. +4. Use ***forEach*** to console.log each name in the names array. +5. Use ***forEach*** to console.log each number in the numbers array. +6. Use ***map*** to create a new array by changing each country to uppercase in the countries array; +7. Use ***map*** to create a new array by changing each number to square in the numbers array +8. Use ***map*** to change to each name to uppercase in the names array +9. Use ***filter*** to filter out countries containing ***land***. +10. Use ***filter*** to filter out countries having six character. +11. Use ***filter*** to filter out countries containing six letters and more in the country array. +12. Use ***filter*** to filter out country start with 'E'; +13. Chain two or more array iterators(eg. arr.map(callback).filter(callback).reduce(callback)) +14. Declare a function called getStringLists which takes an array as a parameter and then returns an array only with string items. +15. Use ***reduce*** to sum all the numbers in the numbers array. +16. Use ***reduce*** to concatenate all the countries and to produce this sentence: ***Estonia, Finland, Sweden, Denmark, Norway, and IceLand are north European countries*** +17. Explain the difference between ***some*** and ***every*** +18. Use ***some*** to check if some names' length greater than seven in names array +19. Use ***every*** to check if all the countries contain the word land +20. Explain the difference between ***find*** and ***findIndex***. +21. Use ***find*** to find the first country containing only six letters in the countries array +22. Use ***findIndex*** to find the position of the first country containing only six letters in the countries array +23. Use ***findIndex*** to find the position of ***Norway*** if it doesn't exist in the array you will get -1. +24. Use ***findIndex*** to find the position of ***Russia*** if it doesn't exist in the array you will get -1. +25. Declare a function called ***categorizeCountries*** which returns an array of countries which have some common pattern(you find the countries array in this repository as countries.js(eg 'land', 'ia', 'island','stan')). +26. Create a function which return an array of objects, which is the letter and the number of times the letter use to start with a name of a country. +27. Declare a ***getFirstTenCountries*** function and return an array of ten countries. Use different functional programming to work on the countries.js array +28. Declare a ***getLastTenCountries*** function which which returns the last ten countries in the countries array. +29. Find out which *letter* is used many *times* as initial for a country name from the countries array (eg. Finland, Fiji, France etc) +30. Use the countries information, in the data folder. Sort countries by name, by capital, by population +31. Sort out the ten most spoken languages by location. +32. Sort out the ten most populated countries. + +## Destructuring and Spread + +Destructuring is a way to unpack arrays, and objects and assigning to a distinct variable. + +### Destructing Arrays + +```js + const numbers = [1, 2,3]; + let [numOne, numTwo, numThree] = numbers; + console.log(numOne, numTwo, numThree) // 1,2,3 + const names = ['Asabeneh', 'Brook', 'David', 'John'] + let [firstPerson, secondPerson, ThirdPerson, fourth Person] = names; + console.log(firstName, secondPerson,thirdPerson, fourthPerson) //Asabeneh, Brook, David, John + const scientificConstants = [2.72, 3.14, 9.81, 37, 100]; + let [e, pi, gravity, bodyTemp, boilingTemp] = scientificConstants + console.log(e,pi,gravity, bodyTemp, boilingTemp) //2.72, 3.14, 9.81, 37, 100 +``` + +If we like to skip on of the values in the array we use additional comma. The comma helps to omit the value at that index + +```js + const numbers = [1, 2,3]; + let [numOne, , , numThree] = numbers; //2 is omitted + console.log(numOne,, numThree) // 1,2,3 + const names = ['Asabeneh', 'Brook', 'David', 'John'] + let [, secondPerson, , fourth Person] = name; // first and third person is omitted + console.log(secondPerson, fourthPerson) //Brook, John +``` + +We can use default value in case the value of array for that index is undefined: + +```js +const names = [undefined, 'Brook', 'David']; +let [firstPerson = 'Asabeneh', secondPerson, thirdPerson, fourthPerson = 'John' ] = names; +console.log(firstPerson, secondPerson, thirdPerson, fourthPerson) // Asabeneh Brook David John +``` + +#### Destructuring Object + +When we destructure the name of the variable we use to destructure should be exactly the same us the key or property of the object. See example below. + +```js +const rectangle = { + width: 20, + height:10, + area: 200 +} +let {width, height, area, perimeter} = rectangle; +console.log(width, height, area, perimeter) //20 10 200 undefined +``` + +#### Renaming during structuring + +```js +const rectangle = { + width: 20, + height:10, + area: 200 +} +let {width:w, heigh:h, area:a, perimeter:p} = rectangle; +console.log(w, h, a, p) //20 10 200 undefined +``` + +If the key is not found in the object the variable will be assigned to undefined. In case, the key is not in the object we can give a default value during declaration. See the example. + +```js +const rectangle = { + width: 20, + height:10, + area: 200 +} +let {width, heigh, area, perimeter = 60} = rectangle; +console.log(width, height, area, perimeter) //20 10 200 60 + +//Lets modify the object:width to 30 and perimeter to 80 +const rectangle = { + width: 30, + height:10, + area: 200, + perimeter:80 +} +let {width, heigh, area, perimeter = 60} = rectangle; +console.log(width, height, area, perimeter) //20 10 200 80 +``` + +Destructuring keys as a function parameters. Lets create a function which take a rectangle object and it return a perimeter of a rectangle. + +```js + // Without destructuring + const rect = { + width:20, + height:10 + } + const calculatePerimeter = (rectangle) => { + return 2 * (rectangle.width + rectangle.height) + } + console.log(calculatePerimeter(rect)) // 60 + //with destructuring + + const calculatePerimeter = ({width, height}) => { + return 2 * (width + height) + } + + console.log(calculatePerimeter(rect)) // 60 + + //Another Example +const person = { + firstName: 'Asabeneh', + lastName: 'Yetayeh', + age: 200, + country: 'Finland', + job: 'Instructor and Developer', + skills: [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB', + 'Python', + 'D3.js' + ], + languages: ['Amharic', 'English', 'Suomi(Finnish)'] +}; +// Lets create a function which give information about the person object without destructuring + +const getPersonInfo = obj => { + const skills = obj.skills; + const formattedSkills = skills.slice(0, -1).join(', '); + const languages = obj.languages; + const formattedLanguages = languages.slice(0, -1).join(', '); + + return `${obj.firstName} ${obj.lastName} lives in ${obj.country}. He is ${ + obj.age + } years old. He is an ${obj.job}. He teaches ${formattedSkills} and ${ + skills[skills.length - 1] + }. He speaks ${formattedLanguages} and a little bit of ${languages[2]}.`; +}; +console.log(getPersonInfo(person)); +// Lets create a function which give information about the person object with destructuring + +const getPersonInfo = ({ + firstName, + lastName, + age, + country, + job, + skills, + languages +}) => { + const formattedSkills = skills.slice(0, -1).join(', '); + const formattedLanguages = languages.slice(0, -1).join(', '); + + return `${firstName} ${lastName} lives in ${country}. He is ${age} years old. He is an ${job}. He teaches ${formattedSkills} and ${skills[skills.length - 1]}. He speaks ${formattedLanguages} and a little bit of ${languages[2]}.`; +}; +console.log(getPersonInfo(person)) +/* +Asabeneh Yetayeh lives in Finland. He is 200 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speaks Amharic, English and a little bit of Suomi(Finnish) +*/ +``` + +### Spread or Rest Operator + +#### Exercise: Destructuring + ```js - sum(1, 2, 3); // -> 6 - sum(1, 2, 3, 4); // -> 10 - ``` -1. Writ a function which generates a _randomUserIp_. -1. Write a function which generates a _randomMacAddress_ -1. Declare a function name _randomHexaNumberGenerator_. When this function is called it generates a random hexadecimal number. The function return the hexadecimal number. - ```she - console.log(randomHexaNumberGenerator()); - '#ee33df' - ``` -1. Declare a function name _userIdGenerator_. When this function is called it generates seven character id. The function return the id. - ```sh - console.log(userIdGenerator()); - 41XTDbE - ``` -1. Modify question number n . Declare a function name _userIdGeneratedByUser_. It doesn’t take any parameter but it takes two inputs using prompt(). One of the input is the number of characters and the second input is the number of ids which are supposed to be generated. - ```sh - userIdGeneratedByUser() - "kcsy2 - SMFYb - bWmeq - ZXOYh - 2Rgxf - " - userIdGeneratedByUser() - "1GCSgPLMaBAVQZ26 - YD7eFwNQKNs7qXaT - ycArC5yrRupyG00S - UbGxOFI7UXSWAyKN - dIV0SSUTgAdKwStr - " - ``` -1. Write a function name _rgbColorGenerator_ and it generates rgb colors. - ```sh - rgbColorGenerator() - rgb(125,244,255) + const constants = [2.72, 3.14, 9.81,37, 100] + const countries = ['Finland', 'Estonia', 'Sweden', 'Denmark', 'Norway'] + + const rectangle = { + width:20, + height:10, + area:200, + perimeter:60 + } ``` -1. Write a function ***arrayOfHexaColors*** which return any number of hexadecimal colors in an array. -2. Write a function ***arrayOfRgbColors*** which return any number of RGB colors in an array. -3. Write a function ***convertHexaToRgb*** which converts hexa color to rgb and it returns an rgb color. -4. Write a function ***convertRgbToHexa*** which converts rgb to hexa color and it returns an hexa color. -5. Write a function ***generateColors*** which can generate any number of hexa or rgb colors. - ```js - generateColors('hexa', 3) - ['#a3e12f','#03ed55','#eb3d2b'] - generateColors('hexa', 1) - '#b334ef' - generateColors('rgb', 3) - ['rgb(5, 55, 175','rgb(50, 105, 100','rgb(15, 26, 80'] - generateColors('rgb', 1) - 'rgb(33,79, 176)' + 1. Assign the elements of constants array to e, pi, gravity, humanBodyTemp, waterBoilingTemp. + 2. Assign the elements of countries array to fin, est, sw, den, nor + 3. Destructure the rectangle object by its properties or keys. + +## Map and Set + +## Set + +Set is a collection of unique elements. Lets see how to create a set + +### Creating a set + +```js + const companies = new Set() +``` + +### Adding an element to a set + +```js + console.log(companies.size) // 0 + companies.add('Google') // add element to the set + companies.add('Facebook') + companies.add('Amazon') + companies.add('Oracle') + companies.add('Microsoft') + console.log(companies.size) // 5 elements in the set +``` + +### Deleting an element a set + +```js +console.log(companies.delete('Google')) +console.log(companies.size) // 4 elements left in the set +``` + +### Checking an element in the set + +```js +console.log(companies.has('Google')) // false +console.log(companies.has('Facebook')) // true +``` + +### Clearing the set + +It removes all the elements + +```js + companies.clear() +``` + +See the example below to learn how to use set. + +```js + +const languages = [ + 'English', + 'Finnish', + 'English', + 'French', + 'Spanish', + 'English', + 'French' +] +const langSet = new Set(languages) +console.log(langSet) +console.log(langSet.size) + +const counts = [] +const count = {} + +for (const l of langSet) { + const filteredLang = languages.filter(lng => lng === l) + console.log(filteredLang) + counts.push({ lang: l, count: filteredLang.length }) +} +console.log(counts) +``` + +## Set + +Set is a collection a collection of elements. Set can only contains unique elements. +Lets see how to create a set + +### Creating an empty set + +```js +const companies = new Set() +console.log(companies) +``` + +```sh +{} +``` + +### Creating set from array + +```js +const languages = [ + 'English', + 'Finnish', + 'English', + 'French', + 'Spanish', + 'English', + 'French' +] + +const setOfLangauges = new Set(languages) +console.log(setOfLangauges) +``` + +```sh +Set(4) {"English", "Finnish", "French", "Spanish"} +``` + +Set is an iterable object and we can iterate through each elements. + +```js +const languages = [ + 'English', + 'Finnish', + 'English', + 'French', + 'Spanish', + 'English', + 'French' +] + +const setOfLangauges = new Set(languages) + +for (const language of setOfLangauges) { + console.log(language) +} +``` + +```sh + English + Finnish + French + Spanish +``` + +### Adding an element to a set + +```js +const companies = new Set() // creating an empty set +console.log(companies.size) // 0 + +companies.add('Google') // add element to the set +companies.add('Facebook') +companies.add('Amazon') +companies.add('Oracle') +companies.add('Microsoft') + +console.log(companies.size) // 5 elements in the set +console.log(companies) +``` + +```sh +Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"} +``` + +We can also use loop to add element to a set. + +```js +const companies = ['Google', 'Facebook', 'Amazon', 'Oracle', 'Microsoft'] +setOfCompanies = new Set() +for (const company of companies) { + setOfCompanies.add(company) +} +``` + +```sh +Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"} + +``` + +### Deleting an element a set + +We can delete an element from a set using a delete method. + +```js +console.log(companies.delete('Google')) +console.log(companies.size) // 4 elements left in the set +``` + +### Checking an element in the set + +The has method can help to know if a certain element exists in a set. + +```js +console.log(companies.has('Apple')) // false +console.log(companies.has('Facebook')) // true +``` + +### Clearing the set + +It removes all the elements from a set. + +```js +companies.clear() + +console.log(companies) +``` + +```sh +{} + +``` + +See the example below to learn how to use set. + +```js +const languages = [ + 'English', + 'Finnish', + 'English', + 'French', + 'Spanish', + 'English', + 'French' +] +const langSet = new Set(languages) +console.log(langSet) // Set(4) {"English", "Finnish", "French", "Spanish"} +console.log(langSet.size) // 4 + +const counts = [] +const count = {} + +for (const l of langSet) { + const filteredLang = languages.filter(lng => lng === l) + console.log(filteredLang) // ["English", "English", "English"] + counts.push({ lang: l, count: filteredLang.length }) +} +console.log(counts) +``` + +```js +[ + { lang: 'English', count: 3 }, + { lang: 'Finnish', count: 1 }, + { lang: 'French', count: 2 }, + { lang: 'Spanish', count: 1 } +] +``` + +Other use case of set. For instance to count unique item in an array. + +```js +const numbers = [5, 3, 2, 5, 5, 9, 4, 5] +const setOfNumbers = new Set(numbers) + +console.log(setOfNumbers) +``` + +```sh +Set(5) {5, 3, 2, 9, 4} +``` + +### Union of sets + +To find a union to two sets can be achieved using spread operator. Lets find the union of set A and set B (A U B) + +```js +let a = [1, 2, 3, 4, 5] +let b = [3, 4, 5, 6] +let c = [...a, ...b] + +let A = new Set(a) +let B = new Set(b) +let C = new Set(c) + +console.log(C) +``` + +```sh +Set(6) {1, 2, 3, 4, 5,6} + +``` + +### Intersection of sets + +To find an intersection of two sets can be achieved using filter. Lets find the union of set A and set B (A ∩ B) + +```js +let a = [1, 2, 3, 4, 5] +let b = [3, 4, 5, 6] + +let A = new Set(a) +let B = new Set(b) + +let c = a.filter(num => B.has(num)) +let C = new Set(c) + +console.log(C) +``` + +```sh +Set(3) {3, 4, 5} + +``` + +### Difference of sets + +To find an the difference between two sets can be achieved using filter. Lets find the different of set A and set B (A \ B) + +```js +let a = [1, 2, 3, 4, 5] +let b = [3, 4, 5, 6] + +let A = new Set(a) +let B = new Set(b) + +let c = a.filter(num => !B.has(num)) +let C = new Set(c) + +console.log(C) +``` + +```sh +Set(2) {1, 2} + +``` + +## Map + +### Creating an empty Map + +```js +const map = new Map() +console.log(map) +``` + +```sh +Map(0) {} +``` + +### Creating an Map from array + +```js +countries = [ + ['Finland', 'Helsinki'], + ['Sweden', 'Stockholm'], + ['Norway', 'Oslo'] +] +const map = new Map(countries) +console.log(map) +console.log(map.size) +``` + +```sh +Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"} +3 +``` + +### Adding values to the Map + +```js +const countriesMap = new Map() +console.log(countriesMap.size) // 0 +countriesMap.set('Finland', 'Helsinki') +countriesMap.set('Sweden', 'Stockholm') +countriesMap.set('Norway', 'Oslo') +console.log(countriesMap) +console.log(countriesMap.size) +``` + +```sh +Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"} +3 +``` + +### Getting a value from Map + +```js +console.log(countriesMap.get('Finland')) +``` + +```sh +Helsinki +``` + +### Checking key in Map + +Check if a key exist in a map using *has* method. It returns *true* or *false*. + +```js +console.log(countriesMap.has('Finland')) +``` + +```sh +true +``` + +Getting all values from map using loop + +```js +for (const country of countriesMap) { + console.log(country) +} +``` + +```sh +(2) ["Finland", "Helsinki"] +(2) ["Sweden", "Stockholm"] +(2) ["Norway", "Oslo"] +``` + +```sh +for (const [country, city] of countriesMap){ +console.log(country, city) +} +``` + +```sh +Finland Helsinki +Sweden Stockholm +Norway Oslo +``` + +### Exercises: Set and Map + +### Exercises:Level 1 + +```js +const a = {4, 5, 8, 9} +const b = {3, 4, 5, 7} +const countries = ['Finland', 'Sweden', 'Norway'] +``` + +1. create an empty set +2. Create a set containing 0 to 10 using loop +3. Remove an element from a set +4. Clear a set +5. Create a set of 5 string elements from array +6. Create a map of countries and number of characters of a country + +### Exercises:Level 2 + +1. Find a union b +2. Find a intersection b +3. Find a with b + +### Exercises:Level 3 + +1. How many languages are there in the countries object file. + +1. \*\*\* Use the countries data to find the 10 most spoken languages: + + ````js + // Your output should look like this + console.log(mostSpokenLanguages(countries, 10)) + [ + {'English':91}, + {'French':45}, + {'Arabic':25}, + {'Spanish':24}, + {'Russian':9}, + {'Portuguese':9}, + {'Dutch':8}, + {'German':7}, + {'Chinese':5}, + {'Swahili':4}, + {'Serbian':4}] + + // Your output should look like this + console.log(mostSpokenLanguages(countries, 3)) + + [ + {'English':91}, + {'French':45}, + {'Arabic':25} + ]```` + +## Document Object Model (DOM) + +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. + +### Getting Element + +```html + + + + Document Object Model/title> + </head> + <body> + <h1 class='title' id='first-title'>First Title</h1> + <h1 class='title' id='second-title'>Second Title</h1> + <h1 class='title' id='third-title'>Third Title</h1> + <h1></h1> + </body> + </html> +``` + +#### Getting elements by tag name - ``` -6. Call your function _shuffleArray_, it takes an array as a parameter and it returns a shuffled array -7. Call your function _factorial_, it takes a whole number as a parameter and it return a factorial of the number -8. Call your function _isEmpty_, it takes a parameter and it checks if it is empty or not -9. Call your function _sum_, it takes any number of arguments and it returns the sum. -10. Write a function called _sumOfArrayItems_, it takes an array parameter and return the sum of all the items. Check if all the array items are number types. If not give return reasonable feedback. -11. Write a function called _average_, it takes an array parameter and returns the average of the items. Check if all the array items are number types. If not give return reasonable feedback. -12. Write a function called _modifyArray_ takes array as parameter and modifies the fifth item of the array and return the array. If the array length is less than five it return 'item not found'. - ```js - console.log(modifyArray(["Avocado", "Tomato", "Potato","Mango", "Lemon","Carrot"]); - // →["Avocado", "Tomato", "Potato","Mango", "LEMON", "Carrot"] - console.log(modifyArray(["Google", "Facebook","Apple", "Amazon","Microsoft", "IBM"]); - // →["Google", "Facebook","Apple", "Amazon","MICROSOFT", "IBM"] - console.log(modifyArray(["Google", "Facebook","Apple", "Amazon"]); - // →"Not Found" - ``` -13. Write a function called *isPrime*, which checks if a number is prime number. -14. Write a functions which checks if all items are unique in the array. -15. Write a function which checks if all the itmes of the array are the same data type. -1. JavaScript variable name does not support special characters or symbols execpt $ or _. Write a function ***isValidVariable** which check if a variable is valid or invlaid variable. -16. Write a function which returns array of seven random numbers in a range of 0-9. All the numbers must be unique. - ```js - sevenRandomNumbers()[(1, 4, 5, 7, 9, 8, 0)]; - ``` +***getElementsByTagName()*** method returns an HTMLCollection object. An HTMLCollection is an array like list of HTML elements. The length property provides the size of the collection. + +```js +const allTitles = document.getElementsByTagName('h1'); +console.log(allTitles) //HTMCollections +console.log(allTitles.length) // 4 +for(let i = 0; i < allTitles.length; i++){ + console.log(allTitles[i]) // prints each elements in the HTMLCollection +} +``` +#### Getting elements by class name -## Object +***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 -Everything can be an object and objects do have properties and properties have values. +```js +const allTitles = document.getElementsByClassName('title'); +console.log(allTitles) //HTMCollections +console.log(allTitles.length) // 4 +for(let i = 0; i < allTitles.length; i++){ + console.log(allTitles[i]) // prints each elements in the HTMLCollection +} +``` -Creating an object literal. To create an object literal, we use two curely brackets. +#### Getting an element by id -An empty object +***getElementsById()*** targets a single HTML element. We pass the id without # as an argument. ```js -const person = {}; +let firstTitle = document.getElementById('first-title'); +console.log(firstTitle) // <h1>First Title</h1> ``` -Now, the person object has firstName, lastName, age, location, skills and getFullName properties. The getFullName is function inside the person object and we call it method. The _this_ key word refers to the object itself.Example of object: +#### Getting elements by using querySelector using tag, class and id: + +***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. ```js -const person = { - firstName: "Asabeneh", - lastName: "Yetayeh", - age: 100, - location: "Helsinki", - skills: [ - "HTML", - "CSS", - "JavaScript", - "React", - "Node", - "MongoDB", - "Python", - "D3.js" - ], - getFullName: function() { - return `${this.firstName}${this.lastName}`; +let firstTitle = document.querySelect('h1');// select the first available h2 element +let firstTitle = document.querySelector('#first-title'); // select id with first-title +let firstTitle = document.querySelector('.title'); // select the first available h2 element with class title +``` + +***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. + +```js +const allTitles = document.querySelectAll('h1'); +console.log(allTitles.length) // 4 +for(let i = 0; i < allTitles.length; i++){ + console.log(allTitles[i]); +} +allTitles.forEach(title => console.log(title)) +const allTitles = document.querySelectorAll('.title'); // the same goes for selecting using class +``` + +### Adding attribute + +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. + +#### Adding attribute using setAttribute + +The ***setAttribute()*** method set any html attribute. It takes two parameters the type of the attribute and the name of the attribute. +Let's add class and id attribute for the fourth title. + +```js +const titles = document.querySelectorAll('h1'); +titles[3].setAttribute('class', 'title'); +titles[3].setAttribute('id', 'fourth-title'); +``` + +#### Adding attribute without setAttribute + +Some attributes are DOM object property and they can be set directly. For instance id and class + +```js +//another way to setting an attribute +titles[3].className = 'title'; +titles[3].id = 'fourth-title'; +``` + +#### Adding class using classList + +The class list method is a good method to append additional class. It doesn't override the original class if a class exists + +```js +//another way to setting an attribute: append the class, doesn't over ride +titles[3].classList.add('title', 'header-title') +``` + +### Adding Text content + +```js +const titles = document.querySelectorAll('h1'); +titles[3].textContent = 'Fourth Title'; +``` + +### Adding style + +Lets add some style to our titles. If the element has even index we give it green color else red. + +```js +const titles = document.querySelectorAll('h1'); +titles.forEach((title,i) => { + title.fontSize = '24px'; // all titles will have 24px font size + if(i % 2 === 0){ + title.style.color = 'green'; } -}; + else { + title.style.color = 'red'; + } +}) -const rectangle = { - length: 20, - width: 20, - getArea: function() { - return this.length * this.width; - }, - getPerimeter: function() { - return 2 * (this.length + this.width); +``` + +### Creating an Element + +```js +let title = document.createElement('h1'); +let firstTitle = document.getElementById('first-title'); +``` + +### Creating elements + +```js +let firstTitle = document.getElementById('first-title'); +let title +for(let i = 0; i < 3; i++){ + title = document.createElement('h1'); + title.className = 'title'; + title.style.fontSize = '24px'; +} +``` + +### Appending to a parent element + +```js +// creating multiple elements and appending to parent element +let title; +for(let i = 0; i < 3; i++){ + title = document.createElement('h1'); + title.className = 'title'; + title.style.fontSize = '24px'; + document.body.appendChild(title); +} +``` + +### Event Listeners + +Common HTML events:onclick, onchange, onmouseover, onmouseout, onkeydown, onkeyup, onload. +We can add event listener method to any DOM object. Use use ***addEventListener()*** method to listen different event types on HTML elements. +The following is an example of click type event. + +```js +const button = document.querySelector('button'); +button.addEventListener('click', e => { + console.log(e.target); +}); +``` + +### Getting value from an input element + +We usually fill forms and forms accept data. Form fields are created using input HTML element. + +```html +<input type ='text' placeholder = 'Mass in Kilogram' /> +<input type = 'text' placeholder = 'Height in meters' /> +<button>Calculate BMI</button> +``` + +```js +const mass = document.querySelector('#mass'); +const height = document.querySelector('#height'); +const button = document.querySelector('button'); +let bmi; +button.addEventListen('click', ()=>{ + bmi = mass.value * height.value; +}); + +console.log(bmi) +``` + +#### Exercises:Document Object Model + +```html + <!-- index.html --> +<!DOCTYPE html> + <html> + <head> + <title>JavaScript for Everyone:DOM + + +

First Paragraph

+

Second Paragraph

+

Third Paragraph

+

+ + +``` + + 1. Create an index.html file and put four p elements as above: Get the first paragraph by using ***document.querySelector(tagname)*** and tag name + 2. Get get each of the the paragraph using ***document.querySelector('#id')*** and by their id + 3. Get all the p as nodeList using ***document.querySelectorAll(tagname)*** and by their tag name + 4. Loop through the nodeList and get the text content of each paragraph + 5. Set a text content to paragraph the fourth paragraph,***Fourth Paragraph*** + 6. Set id and class attribute for all the paragraphs using different attribute setting methods + 7. Change stye of each paragraph using JavaScript(eg. color, background, border, font-size, font-family) + 8. 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 + 9. Remove all the paragraph and create them using JavaScript + 10. Set text content, id and class to each paragraph + 11. 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. + 12. Use the rgb color generator function or hexaColor generator to create 10 divs with random background colors + 13. Use the countries.js to visualize all the countries on the HTML document. You need one wrapper div and box for each countries. In the box display, the letter the country starts with, the name of the country and the number of characters for the country name. + +#### DOM: Mini Projects + +1. BMI calculator +2. Hexadecimal or RGB color Generator +3. World Countries List + +## Classes + +JavaScript is an object oriented programming language. Everything in JavScript is an object, with its properties and methods. We create class to create an object. A Class is like an object constructor, or a "blueprint" for creating objects. We instantiate a class to create an object. The class defines attributes and the behavior of the object, while the object, on the other hand, represents the class. + +Once we create a class we can create object from it whenever we want. Creating an object from a class is called class instantiation. + +In the object section, we saw how to create an object literal. Object literal is a singleton. If we want to get a similar object , we have to write it. However, class allows to create many objects. This helps to reduce amount of code and repetition of code. + +### Defining a classes + +To define a class in JavaScript we need the keyword _class_ , the name of a class in **CamelCase** and block code(two curly brackets). Let us create a class name Person. + +```sh +// syntax +class ClassName { + // code goes here +} + +``` + +**Example:** + +```js +class Person { + // code goes here +} +``` + +We have created an Person class but it does not have any thing inside. + +### Class Instantiation + +Instantiation class means creating an object from a class. We need the keyword _new_ and we call the name of the class after the word new. + +Let us create a dog object from our Person class. + +```js +class Person { + // code goes here +} +const person = new Person() +console.log(person) +``` + +```sh +Person {} +``` + +As you can see, we have created a person object. Since the class did not have any properties yet the object is also empty. + +Let use the class constructor to pass different properties for the class. + +### Class Constructor + +The constructor is a builtin function which allows as to create a blueprint for our object. The constructor function starts with a keyword constructor followed by a parenthesis. Inside the parenthesis we pass the properties of the object as parameter. We use the _this_ keyword to attach the constructor parameters with the class. + +The following Person class constructor has firstName and lastName property. These properties are attached to the Person class using _this_ keyword. _This_ refers to the class itself. + +```js +class Person { + constructor(firstName, lastName) { + console.log(this) // Check the output from here + this.firstName = firstName + this.lastName = lastName } -}; +} + +const person = new Person() + +console.log(person) +``` + +```sh +Person {firstName: undefined, lastName} +``` + +All the keys of the object are undefined. When ever we instantiate we should pass the value of the properties. Let us pass value at this time when we instantiate the class. + +```js +class Person { + constructor(firstName, lastName) { + this.firstName = firstName + this.lastName = lastName + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh') + +console.log(person1) ``` -Getting values from an object: +```sh +Person {firstName: "Asabeneh", lastName: "Yetayeh"} +``` + +As we have stated at the very beginning that once we create a class we can create many object using the class. Now, let us create many person objects using the Person class. ```js - const person = { - firstName:'Asabeneh', - lastName:'Yetayeh', - age:100, - location:'Helsinki', - skills:['HTML', 'CSS', 'JavaScript', 'React','Node','MongoDB', 'Python', 'D3.js'] - getFullName:function() { - return `${this.firstName}${this.lastName}` - } +class Person { + constructor(firstName, lastName) { + console.log(this) // Check the output from here + this.firstName = firstName + this.lastName = lastName } - console.log(person.firstName); - console.log(person.lastName); - console.log(person.getFullName()); - // value can be accessed - console.log(person['age'); - console.log(person['location']); +} + +const person1 = new Person('Asabeneh', 'Yetayeh') +const person2 = new Person('Lidiya', 'Tekle') +const person3 = new Person('Abraham', 'Yetayeh') + +console.log(person1) +console.log(person2) +console.log(person3) ``` -Setting a new keys in an object +```sh +Person {firstName: "Asabeneh", lastName: "Yetayeh"} +Person {firstName: "Lidiya", lastName: "Tekle"} +Person {firstName: "Abraham", lastName: "Yetayeh"} +``` + +Using the class Person we created three persons object. As you can see our class did not many properties let us add more properties to the class. ```js - const person = { - firstName:'Asabeneh', - lastName:'Yetayeh', - age:100, - location:'Helsinki', - skills:['HTML', 'CSS', 'JavaScript', 'React','Node','MongoDB', 'Python', 'D3.js'] - getFullName:function() { - return `${this.firstName}${this.lastName}` - } +class Person { + constructor(firstName, lastName, age, country, city) { + console.log(this) // Check the output from here + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city } - person.nationality = 'Ethiopian' - person.live = 'Finland'; - console.log(person) +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') + +console.log(person1) +``` + +```sh +Person {firstName: "Asabeneh", lastName: "Yetayeh", age: 250, country: "Finland", city: "Helsinki"} ``` -### Object Methods: +### Default values with constructor -_Object.assign_: To copy an object without modifying the original object +The constructor function properties may have a default value like other regular functions. ```js -const person = { - name: "Asabeneh", - age: 200, - country: "Finland", - skills: ["HTML", "CSS", "JS"], - address: { - street: "Heitamienkatu 16", - pobox: 2002, - city: "Helsinki" - }, - getPersonInfo: function() { - return `I am ${this.name} and I live in ${this.country}. I am ${this.age}.`; +class Person { + constructor( + firstName = 'Asabeneh', + lastName = 'Yetayeh', + age = 250, + country = 'Finland', + city = 'Helsinki' + ) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city } -}; +} -//Object methods: Object.assign, Object.keys, Object.values, Object.entreis -//hasOwnProperty +const person1 = new Person() // it will take the default values +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') -const copyPerson = Object.assign({}, person); -console.log(copyPerson); +console.log(person1) +console.log(person2) ``` -_Object.keys_: To get keys of an objet as an array +```sh +Person {firstName: "Asabeneh", lastName: "Yetayeh", age: 250, country: "Finland", city: "Helsinki"} +Person {firstName: "Lidiya", lastName: "Tekle", age: 28, country: "Finland", city: "Espoo"} +``` + +### Class methods + +The constructor inside a class is a builtin function which allow us to create a blueprint for the object. In a class we can create class methods. Methods are JavaScript functions inside the class. Let us create some class methods. ```js -const keys = Object.keys(copyPerson); -console.log(keys); //["name", "age", "country", "skills", "address", "getPersonInfo"] -const address = Object.keys(copyPerson.address); -console.log(address); //["street", "pobox", "city"] +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +console.log(person1.getFullName()) +console.log(person2.getFullName()) ``` -_Object.values_:To get values of an object as an array +```sh +Asabeneh Yetayeh +test.js:19 Lidiya Tekle +``` + +### Properties with initial value + +When we create a class for some properties we may have an initial value. For instance if you are playing a game, you starting score will be zero. So, we may have a starting score or score which is zero. In other way, we may have an initial skill and we will acquire some skill after some time. ```js -const values = Object.values(copyPerson); -console.log(values); +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +console.log(person1.score) +console.log(person2.score) + +console.log(person1.skills) +console.log(person2.skills) ``` -_Object.entries_:To get the keys and values in an array -```js -const entries = Object.entries(copyPerson); -console.log(entries); +```sh +0 +0 +[] +[] ``` -_hasOwnProperty_: To check if a specific key or property exist in an object +A method could be regular method or a getter or a setter. Let us see, getter and setter. + +### getter + +The get method allow us to access value from the object. We write a get method using keyword _get_ followed by a function. Instead of accessing properties directly from the object we use getter to get the value. See the example bellow ```js -console.log(copyPerson.hasOwnProperty("name")); -console.log(copyPerson.hasOwnProperty("score")); +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } + get getscore() { + return this.score + } + get getSkills() { + return this.skills + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +console.log(person1.getScore) // We do not need parenthesis to call a getter method +console.log(person2.getScore) + +console.log(person1.getSkills) +console.log(person2.getSkills) ``` -### Date Object -In JavaScript current time and date is created using JavaScript Date Object. -Some of the methods to extract date object values:*getFullYear(), getMonths(), getDate(), getDay(), getHours(), getMinutes* -```js -const now = new Date (); -const year = now.getFullYear(); // return year -const month = now.getMonth() + 1; // return month(0 - 11) -const date = now.getDate(); // return date (1 - 31) -const hours = now.getHours(); // return number (0 - 23) -const minutes = now.getMinutes();// return number (0 -59) -console.log(`${date}/${month}/${year} ${hours}:${minutes}`) + +```sh +0 +0 +[] +[] ``` -#### Exercises: -1. Use the new Date() object to get _month, date, year, hour_ and _minute_. -1. Write a function name _displayDateTime_ which display time in this format: 10/03/2019 04:08 - ```sh - displayDateTime() - 10/03/2019 04:08 - ``` -#### Exercises:Objects -1. Create an empty object called dog -1. Print the the dog object on the console -1. Add name, legs, color, age and bark properties for the dog object. The bark property is a method which return *woof woof* -1. Get name, legs, color, age and bark value from the dog object -1. Set new properties the dog object: breed, getDogInfo -1. Create an object literal called _personAccount_. It has _firstName, lastName, incomes, expenses_ properties and it has _totalIncome, totalExpense, acountInfo,addIncome, addExpence_ and _accountBalance_ methods. Incomes is a set of incomes and its description and the same for expenses. -1. Count logged in users,count users having greater than equal to 50 points from the following object. - ```js - const users = { - Alex: { - email: "alex@alex.com", - skills: ["HTML", "CSS", "JavaScript"], - age: 20, - isLoggedIn: false, - points: 30 - }, - Asab: { - email: "asab@asab.com", - skills: ["HTML", "CSS", "JavaScript", "React", "Redux", "Node.js"], - age: 25, - isLoggedIn: false, - points: 50 - }, - Brook: { - email: "daniel@daniel.com", - skills: ["HTML", "CSS", "JavaScript", "React", "Redux"], - age: 30, - isLoggedIn: true, - points: 50 - }, - Daniel: { - email: "daniel@alex.com", - skills: ["HTML", "CSS", "JavaScript", "Python"], - age: 20, - isLoggedIn: false, - points: 40 - }, - John: { - email: "john@john.com", - skills: ["HTML", "CSS", "JavaScript", "React", "Redux", "Node.js"], - age: 20, - isLoggedIn: true, - point: 50 - }, - Thomas: { - email: "thomas@thomas.com", - skills: ["HTML", "CSS", "JavaScript", "React"], - age: 20, - isLoggedIn: false, - points: 40 - } - }; - ``` -1. Set your name in the users object without modifying the original users object -1. Get all keys or properties of users object -1. Get all the values of users object -1. ** Develop a small JavaScript library. -## Functional Programming -*forEach*: Iterate an array elements and use for array. It takes a callback function with elements and index parameter. +### setter + +The setter method allow us to modify the value of certain properties. We write a setter method using keyword _set_ followed by a function. See the example bellow. ```js -arr.forEach(function(element, index){ - console.log(index, element) -}) -// The above code can be written using arrow function -arr.forEach((element, index) => { - console.log(index, element) -}) -// The above code can be written using arrow function and explicit return -arr.forEach((element, index) => console.log(index, element)); +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } + get getScore() { + return this.score + } + get getSkills() { + return this.skills + } + set setScore(score) { + this.score += score + } + set setSkill(skill) { + this.skills.push(skill) + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +person1.setScore = 1 +person1.setSkill = 'HTML' +person1.setSkill = 'CSS' +person1.setSkill = 'JavaScript' + +person2.setScore = 1 +person2.setSkill = 'Planning' +person2.setSkill = 'Managing' +person2.setSkill = 'Organizing' + +console.log(person1.score) +console.log(person2.score) + +console.log(person1.skills) +console.log(person2.skills) ``` -*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. -```js -const modifiedArray = arr.map(function(element,index){ - return element -}); -/*Arrow function and explicit return -const modifiedArray = arr.map((element,index) => element); -*/ -//Example -const numbers = [1,2,3,4,5]; -const numbersSquare = numbers.map((num) => num * num) -console.log(numbersSquare) // [1,4,9,16,25] -const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; -const namesToUpperCase = names.map((name) => name.toUpperCase()); -console.log(namesToUpperCase) //["ASABENEH", "MATHIAS", "ELIAS", "BROOK"] -const countries = [ - "Albania", - "Bolivia", - "Canada", - "Denmark", - "Ethiopia", - "Finland", - "Germany", - "Hungary", - "Ireland", - "Japan", - "Kenya" -]; -const countriesToUpperCase = countries.map(function(country){ - return country.toUpperCase(); -}); -console.log(countriesToUpperCase) -// ["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"] -/* -// Arrow function -const countriesToUpperCase = countries.map((country) => { - return country.toUpperCase(); -}) -//Explicit return arrow function -const countriesToUpperCase = countries.map(country => country.toUpperCase()); -*/ + +```sh +1 +1 +["HTML", "CSS", "JavaScript"] +["Planning", "Managing", "Organizing"] ``` -*Filter*: Filter out itmes which full fill filtering conditions + +Do not be puzzled by the difference between regular method and a getter. If you know how to make a regular method you are good. Let us add regular method called getPersonInfo in the Person class. ```js -//Filter countries containing land -const countriesContainingLand = countries.filter(country => country.includes('land')); -console.log(countriesContainingLand ) //["Finland", "Ireland"] -const countriesEndByia = countries.filter(country => country.includes('ia')); -console.log(countriesEndByia) //["Albania", "Bolivia","Ethiopia"] -const countriesHaveFiveLetters = countries.filter(country => country.length === 5); -console.log(countriesHaveFiveLetters ) //  ["Japan", "Kenya"] -const scores = [{name:'Asabeneh', score:95},{name:'Mathias', score:80},{name:'Elias', score:50},{name:'Martha', score:85},{name:'John', score:100}]; +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } + get getScore() { + return this.score + } + get getSkills() { + return this.skills + } + set setScore(score) { + this.score += score + } + set setSkill(skill) { + this.skills.push(skill) + } + getPersonInfo() { + let fullName = this.getFullName() + let skills = + this.skills.length > 0 && + this.skills.slice(0, this.skills.length - 1).join(', ') + + ` and ${this.skills[this.skills.length - 1]}` + let formattedSkills = skills ? `He knows ${skills}` : '' + + let info = `${fullName} is ${this.age}. He lives ${this.city}, ${this.country}. ${formattedSkills}` + return info + } +} -const scoresGreaterEight = scores.filter((score) => score.score > 80); -console.log(scoresGreaterEight) //[{name: "Asabeneh", score: 95}, {name: "Martha", score: 85},{name: "John", score: 100}] +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') +const person3 = new Person('John', 'Doe', 50, 'Mars', 'Mars city') + +person1.setScore = 1 +person1.setSkill = 'HTML' +person1.setSkill = 'CSS' +person1.setSkill = 'JavaScript' + +person2.setScore = 1 +person2.setSkill = 'Planning' +person2.setSkill = 'Managing' +person2.setSkill = 'Organizing' + +console.log(person1.getScore) +console.log(person2.getScore) + +console.log(person1.getSkills) +console.log(person2.getSkills) +console.log(person3.getSkills) + +console.log(person1.getPersonInfo()) +console.log(person2.getPersonInfo()) +console.log(person3.getPersonInfo()) ``` -*reduce*: Reduce takes a callback function. The call back function takes accumulator and current value as a parameter and returns a single value: + +```sh +1 +1 +["HTML", "CSS", "JavaScript"] +["Planning", "Managing", "Organizing"] +[] +Asabeneh Yetayeh is 250. He lives Helsinki, Finland. He knows HTML, CSS and JavaScript +Lidiya Tekle is 28. He lives Espoo, Finland. He knows Planning, Managing and Organizing +John Doe is 50. He lives Mars city, Mars. +``` + +### Static method + +The static keyword defines a static method for a class. Static methods are not called on instances of the class. Instead, they are called on the class itself. These are often utility functions, such as functions to create or clone objects. An example of static method is _Date.now()_. The _now_ method is called directly from the class. + ```js - const numbers = [1,2,3,4,5]; - const sum = numbers.reduce((accum, curr)=> accum + curr); - console.log(sum); //15 - +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } + get getScore() { + return this.score + } + get getSkills() { + return this.skills + } + set setScore(score) { + this.score += score + } + set setSkill(skill) { + this.skills.push(skill) + } + getPersonInfo() { + let fullName = this.getFullName() + let skills = + this.skills.length > 0 && + this.skills.slice(0, this.skills.length - 1).join(', ') + + ` and ${this.skills[this.skills.length - 1]}` + + let formattedSkills = skills ? `He knows ${skills}` : '' + + let info = `${fullName} is ${this.age}. He lives ${this.city}, ${this.country}. ${formattedSkills}` + return info + } + static favoriteSkill() { + const skills = ['HTML', 'CSS', 'JS', 'React', 'Python', 'Node'] + const index = Math.floor(Math.random() * skills.length) + return skills[index] + } + static showDateTime() { + let now = new Date() + let year = now.getFullYear() + let month = now.getMonth() + 1 + let date = now.getDate() + let hours = now.getHours() + let minutes = now.getMinutes() + if (hours < 10) { + hours = '0' + hours + } + if (minutes < 10) { + minutes = '0' + minutes + } + + let dateMonthYear = date + '.' + month + '.' + year + let time = hours + ':' + minutes + let fullTime = dateMonthYear + ' ' + time + return fullTime + } +} + +console.log(Person.favoriteSkill()) +console.log(Person.showDateTime()) ``` -*every*: Check if all the elements are similar in one aspect. It returns boolean -```js -const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; -const bools = [true, true, true, true]; -const result = bools.every((b)=> { - return b === true; -}); -console.log(result) //true -const checkType = names.every((name) => typeof name ==='string'); -console.log(checkDataTypes) // true; + +```sh +Node +15.1.2020 23:56 ``` -*some*: Check if some of the elements are similar in one aspect. It returns boolean +The static methods are methods which can be used as utility functions. + +## Inheritance + +Using inheritance we can access all the properties and the methods of the parent class. This reduces repetition of code. If you remember, we have a Person parent class and we will create children from it. Our children class could be student, teach etc. + ```js -const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; -const bools = [true, true, true, true]; -const result = bools.some((b)=> { - return b === true; -}); -console.log(result) //true -const checkType = names.some((name) => typeof name ==='number'); -console.log(checkDataTypes) // false +// syntax +class ChildClassName extends { + // code goes here +} ``` -*find*: Return the first element which satisfies the condition + +Let us create a Student child class from Person parent class. + ```js -const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; -const ages = [24, 22,25,32,35,18]; -const result = names.find(name => name.length > 7); -console.log(result) // Asabeneh -const age = ages.find((age) => age < 20); -console.log(age) // 18 +class Student extends Person { + saySomething() { + console.log('I am a child of the person class') + } +} + +const s1 = new Student('Asabeneh', 'Yetayeh', 'Finland', 250, 'Helsinki') +console.log(s1) +console.log(s1.saySomething()) +console.log(s1.getFullName()) +console.log(s1.getPersonInfo()) ``` -*findIndex*: Return the position of the first element which satisfies the condition -```js -const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; -const ages = [24, 22,25,32,35,18]; -const result = names.findIndex(name => name.length > 7); -console.log(result) // 0 -const age = ages.findIndex((age) => age < 20); -console.log(age) // 5 + +```sh +Student {firstName: "Asabeneh", lastName: "Yetayeh", age: "Finland", country: 250, city: "Helsinki", …} +I am a child of the person class +Asabeneh Yetayeh +Student {firstName: "Asabeneh", lastName: "Yetayeh", age: "Finland", country: 250, city: "Helsinki", …} +Asabeneh Yetayeh is Finland. He lives Helsinki, 250. ``` -*sort*: The sort methods arranges the array elements either ascending or decending order. By default, the ***sort()*** method sorts values as strings.This works well for string array items but not for numbers. If number values are sorted as strings and it give us wrong result. Sort method modify the original array. It is recommended to copy the original document before you start sorting. -#### Sorting string values + +### Overriding methods + +As you can see, we manage to access all the methods in the Person Class and we used it in the Student child class. We can customize the parent methods, we can add additional properties to a child class. If we want to customize, the methods and if we want to add extra properties, we need to use the constructor function the child class too. In side the constructor function we call the super() function to access all the properties from the parent class. The Person class didn't have gender but now let us give gender property for the child class, Student. If the same method name used in the child class, the parent method will be overridden. + ```js -const products = ['Milk', 'Coffee', 'Sugar', 'Honey', 'Apple', 'Carrot']; -console.log(products.sort()) // ["Apple", "Carrot", "Coffee", "Honey", "Milk", "Sugar"] +class Student extends Person { + constructor(firstName, lastName, age, country, city, gender) { + super(firstName, lastName, age, country, city) + this.gender = gender + } + + saySomething() { + console.log('I am a child of the person class') + } + getPersonInfo() { + let fullName = this.getFullName() + let skills = + this.skills.length > 0 && + this.skills.slice(0, this.skills.length - 1).join(', ') + + ` and ${this.skills[this.skills.length - 1]}` + + let formattedSkills = skills ? `He knows ${skills}` : '' + let pronoun = this.gender == 'Male' ? 'He' : 'She' + + let info = `${fullName} is ${this.age}. ${pronoun} lives in ${this.city}, ${this.country}. ${formattedSkills}` + return info + } +} -//Now the original products array is also sorted +const s1 = new Student( + 'Asabeneh', + 'Yetayeh', + 250, + 'Finland', + 'Helsinki', + 'Male' +) +const s2 = new Student('Lidiya', 'Tekle', 28, 'Finland', 'Helsinki', 'Female') +s1.setScore = 1 +s1.setSkill = 'HTML' +s1.setSkill = 'CSS' +s1.setSkill = 'JavaScript' + +s2.setScore = 1 +s2.setSkill = 'Planning' +s2.setSkill = 'Managing' +s2.setSkill = 'Organizing' + +console.log(s1) + +console.log(s1.saySomething()) +console.log(s1.getFullName()) +console.log(s1.getPersonInfo()) + +console.log(s2.saySomething()) +console.log(s2.getFullName()) +console.log(s2.getPersonInfo()) ``` -#### Sorting Numeric values -As you can see in the example below, 100 came first after sorted in ascending order. Sort converts items to string , since '100' and other numbers compared, 1 which the beginning of the string '100' became the smallest. To avoid this, we use a compare call back function inside the sort method, which return a negative, zero or positive. -```js -const numbers = [9.81, 3.14, 100, 37] -// Using sort method to sort number items provde a wrong result. see below -console.log(numbers.sort()) //[100, 3.14, 37, 9.81] -numbers.sort(function(a, b) { -return a - b; -}) +```sh +Student {firstName: "Asabeneh", lastName: "Yetayeh", age: 250, country: "Finland", city: "Helsinki", …} +Student {firstName: "Lidiya", lastName: "Tekle", age: 28, country: "Finland", city: "Helsinki", …} +I am a child of the person class +Asabeneh Yetayeh +Student {firstName: "Asabeneh", lastName: "Yetayeh", age: 250, country: "Finland", city: "Helsinki", …} +Asabeneh Yetayeh is 250. He lives in Helsinki, Finland. He knows HTML, CSS and JavaScript +I am a child of the person class +Lidiya Tekle +Student {firstName: "Lidiya", lastName: "Tekle", age: 28, country: "Finland", city: "Helsinki", …} +Lidiya Tekle is 28. She lives in Helsinki, Finland. He knows Planning, Managing and Organizing +``` +Now, the getPersonInfo method has been overridden and it identifies if the person is male or female. -console.log(numbers) // [3.14, 9.81, 37, 100] -numbers.sort(function(a, b) { -return b - a; -}); -console.log(numbers) //[100, 37, 9.81, 3.14] +## Exercises -``` -#### Sorting Object Arrays -When ever we sort objects in an array. We use the object key to compare. Lets see the example below. +### Exercises Level 1 -```js -objArr.sort(function(a, b) { - if (a.key < b.key) return -1; - if (a.key > b.key) return 1; - return 0; -}); -// or -objArr.sort(function(a, b) { - if (a['key'] < b['key']) return -1; - if (a['key'] > b['key']) return 1; - return 0; -}); -const users = [{name:"Asabeneh", age:150}, {name:"Brook", age:50}, {name:"Eyo", age:100},{name:"Elias", age:22}]; -users.sort((a, b) => { - if (a.age < b.age) return -1; - if (a.age > b.age) return 1; - return 0; -}); -console.log(users); // sorted ascending -//[{…}, {…}, {…}, {…}] +1. Create an Animal class. The class will have name, age, color, legs properties and create different methods +2. Create a Dog and Cat child class from the Animal Class. +### Exercises Level 2 -``` +1. Override the method you create in Animal class -### Exercises: -```js - const countries = ['Estonia', 'Finland', 'Sweden', 'Denmark', 'Norway', 'IceLand']; - const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; - const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] -``` -1. Explain the difference between ***forEach, map, filter, and reduce***. -2. Define a call function before you them in forEach, map, filter or reduce. -3. Use ***forEach*** to console.log each country in the countries array. -4. Use ***forEach*** to console.log each name in the names array. -5. Use ***forEach*** to console.log each number in the numbers array. -6. Use ***map*** to create a new array by changing each country to uppercase in the countries array; -7. Use ***map*** to create a new array by changing each number to square in the numbers array -8. Use ***map*** to change to each name to uppercase in the names array -9. Use ***filter*** to filter out countries containing ***land***. -10. Use ***filter*** to filter out countries having six character. -11. Use ***filter*** to filter out countries containing six letters and more in the counntry array. -12. Use ***filter*** to filter out country start with 'E'; -13. Chain two or more array iterators(eg. arr.map(callback).filter(callback).reduce(callback)) -14. Declare a function called getStringLists which takes an array as a parameter and then returns an array only with string items. -15. Use ***reduce*** to sum all the numbers in the numbers array. -16. Use ***reduce*** to concatinate all the countries and to produce this sentence: ***Estonia, Finland, Sweden, Denmark, Norway, and IceLand are north European countries*** -17. Explain the difference between ***some*** and ***every*** -18. Use ***some*** to check if some names' length greater than seven in names array -19. Use ***every*** to check if all the countries contain the word land -20. Explain the difference between ***find*** and ***findIndex***. -21. Use ***find*** to find the first country containing only six letters in the countries array -22. Use ***findIndex*** to find the position of the first country containing only six letters in the countries array -23. Use ***findIndex*** to find the position of ***Norway*** if it doesn't exist in the array you will get -1. -24. Use ***findIndex*** to find the position of ***Russia*** if it doesn't exist in the array you will get -1. -25. Declare a function called ***categorizeCountries*** which returns an array of countries which have some common pattern(you find the countries array in this repository as countries.js(eg 'land', 'ia', 'island','stan')). -26. Create a function which return an array of objects, which is the letter and the number of times the letter use to start with a name of a country. -27. Declare a ***getFirstTenCountries*** function and return an array of ten countries. Use different functional programming to work on the countries.js array -28. Declare a ***getLastTenCountries*** function which which returns the last ten countries in the countries array. -29. Find out which *letter* is used many *times* as intial for a country name from the conuntries array (eg. Finland, Fiji, France etc) -30. Use the countries information, in the data folder. Sort countries by name, by capital, by population -31. Sort out the ten most spoken langauges by location. -32. Sort out the ten most populated countries. - -## Destructuring and Spread -Destructuring is a way to unpack arrays, and objects and assigning to a distinct variable. -#### Destructing Arrays -```js - const numbers = [1, 2,3]; - let [numOne, numTwo, numThree] = numbers; - console.log(numOne, numTwo, numThree) // 1,2,3 - const names = ['Asabeneh', 'Brook', 'David', 'John'] - let [firstPerson, secondPerson, ThirdPerson, fourth Person] = names; - console.log(firstName, secondPerson,thirdPerson, fourthPerson) //Asabeneh, Brook, David, John - const scientificConstants = [2.72, 3.14, 9.81, 37, 100]; - let [e, pi, gravity, bodyTemp, boilingTemp] = scientificConstants - console.log(e,pi,gravity, bodyTemp, boilingTemp) //2.72, 3.14, 9.81, 37, 100 +### Exercises Level 3 + +1. Let's try to develop a program which calculate measure of central tendency of a sample(mean, median, mode) and measure of variability(range, variance, standard deviation). In addition to those measures find the min, max, count, percentile, and frequency distribution of the sample. You can create a class called Statistics and create all the functions which do statistical calculations as method for the Statistics class. Check the output below. + +```JS +ages = [31, 26, 34, 37, 27, 26, 32, 32, 26, 27, 27, 24, 32, 33, 27, 25, 26, 38, 37, 31, 34, 24, 33, 29, 26] +console.log('Count:', statistics.count()) // 25 +console.log('Sum: ', statistics.sum()) // 744 +console.log('Min: ', statistics.min()) // 24 +console.log('Max: ', statistics.max()) // 38 +console.log('Range: ', statistics.range() // 14 +console.log('Mean: ', statistics.mean()) // 30 +console.log('Median: ',statistics.median()) // 29 +console.log('Mode: ', statistics.mode()) // {'mode': 26, 'count': 5} +console.log('Variance: ',statistics.var()) // 17.5 +console.log('Standard Deviation: ', statistics.std()) // 4.2 +console.log('Variance: ',statistics.var()) // 17.5 +console.log('Frequency Distribution: ',statistics.freqDist()) // [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)] ``` -If we like to skip on of the values in the array we use additional comma. The comma helps to omit the value at that index -```js - const numbers = [1, 2,3]; - let [numOne, , , numThree] = numbers; //2 is omitted - console.log(numOne,, numThree) // 1,2,3 - const names = ['Asabeneh', 'Brook', 'David', 'John'] - let [, secondPerson, , fourth Person] = name; // first and third person is omitted - console.log(secondPerson, fourthPerson) //Brook, John +```sh +// you output should look like this +console.log(statistics.describe()) +Count: 25 +Sum: 744 +Min: 24 +Max: 38 +Range: 14 +Mean: 30 +Median: 29 +Mode: (26, 5) +Variance: 17.5 +Standard Deviation: 4.2 +Frequency Distribution: [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)] ``` -We can use default value in case the value of array for that index is undefined: + +1. Create a class called PersonAccount. It has firstname, lastname, incomes, expenses properties and it has totalIncome, totalExpense, accountInfo,addIncome, addExpense and accountBalance methods. Incomes is a set of incomes and its description and expenses is also a set of expenses and its description. + +## Regular Expressions + +A regular expression or RegEx is a small programming language that helps to find pattern in data. A RegEx can be used to check if some pattern exists in a different data types. To use RegEx in JavaScript either we use RegEx constructor or we can declare a RegEx pattern using two forward slashes followed by a flag. We can create a pattern in two ways. + +To declare a string we use a single quote, double quote a backtick to declare a regular expression we use two forward slashes and an optional flag. The flag could be g, i, m, s, u or y. + +### RegEx parameters + +A regular expression takes two parameters. One required search pattern and an optional flag. + +#### Pattern + +A pattern could be a text or any form of pattern which some sort of similarity. For instance the word spam in an email could be a pattern we are interested to look for in an email or a phone number format number might be our interest to look for. + +#### Flags + +Flags are optional parameters in a regular expression which determine the type of searching. Let see some of the flags: + +- g:is a global flag which means looking for a pattern in whole text +- i: case insensitive flag(it searches for both lowercase and uppercase) +- m: multiline + +### Creating a pattern with RegEx Constructor + +Declaring regular expression without global flag and case insensitive flag. + ```js -const names = [undefined, 'Brook', 'David']; -let [firstPerson = 'Asabeneh', secondPerson, thirdPerson, fourthPerson = 'John' ] = names; -console.log(firstPerson, secondPerson, thirdPerson, fourthPerson) // Asabeneh Brook David John +// without flag +let pattern = 'love' +let regEx = new RegEx(pattern) ``` -#### Destructuring Object -When we destructure the name of the variable we use to destructure should be exactly the same us the key or property of the object. See example below. -```js -const rectangle = { - width: 20, - height:10, - area: 200 -} -let {width, height, area, perimeter} = rectangle; -console.log(width, height, area, perimeter) //20 10 200 undefined +Declaring regular expression with global flag and case insensitive flag. +```js +let pattern = 'love' +let flag = 'gi' +let regEx = new RegEx(pattern, flag) ``` -#### Renaming during structuring + +Declaring a regex pattern using RegEx object. Writing the pattern and the flag inside the RegEx constructor + ```js -const rectangle = { - width: 20, - height:10, - area: 200 -} -let {width:w, heigh:h, area:a, perimeter:p} = rectangle; -console.log(w, h, a, p) //20 10 200 undefined +let regEx = new RegEx('love','gi') +``` + +### Creating a pattern without RegEx Constructor +Declaring regular expression with global flag and case insensitive flag. + +```js +let regEx= /love/gi ``` -If the key is not found in the object the variable will be assinged to undefined. In case, the key is not in the object we can give a default value during declaration. See the example. + +The above regular expression is the same as the one which we created with RegEx constructor + ```js -const rectangle = { - width: 20, - height:10, - area: 200 -} -let {width, heigh, area, perimeter = 60} = rectangle; -console.log(width, height, area, perimeter) //20 10 200 60 -//Lets modify the object:width to 30 and perimeter to 80 -const rectangle = { - width: 30, - height:10, - area: 200, - perimeter:80 -} -let {width, heigh, area, perimeter = 60} = rectangle; -console.log(width, height, area, perimeter) //20 10 200 80 +let regEx= new RegEx('love','gi') ``` -Destructuring keys as a function paramters. Lets create a function which take a rectangle object and it return a perimeter of a rectangle. +### RegExp Object Methods + +Let see some of RegEx methods + +#### Testing for a match + +*test()*:Tests for a match in a string. It returns true or false. + ```js - // Without destructuring - const rect = { - width:20, - height:10 - } - const calculatePerimeter = (rectangle) => { - return 2 * (rectangle.width + rectangle.height) - } - console.log(calculatePerimeter(rect)) // 60 - //with destructuring +const str = 'I love JavaScript' +const pattern = /love/ +const result = pattern.test(str) +console.log(result) +``` - const calculatePerimeter = ({width, height}) => { - return 2 * (width + height) - } +```sh +true +``` - console.log(calculatePerimeter(rect)) // 60 +#### Array containing all of the match - //Another Example -const person = { - firstName: "Asabeneh", - lastName: "Yetayeh", - age: 200, - country: "Finland", - job: "Instructor and Developer", - skills: [ - "HTML", - "CSS", - "JavaScript", - "React", - "Redux", - "Node", - "MongoDB", - "Python", - "D3.js" - ], - languages: ["Amharic", "English", "Suomi(Finnish)"] -}; -// Lets create a function which give information about the person object without destructuring +*match()*:Returns an array containing all of the matches, including capturing groups, or null if no match is found. +If we do not use a global flag, match() returns an array containing the pattern, index, input and group. -const getPersonInfo = obj => { - const skills = obj.skills; - const formattedSkills = skills.slice(0, -1).join(", "); - const languages = obj.languages; - const formattedLanguages = languages.slice(0, -1).join(", "); +```js +const str = 'I love JavaScript' +const pattern = /love/ +const result = str.match(pattern) +console.log(result) +``` - return `${obj.firstName} ${obj.lastName} lives in ${obj.country}. He is ${ - obj.age - } years old. He is an ${obj.job}. He teaches ${formattedSkills} and ${ - skills[skills.length - 1] - }. He speakes ${formattedLanguages} and a little bit of ${languages[2]}.`; -}; -console.log(getPersonInfo(person)); -// Lets create a function which give information about the person object with destructuring +```sh +["love", index: 2, input: "I love JavaScript", groups: undefined] +``` -const getPersonInfo = ({ - firstName, - lastName, - age, - country, - job, - skills, - languages -}) => { - const formattedSkills = skills.slice(0, -1).join(", "); - const formattedLanguages = languages.slice(0, -1).join(", "); +```js +const str = 'I love JavaScript' +const pattern = /love/g +const result = str.match(pattern) +console.log(result) +``` + +```sh +["love"] +``` + +*search()*: Tests for a match in a string. It returns the index of the match, or -1 if the search fails. + +```js +const str = 'I love JavaScript' +const pattern = /love/g +const result = str.search(pattern) +console.log(result) +``` - return `${firstName} ${lastName} lives in ${country}. He is ${age} years old. He is an ${job}. He teaches ${formattedSkills} and ${skills[skills.length - 1]}. He speakes ${formattedLanguages} and a little bit of ${languages[2]}.`; -}; -console.log(getPersonInfo(person)) -/* -Asabeneh Yetayeh lives in Finland. He is 200 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speakes Amharic, English and a little bit of Suomi(Finnish) -*/ +```sh +2 ``` -### Spread or Rest Operator - #### Exercise: Destructuring - ```js - const constants = [2.72, 3.14, 9.81,37, 100] - const countries = ['Finland', 'Estonia', 'Sweden', 'Denmark', 'Norway'] +#### Replacing a substring - const rectangle = { - width:20, - height:10, - area:200, - perimeter:60 - } +*replace()*: Executes a search for a match in a string, and replaces the matched substring with a replacement substring. - ``` - 1. Assign the elements of constants array to e, pi, gravity, humanBodyTemp, waterBoilingTemp. - 2. Assign the elements of countries array to fin, est, sw, den, nor - 3. Destructure the rectangle object by its propertis or keys. +```js +const txt = 'Python is the most beautiful language that a human begin has ever created.\ +I recommend python for a first programming language' -## Document Object Model -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. +matchReplaced = txt.replace(/Python|python/, 'JavaScript') +console.log(matchReplaced) +``` -### Getting Element -```html - - - - Document Object Model/title> - </head> - <body> - <h1 class="title" id="first-title">First Title</h1> - <h1 class="title" id="second-title">Second Title</h1> - <h1 class="title" id="third-title">Third Title</h1> - <h1></h1> - </body> - </html> +```sh +JavaScript is the most beautiful language that a human begin has ever created.I recommend python for a first programming language ``` -#### Getting elements by tag name -***getElementsByTagName()*** method returns an HTMLCollection object. An HTMLCollection is an array like list of HTML elements. The length property provides the size of the collection. + ```js -const allTitles = document.getElementsByTagName("h1"); -console.log(allTitles) //HTMCollections -console.log(allTitles.length) // 4 -for(let i = 0; i < allTitles.length; i++){ - console.log(allTitles[i]) // prints each elements in the HTMLCollection -} +const txt = 'Python is the most beautiful language that a human begin has ever created.\ +I recommend python for a first programming language' +matchReplaced = txt.replace(/Python|python/g, 'JavaScript') +console.log(matchReplaced) ``` -#### Getting elements by class name -***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 -```js -const allTitles = document.getElementsByClassName("title"); -console.log(allTitles) //HTMCollections -console.log(allTitles.length) // 4 -for(let i = 0; i < allTitles.length; i++){ - console.log(allTitles[i]) // prints each elements in the HTMLCollection -} + +```sh +JavaScript is the most beautiful language that a human begin has ever created.I recommend JavaScript for a first programming language ``` -#### Getting an element by id -***getElementsById()*** targets a single HTML element. We pass the id without # as an argument. + ```js -let firstTitle = document.getElementById("first-title"); -console.log(firstTitle) // <h1>First Title</h1> +const txt = 'Python is the most beautiful language that a human begin has ever created.\ +I recommend python for a first programming language' + +matchReplaced = txt.replace(/Python/gi, 'JavaScript') +console.log(matchReplaced) +``` + +```sh +JavaScript is the most beautiful language that a human begin has ever created.I recommend JavaScript for a first programming language ``` -#### Getting elements by using querySelector using tag, class and id: -***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. ```js -let firstTitle = document.querySelect("h1");// select the first available h2 element -let firstTitle = document.querySelector("#first-title"); // select id with first-title -let firstTitle = document.querySelector(".title"); // select the first available h2 element with class title +const txt = '%I a%m te%%a%%che%r% a%n%d %% I l%o%ve te%ach%ing.\ +T%he%re i%s n%o%th%ing as m%ore r%ewarding a%s e%duc%at%i%ng a%n%d e%m%p%ow%er%ing \ +p%e%o%ple.\ +I fo%und te%a%ching m%ore i%n%t%er%%es%ting t%h%an any other %jobs.\ +D%o%es thi%s m%ot%iv%a%te %y%o%u to b%e a t%e%a%cher.' + +matches = txt.replace(/%/g, '') +console.log(matches) ``` -***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. -```js -const allTitles = document.querySelectAll("h1"); -console.log(allTitles.length) // 4 -for(let i = 0; i < allTitles.length; i++){ - console.log(allTitles[i]); -} -allTitles.forEach(title => console.log(title)) -const allTitles = document.querySelectorAll(".title"); // the same goes for selecting using class + +```sh +I am teacher and I love teaching.There is nothing as more rewarding as educating and empowering people.I found teaching more interesting than any other jobs.Does this motivate you to be a teacher. ``` -### Adding attribute -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. -#### Adding attribute using setAttribute -The ***setAttribute()*** method set any html attribute. It takes two parameters the type of the attribute and the name of the attribute. -Let's add class and id attribute for the fourth title. +* []: A set of characters + * [a-c] means, a or b or c + * [a-z] means, any letter a to z + * [A-Z] means, any character A to Z + * [0-3] means, 0 or 1 or 2 or 3 + * [0-9] means any number 0 to 9 + * [A-Za-z0-9] any character which is a to z, A to Z, 0 to 9 +* \\: uses to escape special characters + * \d mean:match where the string contains digits (numbers from 0-9) + * \D mean: match where the string does not contain digits +* . : any character except new line character(\n) +* ^: starts with + * r'^substring' eg r'^love', a sentence which starts with a word love + * r'[^abc] mean not a, not b, not c. +* $: ends with + * r'substring$' eg r'love$', sentence ends with a word love +* *: zero or more times + * r'[a]*' means a optional or it can be occur many times. +* +: one or more times + * r'[a]+' mean at least once or more times +* ?: zero or one times + * r'[a]?' mean zero times or once +* {3}: Exactly 3 characters +* {3,}: At least 3 character +* {3,8}: 3 to 8 characters +* |: Either or + * r'apple|banana' mean either of an apple or a banana +* (): Capture and group + +![Regular Expression cheat sheet](./images/regex.png) + +Let's use example to clarify the above meta characters + +### Square Bracket + +Let's use square bracket to include lower and upper case ```js -const titles = document.querySelectorAll("h1"); -titles[3].setAttribut("class", "title"); -titles[3].setAttribut("id", "fourth-title"); +const pattern = '[Aa]pple' // this square bracket mean either A or a +const txt = 'Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. ' +const matches = txt.match(pattern) + +console.log(matches) ``` -#### Adding attribute without setAttribute -Some attributes are DOM object property and they can be set directly. For instance id and class -```js -//another way to setting an attribute -titles[3].className = "title"; -titles[3].id = "fourth-title"; + +```sh +["Apple", index: 0, input: "Apple and banana are fruits. An old cliche says an…by a banana a day keeps the doctor far far away. ", groups: undefined] + ``` -#### Adding class using classList -The class list method is a good method to append additional class. It doens't override the original class if a class exists + ```js -//another way to setting an attribute: append the class, does't over ride -titles[3].classList.add("title", "header-title") +const pattern = /[Aa]pple/g // this square bracket mean either A or a +const txt = 'Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. ' +const matches = txt.match(pattern) + +console.log(matches) ``` -### Adding Text conent -```js -const titles = document.querySelectorAll("h1"); -titles[3].textContent = "Fourth Title"; + +```sh +["Apple", "apple"] ``` -### Adding style -Lets add some style to our titles. If the element has even index we give it green color else red. + +If we want to look for the banana, we write the pattern as follows: + ```js -const titles = document.querySelectorAll("h1"); -titles.forEach((title,i) => { - title.fontSize = '24px'; // all titles will have 24px font size - if(i % 2 === 0){ - title.style.color = 'green'; - } - else { - title.style.color = 'red'; - } -}) +const pattern = /[Aa]pple|[Bb]anana/g // this square bracket mean either A or a +const txt = 'Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. Banana is easy to eat too.' +const matches = txt.match(pattern) +console.log(matches) ``` -### Creating an Element +```sh +["Apple", "banana", "apple", "banana", "Banana"] +``` + +Using the square bracket and or operator , we manage to extract Apple, apple, Banana and banana. + +### Escape character(\\) in RegEx ```js -let title = document.createElement("h1"); -let firstTitle = document.getElementById("first-title"); +const pattern = /\d/g // d is a special character which means digits +const txt = 'This regular expression example was made in January 12, 2020.' +const matches = txt. match(pattern) + +console.log(matches) // ["1", "2", "2", "0", "2", "0"], this is not what we want ``` -### Creating elements + ```js -let firstTitle = document.getElementById("first-title"); -let title -for(let i = 0; i < 3; i++){ - title = document.createElement("h1"); - title.className = "title"; - title.style.fontSize = "24px"; -} +const pattern = /\d+/g // d is a special character which means digits +const txt = 'This regular expression example was made in January 12, 2020.' +const matches = txt. match(pattern) + +console.log(matches) // ["12", "2020"], this is not what we want ``` -### Appending to a parent element +### One or more times(+) + ```js -// creating multiple elements and appending to parent element -let title; -for(let i = 0; i < 3; i++){ - title = document.createElement("h1"); - title.className = "title"; - title.style.fontSize = "24px"; - document.body.appendChild(title); -} +const pattern = /\d+/g // d is a special character which means digits +const txt = 'This regular expression example was made in January 12, 2020.' +const matches = txt. match(pattern) +console.log(matches) // ["12", "2020"], this is not what we want ``` -### Event Listeners -Common HTML events:onclick, onchange, onmouseover, onmouseout, onkeydown, onkeyup, onload. -We can add event listener method to any DOM object. Use use ***addEventListener()*** method to listen different event types on HTML elements. -The following is an example of click type event. + +### Period(.) + ```js -const button = document.querySelector("button"); -button.addEventListener("click", e => { - console.log(e.target); -}); +const pattern = /[a]./g // this square bracket means a and . means any character except new line +const txt = 'Apple and banana are fruits' +const matches = txt.match(pattern) + +console.log(matches) // ["an", "an", "an", "a ", "ar"] ``` -### Getting value from an input element -We usaully fill forms and forms accept data. Form fields are created using input HTML element. -```html -<input type ="text" placeholder = "Mass in Killogram" /> -<input type = "text" placeholder = "Height in meters" /> -<button>Calculate BMI</button> + +```js +const pattern = /[a].+/g // . any character, + any character one or more times +const txt = 'Apple and banana are fruits' +const matches = txt.match(pattern) + +console.log(matches) // ['and banana are fruits'] ``` + +### Zero or more times(*) + +Zero or many times. The pattern could may not occur or it can occur many times. + ```js -const mass = document.querySelector('#mass'); -const height = document.querySelector('#height'); -const button = document.querySelector('button'); -let bmi; -button.addEventListen('click', ()=>{ - bmi = mass.value * height.value; -}); -console.log(bmi) +const pattern = /[a].*/g //. any character, + any character one or more times +const txt = 'Apple and banana are fruits' +const matches = txt.match(pattern) +console.log(matches) // ['and banana are fruits'] ``` -#### Exercises:Document Object Model -```html - <!-- index.html --> -<DOCTYPE html> - <html> - <head> - <title>JavaScript for Everyone:DOM - - -

First Paragraph

-

Second Paragradph

-

Third Paragraph

-

- - +### Zero or one times(?) + +Zero or one times. The pattern could may not occur or it may occur once. + +```js +const txt = 'I am not sure if there is a convention how to write the word e-mail.\ +Some people write it email others may write it as Email or E-mail.' +const pattern = /[Ee]-?mail/g // ? means optional +matches = txt.match(pattern) + +console.log(matches) // ["e-mail", "email", "Email", "E-mail"] + ``` - 1. Create an index.html file and put four p elementts as above: Get the first paragraph by using ***document.querySelector(tagname)*** and tag name - 2. Get get each of the the paragraph using ***document.querySelector('#id')*** and by their id - 3. Get all the p as nodeList using ***document.querySelectorAll(tagname)*** and by their tag name - 4. Loop through the nodeList and get the text content of each paragraph - 5. Set a text content to paragraph the fourth paragraph,***Fourth Paragraph*** - 6. Set id and class attribute for all the paragraphs using different attribute setting methods - 7. Change stye of each paragraph using JavaScript(eg. color, background, border, font-size, font-famil) - 8. 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 - 9. Remove all the paragrapsh and create them using JavaScript - 10. Set text content, id and class to each paragraph - 11. 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. - 12. Use the rgb color generator function or hexaColor generator to create 10 divs with random background colors - 13. Use the countries.js to visualize all the countries on the HTML document. You need one wrapper div and box for each countries. In the box display, the letter the country starts with, the name of the country and the number of characters for the country name. - -#### DOM: Mini Projects -1. BMI calculator -2. Hexadecimal or RGB color Generator -3. World Countries List - -## Class + +### Quantifier in RegEx + +We can specify the length of the substring we look for in a text, using a curly bracket. Lets imagine, we are interested in substring that their length are 4 characters ```js -class Person { - constructor(firstName, lastName, age, location, skills) { - this.firstName = firstName; - this.lastName = lastName; - this.age = age; - this.location = location; - this.skills = skills; - } - getFull() { - return `${this.firstName} ${this.lastName}`; - } -} +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /\d{4}/g // exactly four times +const matches = txt.match(pattern) +console.log(matches) // ['2019'] ``` -#### Exercises:Classes +```js +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /\d{1,4}/g // 1 to 4 +const matches = txt.match(pattern) +console.log(matches) // ['6', '2019'] +``` -## Regular Expressions -Regular expression is a small program language which is used with many programming langagues. Regular expression match or search for a pattern. We use ' or '' to create a string data type. We can create a pattern in two ways. +### Cart ^ -### Creating a pattern +- Starts with + ```js -let pattern = /love/; -let pattern = new RegEx('love'); +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /^This/ // ^ means starts with +const matches = txt.match(pattern) +console.log(matches) // ['This'] ``` -### Creatign a pattern with flags: global flag (g), case insensitive flag(i) + +- Negation + ```js -let pattern = /love/gi; // declaring a regex pattern -let pattern = new RegEx('love','gi'); // declaring a regex pattern using RegEx object +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /[^A-Za-z,. ]+/g // ^ in set character means negation, not A to Z, not a to z, no space, no coma no period +const matches = txt.match(pattern) +console.log(matches) // ["6", "2019"] ``` + +### Exact match + +It should have ^ starting and $ which is an end. + ```js -let pattern = /[A-Z][a-z]{3,12}/; -let name = "Asabeneh"; -pattern.test(name); -//output:true +let pattern = /^[A-Z][a-z]{3,12}$/; +let name = 'Asabeneh'; +let result = pattern.test(name) + +console.log(result) // true ``` -### RegExp Object Methods + +## 💻 Exercises + +### Exercises: Level 1 + +1. Calculate the total annual income of the person from the following text. ‘He earns 4000 euro from salary per month, 10000 euro annual bonus, 5500 euro online courses per month.’ +1. The position of some particles on the horizontal x-axis -12, -4, -3 and -1 in the negative direction, 0 at origin, 4 and 8 in the positive direction. Extract these numbers and find the distance between the two furthest particles. + ```js -const str = 'I love JavaScript'; -const pattern = /love/; -const result = pattern.test(str); -console.log(result); +points = ['-1', '2', '-4', '-3', '-1', '0', '4', '8'] +sortedPoints = [-4, -3, -1, -1, 0, 2, 4, 8] +distance = 12 ``` -#### Exercises:Regular Expressions -- Calculate the total annual income of the person from the following text. ‘He earns 4000 euro from salary per month, 10000 euro annual bonus, 5500 euro online courses per month.’ +1. Write a pattern which identify if a string is a valid JavaScript variable + + ```sh + is_valid_variable('first_name') # True + is_valid_variable('first-name') # False + is_valid_variable('1first_name') # False + is_valid_variable('firstname') # True + ``` + +### Exercises: Level 2 + +1. Write a function called *tenMostFrequentWords* which get the ten most frequent word from a string? + + ```js + paragraph = `I love teaching. If you do not love teaching what else can you love. I love Python if you do not love something which can give you all the capabilities to develop an application what else can you love.` + console.log(tenMostFrequentWords(paragraph)) + ``` + + ```sh + [ + {word:'love', count:6}, + {word:'you', count:5}, + {word:'can', count:3}, + {word:'what', count:2}, + {word:'teaching', count:2}, + {word:'not', count:2}, + {word:'else', count:2}, + {word:'do', count:2}, + {word:'I', count:2}, + {word:'which', count:1}, + {word:'to', count:1}, + {word:'the', count:1}, + {word:'something', count:1}, + {word:'if', count:1}, + {word:'give', count:1}, + {word:'develop',count:1}, + {word:'capabilities',count:1}, + {word:'application', count:1}, + {word:'an',count:1}, + {word:'all',count:1}, + {word:'Python',count:1}, + {word:'If',count:1}] + ``` + + ```js + console.log(tenMostFrequentWords(paragraph, 10)) + ``` + + ```sh + [{word:'love', count:6}, + {word:'you', count:5}, + {word:'can', count:3}, + {word:'what', count:2}, + {word:'teaching', count:2}, + {word:'not', count:2}, + {word:'else', count:2}, + {word:'do', count:2}, + {word:'I', count:2}, + {word:'which', count:1} + ] + ``` + +### Exercises: Level 3 + +1. Writ a function which cleans text. Clean the following text. After cleaning, count three most frequent words in the string. + + ```js + sentence = `%I $am@% a %tea@cher%, &and& I lo%#ve %tea@ching%;. There $is nothing; &as& mo@re rewarding as educa@ting &and& @emp%o@wering peo@ple. ;I found tea@ching m%o@re interesting tha@n any other %jo@bs. %Do@es thi%s mo@tivate yo@u to be a tea@cher!?` + + console.log(cleanText(sentence)) + ``` + + ```sh + I am a teacher and I love teaching There is nothing as more rewarding as educating and empowering people I found teaching more interesting than any other jobs Does this motivate you to be a teacher + ``` +1. Write a function which find the most frequent words. After cleaning, count three most frequent words in the string. + + ```js + console.log(mostFrequentWords(cleanedText)) + [{word:'I', count:3}, {word:'teaching', count:2}, {word:'teacher', count:2}] + ``` + + +## Promises and Callbacks + +From the following code blocks you will notice, the difference between callback and promises: + + ```js + //Callback + const doSomething = callback => { + setTimeout(() => { + const skills = ['HTML', 'CSS', 'JS'] + callback('It didnt go well', skills) + }, 2000) + } + + doSomething((err, result) => { + if (err) { + return console.log(err) + } + return console.log(result) + }) + // after 2 seconds it will print + // => It didnt go well + + const doSomething = callback => { + setTimeout(() => { + const skills = ['HTML', 'CSS', 'JS'] + callback(false, skills) + }, 2000) + } + + doSomething((err, result) => { + if (err) { + return console.log(err) + } + return console.log(result) + }) + // after 2 seconds it will print the skills + // => ["HTML", "CSS", "JS"] + + ``` + + ```js + // Promise + const doPromise = new Promise((resolve, reject) => { + setTimeout(() => { + const skills = ['HTML', 'CSS', 'JS'] + if (skills.length > 0) { + resolve(skills) + } else { + reject('Something wrong has happened') + } + }, 2000) +}) + +doPromise + .then(result => { + console.log(result) + }) + .catch(error => console.log(error)) + +const myPromise = n => { + return new Promise((resolve, reject) => { + if (n) { + resolve(n * n) + } else { + reject('You need to pass an argument') + } + }) +} + +const square = async n => { + let value = await myPromise(n) + return value +} + +square() + .then(res => { + console.log(res) + }) + .catch(err => console.log(err)) +console.log(square(10)) + ``` + +## Async and Await + +```js + const url = 'https://restcountries.eu/rest/v2/alll' + fetch(url) + .then(response => response.json()) + .then(data => { + console.log(data) + }) + .catch(error => console.log(error)) + + const fetchData = async () => { + try { + const response = await fetch(url) + const countries = await response.json() + console.log(countries) + } catch (err) { + console.log(err) + } + } + console.log('===== async and await') + fetchData() + ``` ## localStorage -Local storage is the para of the web storage API which is used to store data on the browser with no expiration data. The data will be availabe on the browser even after the browser is closed. There are five methods to work on local stroage: +Local storage is the para of the web storage API which is used to store data on the browser with no expiration data. The data will be available on the browser even after the browser is closed. There are five methods to work on local storage: _setItem(), getItem(), removeItem(), clear(), key()_ -##### Setting item to the localStorage +### Setting item to the localStorage + When we set data to be stored in a localStorage, it will be stored as a string. If we are storing an array or an object, we should stringify it first to keep the format unless otherwise we lose the array structure or the object structure of the original data + ```js localStorage.setItem('name', 'Asabeneh'); -console.log(localStorage) //Storage {name: "Asabeneh", length: 1} +console.log(localStorage) //Storage {name: 'Asabeneh', length: 1} localStorage.setItem('age', 200); -console.log(localStorage) //Storage {age: "200", name: "Asabeneh", length: 2} +console.log(localStorage) //Storage {age: '200', name: 'Asabeneh', length: 2} const skills = ['HTML', 'CSS', 'JS', 'React']; -//Skills array has to be stringfied first to keep the format. +//Skills array has to be stringified first to keep the format. const skillsJSON = JSON.stringify(skills,undefined, 4) localStorage.setItem('skills', skillsJSON); -console.log(localStorage) //Storage {age: "200", name: "Asabeneh", skills: "HTML,CSS,JS,React", length: 3} +console.log(localStorage) //Storage {age: '200', name: 'Asabeneh', skills: 'HTML,CSS,JS,React', length: 3} ``` + If we are storing an array, an object or object array, we should stringify the object first. See the example below. -```js +```js let skills = [ - { tech: "HTML", level: 10 }, - { tech: "CSS", level: 9 }, - { tech: "JS", level: 8 }, - { tech: "React", level: 9 }, - { tech: "Redux", level: 10 }, - { tech: "Node", level: 8 }, - { tech: "MongoDB", level: 8 } + { tech: 'HTML', level: 10 }, + { tech: 'CSS', level: 9 }, + { tech: 'JS', level: 8 }, + { tech: 'React', level: 9 }, + { tech: 'Redux', level: 10 }, + { tech: 'Node', level: 8 }, + { tech: 'MongoDB', level: 8 } ]; let skillJSON = JSON.stringify(skills); -localStorage.setItem("skills", skillJSON); +localStorage.setItem('skills', skillJSON); ``` -##### Getting item from localStorage + +### Getting item from localStorage + ```js let name = localStorage.getItem('name'); let age = localStorage.getItem('age'); let skills = localStorage.getItem('skills'); -console.log(name, age, skills) // 'Asabeneh', '200', '["HTML","CSS","JS","React"]' +console.log(name, age, skills) // 'Asabeneh', '200', '['HTML','CSS','JS','React']' -let skillsObj = JSON.parse(localStorage.getItem("skills"), undefined, 4); +let skillsObj = JSON.parse(localStorage.getItem('skills'), undefined, 4); console.log(skillsObj); - ``` -##### Clearing the localStorage -The clear method, will clear eveything stored in the local storage + +### Clearing the localStorage + +The clear method, will clear everything stored in the local storage + ```js localStorage.clear(); ``` -## Exercises:Local Storage +### Exercises:Local Storage ## Cookies -#### Exercises:Cookies - -### [JavaScipt Tests](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-1) -- [JavaScript Test 1](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-1) -- [JavaScript Test 2](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-2) -- [JavaScript Test 3](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-3) - -___ - - - - - - -* [JavaScript for Everyone](#javascript-for-everyone) - * [Table of Contents](#table-of-contents) - * [Introduction](#introduction) - * [Setup](#setup) - * [Adding JavaScript to a web page](#adding-javascript-to-a-web-page) - * [Inline Script](#inline-script) - * [Internal script](#internal-script) - * [External script](#external-script) - * [Exercises:Setting Up your machine](#exercisessetting-up-your-machine) - * [Variables](#variables) - * [Exercise - 1 : Variables](#exercise-1-variables) - * [Comments](#comments) - * [Exercise - 2 : Comments](#exercise-2-comments) - * [Data Types](#data-types) - * [Exercises - 3 : Data Types](#exercises-3-data-types) - * [Strings](#strings) - * [String Concatination](#string-concatination) - * [Exercise - 4 : String](#exercise-4-string) - * [Numbers](#numbers) - * [Math Object](#math-object) - * [Booleans](#booleans) - * [Exercise - 5 : Booleans](#exercise-5-booleans) - * [Undefined](#undefined) - * [Null](#null) - * [Exercise - 6 : Data types](#exercise-6-data-types) - * [Operators](#operators) - * [Arthimetic Operators](#arthimetic-operators) - * [Exercises : Arthimetic Operators:](#exercises-arthimetic-operators) - * [Logical Operators](#logical-operators) - * [Exercises: Logical Operators](#exercises-logical-operators) - * [Comparison Operators](#comparison-operators) - * [Exercise - 7 : Comparison Operators](#exercise-7-comparison-operators) - * [Conditionals](#conditionals) - * [If](#if) - * [If Else](#if-else) - * [If else if else](#if-else-if-else) - * [Switch](#switch) - * [Ternary Operators](#ternary-operators) - * [Exercise - 8 : Conditionals](#exercise-8-conditionals) - * [Loops](#loops) - * [For Loop](#for-loop) - * [While loop](#while-loop) - * [Do while loop](#do-while-loop) - * [Exercises:Loops](#exercisesloops) - * [Arrays](#arrays) - * [Exercise - 9 : Arrays](#exercise-9-arrays) - * [More on Arrays](#more-on-arrays) - * [Exercise -10 : Array Methods](#exercise-10-array-methods) - * [Functions](#functions) - * [Function Declaration](#function-declaration) - * [Function Expression](#function-expression) - * [Anonymous Function](#anonymous-function) - * [Arrow Function](#arrow-function) - * [Arrow Function vs Declaration Function](#arrow-function-vs-declaration-function) - * [Exercise - 10 : Functions](#exercise-10-functions) - * [Object](#object) - * [Object Methods:](#object-methods) - * [Date Object](#date-object) - * [Exercises:](#exercises) - * [Exercises:Objects](#exercisesobjects) - * [Functional Programming](#functional-programming) - * [Sorting string values](#sorting-string-values) - * [Sorting Numeric values](#sorting-numeric-values) - * [Sorting Object Arrays](#sorting-object-arrays) - * [Exercises:](#exercises-1) - * [Destructuring and Spread](#destructuring-and-spread) - * [Destructing Arrays](#destructing-arrays) - * [Destructuring Object](#destructuring-object) - * [Renaming during structuring](#renaming-during-structuring) - * [Spread or Rest Operator](#spread-or-rest-operator) - * [Document Object Model](#document-object-model) - * [Getting Element](#getting-element) - * [Getting elements by tag name](#getting-elements-by-tag-name) - * [Getting elements by class name](#getting-elements-by-class-name) - * [Getting an element by id](#getting-an-element-by-id) - * [Getting elements by using querySelector using tag, class and id:](#getting-elements-by-using-queryselector-using-tag-class-and-id) - * [Adding attribute](#adding-attribute) - * [Adding attribute using setAttribute](#adding-attribute-using-setattribute) - * [Adding attribute without setAttribute](#adding-attribute-without-setattribute) - * [Adding class using classList](#adding-class-using-classlist) - * [Adding Text conent](#adding-text-conent) - * [Adding style](#adding-style) - * [Creating an Element](#creating-an-element) - * [Creating elements](#creating-elements) - * [Appending to a parent element](#appending-to-a-parent-element) - * [Event Listeners](#event-listeners) - * [Getting value from an input element](#getting-value-from-an-input-element) - * [Exercises:Document Object Model](#exercisesdocument-object-model) - * [DOM: Mini Projects](#dom-mini-projects) - * [Class](#class) - * [Exercises:Classes](#exercisesclasses) - * [Regular Expressions](#regular-expressions) - * [Creating a pattern](#creating-a-pattern) - * [Creatign a pattern with flags: global flag (g), case insensitive flag(i)](#creatign-a-pattern-with-flags-global-flag-g-case-insensitive-flagi) - * [RegExp Object Methods](#regexp-object-methods) - * [Exercises:Regular Expressions](#exercisesregular-expressions) - * [localStorage](#localstorage) - * [Set Item](#set-item) - * [Getting item from local storage](#getting-item-from-local-storage) - * [Exercises:Local Storage](#exerciseslocal-storage) - * [Cookies](#cookies) - * [Exercises:Cookies](#exercisescookies) - * [JavaScipt Tests](#javascipt-testshttpsgithubcomasabenehjavascript-for-everyonewikijavascript-test-1) - - +### Exercises:Cookies + +## JavaScript Interview Questions + +### [JavaScript Tests](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Tests) + +### [JavaScript Test 1](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-1) + +### [JavaScript Test 2](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-2) + +### [JavaScript Test 3](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-3) + +- [JavaScript Test 3: Solutions](https://github.com/Asabeneh/JavaScript-for-Everyone/blob/master/solutions/javascript-test-3.js) +JavaScript-Test-4) +- [JavaScript Test 4: Solutions](https://github.com/Asabeneh/JavaScript-for-Everyone/blob/master/solutions/javascript-test-4.js) diff --git a/scripts/00-introduction.js b/scripts/00-introduction.js new file mode 100644 index 0000000..c96d4ed --- /dev/null +++ b/scripts/00-introduction.js @@ -0,0 +1,3 @@ +console.log('Welcome to JavaScript'); +console.log('Congratulations! You wrote your first JavaScript code.'); +console.log('Welcome to JavaScript for Everyone'); diff --git a/scripts/01-variables.js b/scripts/01-variables.js new file mode 100644 index 0000000..555de24 --- /dev/null +++ b/scripts/01-variables.js @@ -0,0 +1,18 @@ +// Declaring different variables of different data types +let firstName = 'Asabeneh'; +let lastName = 'Yetayeh'; +let location = 'Helsinki'; +let country = 'Finland'; +let city = 'Helsinki'; +let age = 100; +let isMarried = true; +const gravity = 9.81; +const boilingPoint = 100; +const PI = 3.14; // can can be accessed like this too: Math.PI +console.log(firstName, lastName, location, country, age, gravity, PI); + +// Variables can also be declaring in one line separated by comma +let name = 'Asabeneh', + job = 'Teacher', + live = 'Finland'; +console.log(name, job, live); diff --git a/02-comment.js b/scripts/02-comment.js similarity index 100% rename from 02-comment.js rename to scripts/02-comment.js diff --git a/03-concationation.js b/scripts/03-concatination.js similarity index 61% rename from 03-concationation.js rename to scripts/03-concatination.js index 4cce76c..4f6663a 100644 --- a/03-concationation.js +++ b/scripts/03-concatination.js @@ -1,11 +1,10 @@ // Declaring different variables of different data types -let firstName = "Asabeneh"; -let lastName = "Yetayeh"; -let fullName = firstName + " " + lastName; // concatination, merging to string together. +let firstName = 'Asabeneh'; +let lastName = 'Yetayeh'; +let fullName = firstName + ' ' + lastName; // concatination, merging to string together. console.log(fullName); - -let personInfoOne = fullName + ".I am " + age + ". I live in " + country; // ES5 +let personInfoOne = fullName + '.I am ' + age + '. I live in ' + country; // ES5 let personInfoTwo = `I am ${fullName}.I am ${age}. I live in ${country}`; //ES6 - String interpolation method console.log(personInfoOne); console.log(personInfoTwo); diff --git a/scripts/04-string_interpolation.js b/scripts/04-string_interpolation.js new file mode 100644 index 0000000..a26676e --- /dev/null +++ b/scripts/04-string_interpolation.js @@ -0,0 +1,28 @@ +let firstName = 'Asabeneh'; +let letlastName = 'Yetayeh'; +let age = 200; // number data type +let country = 'Finland'; +let job = 'teacher'; +let lang = 'JavaScript'; +let personInfo = `I am ${fullName}.I am a ${age} years old. I am a ${job} and I love teaching. +I live in ${country}.`; //ES6 - String interpolation method +console.log(personInfo); + +let numberOne = 10; +let numberTwo = 90; +console.log( + `The sum of ${numberOne} and ${numberTwo} is ${numberOne + numberTwo}.` +); +//More Examples +let gravity = 9.81; +let boilingPoint = 100; +let bodyTemp = 37; + +/* + The boiling point of water is 100 oC. + Human body temperatue is 37 oC. + The gravity of earth is 9.81 m/s2. + */ +console.log( + `The boiling point of water is ${boilingPoint} oC.\nHuman body temperatue is ${body} oC.\nThe gravity of earth is ${gravity} m / s2.` +); diff --git a/05-numbers.js b/scripts/05-numbers.js similarity index 100% rename from 05-numbers.js rename to scripts/05-numbers.js diff --git a/05-string-method.js b/scripts/05-string-method.js similarity index 53% rename from 05-string-method.js rename to scripts/05-string-method.js index 0214a69..e0a8f1f 100644 --- a/05-string-method.js +++ b/scripts/05-string-method.js @@ -1,14 +1,14 @@ /* === String Built in Methods === */ -let firstName = "Asabeneh"; -let lastName = "Yetayeh"; -let location = "Helsinki"; +let firstName = 'Asabeneh'; +let lastName = 'Yetayeh'; +let location = 'Helsinki'; console.log(firstName.length); // to check the length of a string console.log(firstName.toUpperCase()); // to capitalize console.log(firstName.toLowerCase()); // to change to lower case letters -let company = 'google' +let company = 'google'; var firstLetter = company.slice(0, 1); // to slice out the first letter of the word var remainingLetters = company.slice(1, company.length); @@ -16,16 +16,16 @@ console.log(firstLetter); console.log(remainingLetters); var modifiedName = firstLetter.toUpperCase() + remainingLetters; console.log(modifiedName); -var school = "International Academy Award"; +var school = 'International Academy Award'; console.log(school.split()); // creates an array of one item -console.log(school.split("")); // it creates an array of letters and spaces; -console.log(school.split(" ")); // creates an array of words -console.log(school.indexOf("A")); // gives the index of the A in the string which is case sensitive -console.log(school.lastIndexOf("A")); //the last A, which is A from the word Award -console.log(school.includes("rify")); // it checks if the string exist and returns boolean -console.log(school.includes("Award")); // it checks if the string exist and returns boolean -console.log(school.includes("demy")); // it checks if the string exist and returns boolean -console.log(school.startsWith("Inter")); // checks if the string starts with the provided value and returns boolean +console.log(school.split('')); // it creates an array of letters and spaces; +console.log(school.split(' ')); // creates an array of words +console.log(school.indexOf('A')); // gives the index of the A in the string which is case sensitive +console.log(school.lastIndexOf('A')); //the last A, which is A from the word Award +console.log(school.includes('rify')); // it checks if the string exist and returns boolean +console.log(school.includes('Award')); // it checks if the string exist and returns boolean +console.log(school.includes('demy')); // it checks if the string exist and returns boolean +console.log(school.startsWith('Inter')); // checks if the string starts with the provided value and returns boolean -var modifiedSchool = school.split(" "); +var modifiedSchool = school.split(' '); console.log(modifiedSchool); diff --git a/06-arthimetic_operators.js b/scripts/06-arthimetic_operators.js similarity index 77% rename from 06-arthimetic_operators.js rename to scripts/06-arthimetic_operators.js index c983e72..10bdafe 100644 --- a/06-arthimetic_operators.js +++ b/scripts/06-arthimetic_operators.js @@ -6,9 +6,11 @@ let diff = numOne - numTwo; let mult = numOne * numTwo; let div = numOne / numTwo; let remainder = numOne % numTwo; +let exponentation = numOne ** numTwo // 4 * 4 * 4 console.log(sum); console.log(diff); console.log(mult); console.log(div); console.log(remainder) +console.log(exponentation) diff --git a/07-boolean.js b/scripts/07-boolean.js similarity index 100% rename from 07-boolean.js rename to scripts/07-boolean.js diff --git a/08-template_literals.js b/scripts/08-template_literals.js similarity index 100% rename from 08-template_literals.js rename to scripts/08-template_literals.js diff --git a/09-typeof.js b/scripts/09-typeof.js similarity index 84% rename from 09-typeof.js rename to scripts/09-typeof.js index cc279e4..a41c14d 100644 --- a/09-typeof.js +++ b/scripts/09-typeof.js @@ -1,6 +1,9 @@ /* === Checking Data types === */ +let firstName = 'Asabeneh'; +let age = 250; + console.log (typeof firstName); // it gives string console.log (typeof age); // it gives number console.log (typeof firstName === 'string'); // returns true diff --git a/scripts/10-if.js b/scripts/10-if.js new file mode 100644 index 0000000..77aed67 --- /dev/null +++ b/scripts/10-if.js @@ -0,0 +1,5 @@ +//if +let isRaining = true; +if (isRaining) { + console.log('Remember to take your rain coat.'); +} diff --git a/scripts/11-ifelse.js b/scripts/11-ifelse.js new file mode 100644 index 0000000..0660537 --- /dev/null +++ b/scripts/11-ifelse.js @@ -0,0 +1,6 @@ +//if else +if (isRaining) { + console.log('It is raining. You need a rain coat.'); +} else { + console.log('It is not raining. No need for rain coat.'); +} diff --git a/scripts/12-if-else-if-else.js b/scripts/12-if-else-if-else.js new file mode 100644 index 0000000..4fedd76 --- /dev/null +++ b/scripts/12-if-else-if-else.js @@ -0,0 +1,11 @@ +// if else if else +let weather = 'sunny'; +if (weather === 'rainy') { + console.log('It is raining. You need a rain coat.'); +} else if (weather === 'cloudy') { + console.log('It might be cold you need a jacket.'); +} else if (weather === 'sunny') { + console.log('Go out freely.'); +} else { + console.log('It is not raining. No need for rain coat.'); +} diff --git a/scripts/14-switch.js b/scripts/14-switch.js new file mode 100644 index 0000000..b38c613 --- /dev/null +++ b/scripts/14-switch.js @@ -0,0 +1,111 @@ +// Switch +let weather = 'cloudy'; +switch (weather) { + case 'rainy': + console.log('It is raining. You need a rain coat.'); + break; + case 'cloudy': + console.log('It might be cold you need a jacket.'); + break; + case 'sunny': + console.log('Go out freely.'); + break; + default: + console.log('It is not raining. No need for rain coat.'); + break; +} + +// Swithc More Examples +let dayUserInput = prompt('What day is it ?'); +let day = dayUserInput.toLowerCase(); +switch (day) { + case 'monday': + console.log('Today is Monday'); + break; + case 'tuesday': + console.log('Today is Tuesday'); + break; + case 'wednesday': + console.log('Today is Wednesday'); + break; + case 'thursday': + console.log('Today is Thursday'); + break; + case 'friday': + console.log('Today is Friday'); + break; + case 'saturday': + console.log('Today is Saturday'); + break; + case 'sunday': + console.log('Today is Sunday'); + break; + default: + console.log('It is not a week day.'); + break; +} + +//Example using numbers +let i = 5; +switch (i) { + case 1: + console.log('value is 1'); + break; + case 2: + console.log('value is 2'); + break; + case 3: + console.log('value is 3'); + break; + case 4: + console.log('value is 4'); + break; + case 5: + console.log('value is 5'); + break; + default: + console.log('value not found'); +} + +// Examples to use conditions in the cases + +let num = prompt('Enter number'); +switch (true) { + case num > 0: + console.log('Number is postive'); + break; + case num == 0: + console.log('Numbers is zero'); + break; + case num < 0: + console.log('Number is negative'); + break; + default: + console.log('Entered value was not a number'); +} + +// Swithc More Examples +const month = prompt('Enter months').toLowerCase(); + +switch (month) { + case 'january': + case 'march': + case 'may': + case 'july': + case 'august': + case 'october': + case 'december': + console.log('31 days'); + break; + case 'april': + case 'march': + case 'september': + case 'november': + console.log('30 days'); + break; + case 'february': + console.log('28 days but 29 during leap year'); + break; + default: + console.log('It is not a valid month'); +} diff --git a/scripts/15-ternary-operator.js b/scripts/15-ternary-operator.js new file mode 100644 index 0000000..2c81a43 --- /dev/null +++ b/scripts/15-ternary-operator.js @@ -0,0 +1,9 @@ +let isRaining = true; +isRaining + ? console.log('You need a rain coat.') + : console.log('No need for a rain coat.'); + +let num = 5; +num > 10 + ? console.log('Number is greater than 10') + : console.log('Number is less 10'); diff --git a/scripts/16-1.0-array.js b/scripts/16-1.0-array.js new file mode 100644 index 0000000..e7d9c07 --- /dev/null +++ b/scripts/16-1.0-array.js @@ -0,0 +1,46 @@ +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +]; // String arrays +const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary' +]; // string arrays +const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // Number arrays +const shoppingCart = [ + 'Milk', + 'Mango', + 'Tomato', + 'Potato', + 'Avocado', + 'Meat', + 'Eggs', + 'Sugar' +]; // string arrays + +const mixedArrays = [ + 'Asabeneh', + 250, + true, + { country: 'Finland' }, + { skills: ['HTML', 'CSS', 'JavaScript'] } +]; +console.log(webTechs); +console.log(webTechs.length); // => to know the size of the array, which is 7 +console.log(webTechs[0]); //--> HTML; +console.log(webTechs[webTechs.length - 1]); //--> MongoDB +console.log(countries); +console.log(numbers); +console.log(shoppingCart); +console.log(mixedArrays); diff --git a/16-1.1-array-slice-splice.js b/scripts/16-1.1-array-slice-splice.js similarity index 100% rename from 16-1.1-array-slice-splice.js rename to scripts/16-1.1-array-slice-splice.js diff --git a/17-forloop.js b/scripts/17-forloop.js similarity index 100% rename from 17-forloop.js rename to scripts/17-forloop.js diff --git a/18-whileloop.js b/scripts/18-whileloop.js similarity index 100% rename from 18-whileloop.js rename to scripts/18-whileloop.js diff --git a/19-dowhileloop.js b/scripts/19-dowhileloop.js similarity index 100% rename from 19-dowhileloop.js rename to scripts/19-dowhileloop.js diff --git a/20-functions.js b/scripts/20-functions.js similarity index 94% rename from 20-functions.js rename to scripts/20-functions.js index 1380886..be4451f 100644 --- a/20-functions.js +++ b/scripts/20-functions.js @@ -21,8 +21,8 @@ console.log(sumTwoNumbersAndReturn(10, 20)); function printFullName(firstName, lastName) { return `${firstName} ${lastName}`; } -console.log(printFullName("Asabeneh", "Yetayeh")); -console.log(printFullName("Dean", "Phan")); +console.log(printFullName('Asabeneh', 'Yetayeh')); +console.log(printFullName('Dean', 'Phan')); function square(number) { return number * number; @@ -59,9 +59,3 @@ function sumOfEvensAndOdds() { } console.log(sumOfEvensAndOdds()); - - - - - - diff --git a/scripts/forofloop.js b/scripts/forofloop.js new file mode 100644 index 0000000..207a79d --- /dev/null +++ b/scripts/forofloop.js @@ -0,0 +1,15 @@ +const numbers = [1, 2, 3, 4, 5]; +for (const number of numbers) { + console.log(number); +} + +const names = ['Asabeneh', 'Brook', 'David', 'Mohammed', 'Marta']; + +for (const name of names) { + console.log(name); +} + +const countries = ['Finland', 'Sweden', 'Denmark', 'Norway']; +for (const country of countries) { + console.log(country); +} diff --git a/solutions/javascript-test-1.js b/solutions/javascript-test-1.js new file mode 100644 index 0000000..b7bde73 --- /dev/null +++ b/solutions/javascript-test-1.js @@ -0,0 +1,203 @@ +/**** QUESTION 1: Printing Hashes ****/ +console.log('*** QUESTION 1: Printing Hashes ***'); +const printHashes = () => { + let hash = ''; + for (let i = 0; i < 7; i++) { + hash += '#'; + console.log(hash); + } +} +printHashes(); +/**** QUESTION 2: FizzBuz ****/ +console.log('*** QUESTION 2: FizzBuz ***'); +const fizzBuz = () => { + for (let i = 1; i <= 100; i++) { + if (i % 3 === 0 && i % 5 === 0) { + console.log('FizBuzz', i); + } else if (i % 3 !== 0 && i % 5 == 0) { + console.log('Buz', i); + } else if (i % 3 == 0) { + console.log('Fizz', i); + } else { + console.log(i); + } + } +} +fizzBuz(); +/**** QUESTION 3: Maximum *** + * + * + */ +console.log('*** QUESTION 3: Maximum ***'); +const findMax = (a, b, c) => { + let max; + if (a > b && a > c) { + max = a; + } else if (b > a && b > c) { + max = b; + } else { + max = c; + } + return max; +} +console.log(findMax(10, -9, 5)); +console.log(findMax(-10, -9, -20)); +console.log(findMax(-10, -9, 20)); + +/* + *** QUESTION 4: Reverse Array *** + */ +console.log('*** QUESTION 4: Reverse Array ***'); +const reverseArray = (arr) => { + let newArr = []; + let len = arr.length - 1; + for (let i = 0; i <= len; i++) { + newArr[i] = arr[len - i]; + } + return newArr; +} +console.log(reverseArray([1, 2, 3, 4, 5])); +console.log(reverseArray(['A', 'B', 'C'])); + +/* + *** QUESTION 5: Modify Array*** + */ +console.log('*** QUESTION 5: Modify Array***'); +const modifyArray = (arr) => { + let modifiedArr = []; + if (arr.length < 5) { + return 'Not Found'; + } + for (let i = 0; i < arr.length; i++) + i === 4 + ? (modifiedArr[i] = arr[i].toUpperCase()) + : (modifiedArr[i] = arr[i]); + + return modifiedArr; +} +console.log( + modifyArray(['Avocado', 'Tomato', 'Potato', 'Mango', 'Lemon', 'Carrot']) +); + +/* + *** QUESTION 6 : Seven unique random numbers in an array*** + */ +console.log('*** QUESTION 6 : Seven unique random numbers in an array***'); +// solution 1 +function sevenRandomNumbers() { + const randNumbers = []; + while (randNumbers.length < 7) { + const randNum = Math.floor(Math.random() * 9) + 1; + if (randNumbers.indexOf(randNum) === -1) { + randNumbers.push(randNum); + } + } + return randNumbers; +} + +console.log(sevenRandomNumbers()); +// solution 2 +function sevenRandomNumbers() { + const randNumbers = []; + let i = 0; + let randNum; + let len = randNumbers.length; + while (i < 7) { + randNum = Math.floor(Math.random() * 10 + 1); + if (i == 0) { + randNumbers[i] = randNum; + } else { + if (randNumbers.indexOf(randNum) == -1) { + randNumbers[i] = randNum; + } else { + i--; + } + } + i++; + } + + return randNumbers; +} +console.log(sevenRandomNumbers()); +function sevenRandomNumber() { + const randNumbers = []; + while (array.length < 7) { + const random = Math.floor(Math.random() * 9); + if (randNumbers.indexOf(random) === -1) { + randNumbers.push(random); + } + } + console.log(randNumbers); + return randNumbers; +} + +sevenRandomNumber(); + +/* + *** QUESTION 7: Sum *** + */ +console.log('*** QUESTION 7: Sum of any number of arguments***'); +const sumOfArgs = (...args) => { + let total = 0; + args.forEach(arg => (total += arg)); + return total; +}; +console.log(sumOfArgs(1, 2, 3)); +console.log(sumOfArgs(1, 2, 3, 4)); + +function sum() { + let total = 0; + Array.from(arguments).forEach(arg => (total += arg)); + return total; +} + +console.log(sum(1, 2, 3)); +console.log(sum(1, 2, 3, 4)); +/* + *** QUESTION 8: Replace the middle item with three items*** + */ +console.log('*** QUESTION 8: Replace the middle item with three items***'); +const removeMiddleItem = (arr, itemOne, itemTwo, itemThree) => { + let arrayLen = arr.length; + let middleIndex; + if (arrayLen % 2 === 0) { + middleIndex = arrayLen / 2 - 1; + arr.splice(middleIndex, 2, itemOne, itemTwo, itemThree); + } else { + middleIndex = (arrayLen + 1) / 2 - 1; + arr.splice(middleIndex, 1, itemOne, itemTwo, itemThree); + } + return arr; +} +console.log(removeMiddleItem([1, 2, 3], 'item 1', 'item2', 'item3')); +console.log(removeMiddleItem([1, 2, 3, 4], 'item 1', 'item2', 'item3')); +console.log(removeMiddleItem([1, 2, 3], 4, 5, 6)); +/* + *** QUESTION 9: Extract numbers from text *** + */ +console.log('*** QUESTION 9: Extract numbers from a text ***'); +const calculateAnnualIncome = () => { + const pattern = /[0-9]+/g; + const incomes = 'He earns 5000 euro from salary per month, 10000 euro annual bonus, 15000 euro online courses per month.'.match( + pattern + ); + let sum = 0; + incomes.forEach((income, i) => { + if (i == 0 || i == 2) { + sum += parseFloat(income) * 12; + } else { + sum += parseFloat(income); + } + }); + return sum; +} +console.log(calculateAnnualIncome()); +/* + *** QUESTION 10: Check if a sub string is an end of a text *** + */ +console.log('*** QUESTION 10: Check if a sub string is an end of a text ***'); +const checkEndOfString = (mainString, subString) => { + return mainString.endsWith(subString); +} +console.log(checkEndOfString('integrity', 'ity')); +console.log(checkEndOfString('integration', 'tio')); diff --git a/solutions/javascript-test-2020.js b/solutions/javascript-test-2020.js new file mode 100644 index 0000000..f98754d --- /dev/null +++ b/solutions/javascript-test-2020.js @@ -0,0 +1,780 @@ +console.log('==================== BEGIN Q1 ============================ ') +/* === Question 1 === */ +// 1. 1 +const printHashes = () => { + let hash = '' + for (let i = 0; i < 7; i++) { + hash += '#' + console.log(hash) + } +} + +printHashes() +console.log('----------------------------------------------------------- ') + +// 1. 2 +const multiplicationTable = n => { + for (let i = 0; i < n; i++) { + console.log(`${i} * ${i} = ${i * i}`) + } +} + +multiplicationTable(11) +console.log('----------------------------------------------------------- ') + +// 1. 3 +const exponentialTable = () => { + console.log(`i\ti^2\t^3`) + for (let i = 0; i < 11; i++) { + console.log(`${i}\t${i ** 2}\t${i ** 3}`) + } +} + +exponentialTable() +console.log('----------------------------------------------------------- ') + +// 1. 4 +const countries = [ + 'ALBANIA', + 'BOLIVIA', + 'CANADA', + 'DENMARK', + 'ETHIOPIA', + 'FINLAND', + 'GERMANY', + 'HUNGARY', + 'IRELAND', + 'JAPAN', + 'KENYA' +] +// const createArrayOfArrays = arr => { +// const newArray = [] +// for (const element of arr) { +// let name = element[0] + element.slice(1).toLowerCase() +// newArray.push([name, element.slice(0, 3), element.length]) +// } +// return newArray +// } + +const createArrayOfArrays = arr => + arr.map(country => { + let name = country[0] + country.slice(1).toLowerCase() + return [name, country.slice(0, 3), country.length] + }) + +console.log(createArrayOfArrays(countries)) + +console.log('==================== END Q1 ============================ ') + +console.log('==================== BEGIN Q2 ============================ ') +/* === Question 2 === */ +// 2. 1 +const products = [ + { product: 'banana', price: 3 }, + { product: 'mango', price: 6 }, + { product: 'potato', price: ' ' }, + { product: 'avocado', price: 8 }, + { product: 'coffee', price: 10 }, + { product: 'tea', price: '' } +] + +const printProductItems = arr => { + for (const { product, price } of arr) { + let formattedPrice = typeof price == 'number' ? price : 'unknown' + console.log(`The price of ${product} is ${formattedPrice}`) + } +} + +printProductItems(products) +console.log('----------------------------------------------------------- ') + +// 2. 2 +const sumOfAllPrices = arr => { + let total = 0 + for (const { price } of arr) { + if (typeof price == 'number') { + total += price + } + } + return total +} + +console.log('the sum of all prices using for of', sumOfAllPrices(products)) +console.log('----------------------------------------------------------- ') + +// 2. 3 +const total = products + .map(prod => prod.price) + .filter(price => typeof price == 'number') + .reduce((curr, acc) => curr + acc) + +console.log('total from method chaining', total) +console.log('----------------------------------------------------------- ') + +// 2. 4 +const totalUsingReduce = products.reduce((accu, curr) => { + let price = typeof curr.price == 'number' ? curr.price : 0 + return accu + price +}, 0) + +console.log('reduce total', totalUsingReduce) +console.log(sumOfAllPrices(products)) +console.log('==================== END Q2 ============================ ') + +console.log('==================== BEGIN Q3 ============================ ') +/*=== Question 3 === */ + +// 3. 1 +const howManyDaysInMonth = () => { + const userInput = prompt('Enter a month: ') + .trim() + .toLowerCase() + + const firstLetter = userInput[0].toUpperCase() + const remainingStr = userInput.slice(1) + const month = firstLetter + remainingStr + + let statement + let days + switch (userInput) { + case 'february': + days = 28 + statement = `${month} has ${days} days.` + break + case 'april': + case 'june': + case 'september': + case 'november': + days = 30 + statement = `${month} has ${days} days.` + break + case 'january': + case 'march': + case 'may': + case 'july': + case 'august': + case 'october': + case 'december': + days = 31 + statement = `${month} has ${days} days.` + break + default: + return 'The given value is not a month' + } + return statement +} + +console.log(howManyDaysInMonth()) +console.log('----------------------------------------------------------- ') + +// 3. 2 +const generate = (type = 'id') => { + const randomId = (n = 6) => { + const str = '0123456ABCDEFGHIJKLMNOPKRSTUVWXYZabcdefghihjklmnopqrstuvwxyz' + let id = '' + for (let i = 0; i < n; i++) { + let index = Math.floor(Math.random() * str.length) + id = id + str[index] + } + return id + } + + const hexaColor = function() { + let st = '0123456789abcdef'.split('') + let color = '#' + for (let i = 0; i < 6; i++) { + let index = Math.floor(Math.random() * st.length) + color += st[index] + } + return color + } + + const rgbColor = function() { + let redColor = Math.floor(Math.random() * 256) + let greenColor = Math.floor(Math.random() * 256) + let blueColor = Math.floor(Math.random() * 256) + + const rgb = `rgb(${redColor},${greenColor},${blueColor})` + return rgb + } + switch (type.toLowerCase()) { + case 'id': + return randomId() + case 'hexa': + case 'hexadecimal': + return hexaColor() + case 'rgb': + return rgbColor() + default: + return 'Not a valid format' + } +} + +console.log(generate()) +console.log(generate('id')) +console.log(generate('hexa')) +console.log(generate('hexadecimal')) +console.log(generate('rgb')) +console.log(generate('RGB')) +console.log(generate('rgb')) + +console.log('==================== END Q3 ============================ ') + +console.log('==================== BEGIN Q4 ============================ ') + +/*=== Question 4 ==== */ + +// 4. 1 +const countries2 = [ + 'ALBANIA', + 'BOLIVIA', + 'CANADA', + 'DENMARK', + 'ETHIOPIA', + 'FINLAND', + 'GERMANY', + 'HUNGARY', + 'IRELAND', + 'JAPAN', + 'KENYA' +] + +const c = ['ESTONIA', 'FRANCE', 'GHANA'] +countries2.splice(4, 3, ...c) +console.log(countries2) +console.log('----------------------------------------------------------- ') + +// 4. 2 +const checkUniqueness = arr => { + for (const element of arr) { + if (arr.indexOf(element) !== arr.lastIndexOf(element)) { + return false + } + } + return true +} +const arrOne = [1, 4, 6, 2, 1] +console.log(checkUniqueness(arrOne)) // false +const arrTwo = [1, 4, 6, 2, 3] +console.log(checkUniqueness(arrTwo)) // true +console.log('----------------------------------------------------------- ') + +// 4. 3 +const checkDataTypes = (arr, type) => arr.every(elem => typeof elem === type) + +const numbers = [1, 3, 4] +const names = ['Asab', '30DaysOfJavaScript'] +const bools = [true, false, true, true, false] +const mixedData = ['Asab', 'JS', true, 2019, { name: 'Asab', lang: 'JS' }] +const obj = [{ name: 'Asab', lang: 'JS' }] +console.log(checkDataTypes(numbers, 'number')) // true +console.log(checkDataTypes(numbers, 'string')) // false +console.log(checkDataTypes(names, 'string')) // true +console.log(checkDataTypes(bools, 'boolean')) // true +console.log(checkDataTypes(mixedData, 'boolean')) // false +console.log(checkDataTypes(obj, 'object')) // true + +console.log('==================== END Q4 ============================ ') + +console.log('==================== BEGIN Q5 ============================ ') +/*=== Question 5 ==== */ + +// 5. 1 +const fullStack = [ + ['HTML', 'CSS', 'JS', 'React'], + ['Node', 'Express', 'MongoDB'] +] +const [frontEnd, backEnd] = fullStack +console.log(frontEnd, backEnd) +console.log('----------------------------------------------------------- ') + +// 5. 2 +const student = ['David', ['HTM', 'CSS', 'JS', 'React'], [98, 85, 90, 95]] +const [ + name, + [html, css, js, react], + [htmlScore, cssScore, jsScore, reactScore] +] = student +console.log( + name, + html, + css, + js, + react, + htmlScore, + cssScore, + jsScore, + reactScore +) +console.log('----------------------------------------------------------- ') + +// 5. 3 +const students = [ + ['David', ['HTM', 'CSS', 'JS', 'React'], [98, 85, 90, 95]], + ['John', ['HTM', 'CSS', 'JS', 'React'], [85, 80, 85, 80]] +] + +// one way +// const convertArrayToObject = arr => { +// const newArray = [] +// for (const [name, skills, scores] of arr) { +// newArray.push({ name, skills, scores }) +// } +// return newArray +// } + +// another way +const convertArrayToObject = arr => + arr.map(([name, skills, scores]) => { + return { name, skills, scores } + }) + +console.log(convertArrayToObject(students)) +console.log('==================== END Q5 ============================ ') + +console.log('==================== BEGIN Q6 ============================ ') +/*=== Question 6 ==== */ + +// 6. 1 +const sumOfAllNums = (...args) => { + let sum = 0 + for (const element of args) { + sum += element + } + return sum +} + +console.log(sumOfAllNums(2, 3, 1)) // 6 +console.log(sumOfAllNums(1, 2, 3, 4, 5)) // 15 +console.log(sumOfAllNums(1000, 900, 120)) // 2020 + +function sumOfAllNums2() { + let sum = 0 + for (let i = 0; i < arguments.length; i++) { + sum += arguments[i] + } + return sum +} + +console.log(sumOfAllNums2(2, 3, 1)) // 6 +console.log(sumOfAllNums2(1, 2, 3, 4, 5)) // 15 +console.log(sumOfAllNums2(1000, 900, 120)) // 2020 +console.log('----------------------------------------------------------- ') + +// 6. 2 +const [x, y] = [2, a => a ** 2 - 4 * a + 3] +const valueOfX = x // 2 +const valueOfY = y // (a) => a ** 2 - 4 * a + 3 +console.log(valueOfX, valueOfY) +console.log(y(x)) // -1 +console.log('----------------------------------------------------------- ') + +// 6. 3 + +const studentObj = { + name: 'David', + age: 25, + skills: { + frontEnd: [ + { skill: 'HTML', level: 10 }, + { skill: 'CSS', level: 8 }, + { skill: 'JS', level: 8 }, + { skill: 'React', level: 9 } + ], + backEnd: [ + { skill: 'Node', level: 7 }, + { skill: 'GraphQL', level: 8 } + ], + dataBase: [{ skill: 'MongoDB', level: 7.5 }], + dataScience: ['Python', 'R', 'D3.js'] + } +} +const devOps = [ + { skill: 'AWS', level: 7 }, + { skill: 'Jenkin', level: 7 }, + { skill: 'Git', level: 8 } +] +const copiedStudentObj = { + ...studentObj, + skills: { + ...studentObj.skills, + frontEnd: [...studentObj.skills.frontEnd, { skill: 'Bootstrap', level: 8 }], + backEnd: [...studentObj.skills.backEnd, { skill: 'Express', level: 8 }], + dataBase: [...studentObj.skills.dataBase, { skill: 'SQL', level: 8 }], + dataScience: [...studentObj.skills.dataScience, 'SQL'], + devOps: [...devOps] + } +} +console.log(copiedStudentObj) +console.log('==================== END Q6 ============================ ') + +console.log('==================== BEGIN Q7 ============================ ') +/*=== Question 7 ==== */ + +// 7. 1 +const showDateTime = (format = 'dd/mm/yyyy') => { + const months = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December' + ] + const now = new Date() + const year = now.getFullYear() + const month = months[now.getMonth()] + const mm = now.getMonth() + 1 + const date = now.getDate() + const dd = now.getDate() + let hours = now.getHours() + let hh = now.getHours() + let minutes = now.getMinutes() + + let seconds = now.getSeconds() + if (hours < 10) { + hours = '0' + hours + } + if (minutes < 10) { + minutes = '0' + minutes + } + if (seconds < 10) { + seconds = '0' + seconds + } + + const dateMonthYear = `${month} ${date}, ${year}` + + const time = hours + ':' + minutes + const fullTime = dateMonthYear + ' ' + time + // return fullTime + `:${seconds}` + switch (format) { + case 'dd/mm/yyyy': + return `${dd}/${mm}/${year}` + case 'dd-mm-yyyy': + return `${dd}-${mm}-${year}` + case 'dd/mm/yyyy hh:mm': + return `${dd}/${mm}/${year} ${hours}:${minutes}` + case 'dd-mm-yyyy hh:mm': + return `${dd}-${mm}-${year} ${hours}:${minutes}` + case 'MMM DD, YYYY': + return `${month} ${dd}, ${year}` + case 'MMM DD, YYYY hh:mm': + return `${month} ${dd}, ${year} ${hours}:${minutes}` + + default: + return `${dd}/${mm}/${year}` + } +} + +console.log(showDateTime()) +console.log(showDateTime('dd-mm-yyyy')) +console.log(showDateTime('dd-mm-yyyy hh:mm')) +console.log(showDateTime('dd/mm/yyyy hh:mm')) +console.log(showDateTime('Month DD, YYYY')) +console.log(showDateTime('MMM DD, YYYY hh:mm')) +console.log('----------------------------------------------------------- ') +// 7. 1 + +const todoList = [ + { + task: 'Prepare JS Test', + time: '5/4/2020 8:30', + completed: true + }, + { + task: 'Give JS Test', + time: '6/4/2020 10:00', + completed: false + }, + { + task: 'Assess Test Result', + time: '4/3/2019 1:00', + completed: false + } +] + +const addTask = task => { + const time = showDateTime('dd-mm-yyyy hh:mm') + const completed = false + todoList.push({ task, time, completed }) +} + +const removeTask = index => { + todoList.splice(index, 1) +} + +const editTask = (index, newTask) => { + todoList[index].task = newTask + todoList.push({ task, time, completed }) +} +const toggleTask = index => { + todoList[index].completed = !todoList[index].completed +} + +const toggleAll = () => { + const checkCompleted = todoList.filter(todo => todo.completed === true).length + if (checkCompleted.length === todoList.length) { + for (const item of todoList) { + item.completed = !item.completed + } + } else { + for (const item of todoList) { + item.completed = true + } + } +} + +console.log(todoList) + +toggleAll() +console.log(todoList) + +const removeAll = () => { + // todoList = [] + todoList.splice() +} +console.log('==================== END Q7 ============================ ') + +console.log('==================== BEGIN Q8 ============================ ') + +/*=== Question 8 ==== */ + +// 8. 1 + +// generic function to sort items both for string and number +const sortItems = (arr, key) => { + const copiedArr = [...arr] + copiedArr.sort((a, b) => { + if (a[key] > b[key]) return -1 + if (a[key] < b[key]) return 1 + else return 0 + }) + return copiedArr +} + +const largestCountries = async (n = 10) => { + const API_URL = 'https://restcountries.eu/rest/v2/all' + const countriesArea = [] + const response = await fetch(API_URL) + const data = await response.json() + + for (const { name, area } of data) { + countriesArea.push({ country: name, area }) + } + + const countriesSortedByArea = sortItems(countriesArea, 'area').slice(0, n) + console.log(`${n} most largest countries`, countriesSortedByArea) +} + +largestCountries(10) + +const numberOfLanguages = async () => { + const API_URL = 'https://restcountries.eu/rest/v2/all' + const langSet = new Set() + const response = await fetch(API_URL) + const data = await response.json() + + for (const { languages } of data) { + for (const { name } of languages) { + langSet.add(name) + } + } + + console.log(Array.from(langSet).sort()) + console.log( + 'Total number of langauges in the countries API:', + Array.from(langSet).length + ) + console.log('----------------------------------------------------------- ') +} +numberOfLanguages() + +const mostSpokenLanguages = async (n = 10) => { + const API_URL = 'https://restcountries.eu/rest/v2/all' + const langSet = new Set() + const allLangArr = [] + const languageFrequency = [] + + try { + const response = await fetch(API_URL) + const data = await response.json() + + for (const { languages } of data) { + for (const { name } of languages) { + allLangArr.push(name) + langSet.add(name) + } + } + + for (l of langSet) { + const x = allLangArr.filter(ln => l == ln) + languageFrequency.push({ + lang: l, + count: x.length + }) + } + + const sortedLanguages = sortItems(languageFrequency, 'count').slice(0, n) + console.log(`${n} most spoken languages`, sortedLanguages) + } catch { + console.log('Something goes wrong') + } + console.log('----------------------------------------------------------- ') +} + +console.log('Most spoken languages', mostSpokenLanguages(15)) + +// 8.2 + +const add = (a, b) => { + if (b) { + return a + b + } + if (!a) { + return 'at least one parameter is required' + } + return b => a + b +} +console.log(add(2, 3)) +console.log(add()) +console.log(add(2)(3)) + +console.log('==================== END Q8 ============================ ') + +console.log('==================== BEGIN Q9 ============================ ') + +/*=== Question 9 ==== */ +/* +9.1 What is the difference between forEach, map, filter and reduce? (1 pt) +9.2 What is the difference between find and filter? (1pt) +9.3 Which of the following mutate array: map, filter, reduce, slice, splice, concat, sort, some? (2pt) only splice and sort modify an array +*/ + +const generateColor = (type = 'hexa', n = 1) => { + const hexaColor = function() { + let st = '0123456789abcdef'.split('') + let color = '#' + for (let i = 0; i < 6; i++) { + let index = Math.floor(Math.random() * st.length) + color += st[index] + } + return color + } + + const rgbColor = function() { + let redColor + let greenColor + let blueColor + + redColor = Math.floor(Math.random() * 256) + greenColor = Math.floor(Math.random() * 256) + blueColor = Math.floor(Math.random() * 256) + const rgb = `rgb(${redColor},${greenColor},${blueColor})` + return rgb + } + + const rgbColors = [] + const hexaColors = [] + if (n > 1) { + if (type == 'hexa') { + for (let i = 0; i < n; i++) { + hexaColors.push(hexaColor()) + } + } else if (type == 'rgb') { + for (let i = 0; i < n; i++) { + rgbColors.push(rgbColor()) + } + } + } + + switch (type) { + case 'hexa': + const hexa = n > 1 ? hexaColors : hexaColor() + return hexa + case 'rgb': + const rgb = n > 1 ? rgbColors : rgbColor() + return rgb + default: + return hexaColor() + } +} + +console.log(generateColor()) +console.log(generateColor('hexa')) +console.log(generateColor('rgb')) +console.log(generateColor('hexa', 3)) +console.log(generateColor('rgb', 3)) +console.log('==================== END Q9 ============================ ') + +console.log('==================== BEGIN Q10 ============================ ') + +/*=== Question 10 ==== */ + +const para = `Studies that estimate and rank the most common words in English examine texts written in English. Perhaps the most comprehensive such analysis is one that was conducted against the Oxford English Corpus (OEC), a very large collection of texts from around the world that are written in the English language. A text corpus is a large collection of written works that are organised in a way that makes such analysis easier.` + +const cleanText = txt => { + const pattern = /[^\w ]/g + return txt.replace(pattern, '') +} + +const mostFrequentWord = (txt, n = 10) => { + const cleanedText = cleanText(txt) + const words = cleanedText.split(' ') + const map = new Map() + for (const word of words) { + if (map.has(word)) { + let count = map.get(word.toLowerCase()) + 1 + map.set(word.toLowerCase(), count) + } else { + map.set(word.toLowerCase(), 1) + } + } + + return Array.from(map) + .map(([word, count]) => { + return { word, count } + }) + .slice(0, n) +} + +console.log('Most frequent words', sortItems(mostFrequentWord(para), 'count')) +console.log('----------------------------------------------------------- ') + +// 10. 2 +const sentence = `@He@ @%met%^$##%# his mom at no@on and s@he was watching %^$#an epso@ide%^$# of the begni@nging of her Sol@os. Her te@net%^$# hel@ped %^$#her to le@vel up her stats. %^$#After that h@e went to %^$#kayak driving Civic %^$#Honda.` + +const cleanedText = cleanText(sentence) +console.log(cleanedText) +console.log('----------------------------------------------------------- ') + +// 10. 3 +const checkPalindrome = param => { + const word = typeof param == 'number' ? param.toString() : param + let invertedWord = '' + for (let i = word.length - 1; i >= 0; i--) { + invertedWord += word[i] + } + return word.toLowerCase() === invertedWord.toLowerCase() +} + +console.log('Check palindrome the number 123:', checkPalindrome(323)) +console.log('Check palindrome the word anna:', checkPalindrome('anna')) +console.log('Check palindrome the word He:', checkPalindrome('He')) +console.log('----------------------------------------------------------- ') + +// 10.4 +const words = cleanText(sentence).split(' ') +const palindromes = words.filter(word => checkPalindrome(word)) +const numberOfPalindromes = palindromes.length +console.log( + 'Total number of palindrome words in the text:', + numberOfPalindromes +) + +console.log('==================== END Q10 ============================ ') diff --git a/solutions/javascript-test-3.js b/solutions/javascript-test-3.js new file mode 100644 index 0000000..02cbe4c --- /dev/null +++ b/solutions/javascript-test-3.js @@ -0,0 +1,449 @@ +/* =============================== QUESTION 1 ================================================ + Write a function which count the number of occurrence of a word in a paragraph or a sentence. + The function countWords takes a paragraph and word as parameters. + ============================================================================================= */ +const paragraph = + 'I love teaching. If you do not love teaching what else can you love. I love JavaScript if you do not love something which can give life to your application what else can you love.'; +//Method one +const countWords1 = (para, wrd) => { + const pattern = new RegExp(wrd, 'gi'); //creating regex object using RegExp constructor + const matches = para.match(pattern) || []; // if the para.match returns null, matches result will be en empty array + return matches.length; // geting the length of the array +}; +console.log(countWords1(paragraph, 'love')); + +//Method +const countWords2 = (para, wrd) => { + let count = 0; + const words = para.split(' '); // spliting the paragraph into array of words + //iterating through words array and checking if the target word is in the array + for (const word of words) { + //includes or startsWith could give the same result + if (word.toLowerCase().includes(wrd.toLowerCase())) { + console.log(word); + count++; + } + } + return count; +}; +console.log(countWords2(paragraph, 'love')); + +/* ======================================== QUESTION 2 ====================================================== + Write a function which takes an array as a parameter and returns an array of the data types of each item: + ========================================================================================================== */ +const arr = ['Asabeneh', 100, true, null, undefined, { job: 'teaching' }]; +const checkDataTypes = arr => { + const dataTypes = []; // creating an empty array + let type; // will be used in the loop to store the data type of each element in the array + for (const element of arr) { + type = typeof element; // type checking of each elements + dataTypes.push(type); + } + return dataTypes; // returning the above array which contains all the datatypes of the elements +}; +console.log(checkDataTypes(arr)); + +/* ========================= QUESTION 3 ============================== + Create a function which filter ages greater than 18 from ages array. + const ages = [35, 30, 17, 18, 15, 22, 16, 20]; + console.log(agesGreaterEighteen(ages)); + [35, 30, 22, , 20]; + =================================================================== */ + +const ages = [35, 30, 17, 18, 15, 22, 16, 20]; +const agesGreaterEighteen = ages => { + const agesGreater18 = []; // creating an empty array to store ages which are abover 18 + //iterating through the ages array + for (const age of ages) { + //checking if the age if it is greater than 18 + if (age > 18) { + agesGreater18.push(age); // + } + } + return agesGreater18; +}; +console.log(agesGreaterEighteen(ages)); +/* ======================== QUESTION 4 =========================== + Write a function which calculate the average age of the group. + ================================================================ */ +const averageAge = ages => { + let sum = 0; // an accumulator to sum all the ages + for (const age of ages) { + // adding each age to the sum varaible + sum += age; + } + return Math.round(sum / ages.length); // rounding the number to the closest integer +}; +console.log(averageAge(ages)); + +/* ======================== QUESTION 5 =========================== + Write a function which remove an item or items from the middle of the array and replace with two items + ================================================================ */ +const products = ['Milk', 'Coffee', 'Tea', 'Honey', 'Meat', 'Cabage']; +const removeMiddleItem = (arr, ...items) => { + let middleIndex; // to store the middle index of the array, + if (arr.length % 2 === 0) { + //if the array length is even + middleIndex = arr.length / 2 - 1; + //splice takes starting point, number of items to remove and items to replace + arr.splice(middleIndex, 2, ...items); + } else { + //if the array length is odd + middleIndex = Math.floor(arr.length / 2); + console.log(middleIndex); + arr.splice(middleIndex, 1, ...items); + } + + return arr; +}; +console.log(removeMiddleItem(products, 'potato', 'banana')); + +/* ====================== QUESTION 6 ============================================== + Write a function which can generate a random Finnish car code(Car plate number). + console.log(genCarPlateNum()) + AFG-205 + console.log(genCarPlateNum()) + JCB-586 + ================================================================================ */ + +const genCarPlateNum = () => { + const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; + const numbers = '0123456789'; + let lettersPart = ''; // variable to store, the letters part + let numbersPart = ''; // variable to store, the letters part + let indexOne; // random index to extract one of the letter at a time from letters array + let indexTwo; // random index to extract one of the number at a time from numbers array + for (let i = 0; i < 3; i++) { + indexOne = Math.floor(Math.random() * letters.length); + indexTwo = Math.floor(Math.random() * numbers.length); + lettersPart += letters[indexOne]; + numbersPart += numbers[indexTwo]; + } + return `${lettersPart}-${numbersPart}`; +}; +console.log(genCarPlateNum()); +/* ======================================= QUESTION 7 ============================================= + The following shopping cart has four products. + Create an addProduct, removeProduct ,editProduct , removeAll functions to modify the shopping cart. + const shoppingCart = ['Milk','Coffee','Tea', 'Honey']; + addProduct( "Meat"); + ["Milk", "Coffee", "Tea", "Honey", "Meat"] + editProduct(3, "Sugar" ); + ["Milk", "Coffee", "Tea", "Sugar", "Meat"] + removeProduct(0); + ["Coffee", "Tea", "Sugar", "Meat"] + removeProduct(3); + ["Coffee", "Tea", "Sugar"] + ================================================================================================= */ +const shoppingCart = ['Milk', 'Coffee', 'Tea', 'Honey']; +const addProduct = (products, product) => { + products.push(product); + return products; +}; +addProduct(shoppingCart, 'Meat'); +console.log(shoppingCart); +const editProduct = (products, index, product) => { + products[index] = product; + return products; +}; +editProduct(shoppingCart, 3, 'Sugar'); +console.log(shoppingCart); +const removeProduct = index => { + shoppingCart.splice(index, 1); + return shoppingCart; +}; +removeProduct(0); +console.log(shoppingCart); +removeProduct(3); +console.log(shoppingCart); + +/* ======================== QUESTION 8 ======================================== + Write a function which can generate a random Finnish social security number. + console.log(genSocialSecurityNum()) + 220590 - 255H + console.log(genSocialSecurityNum()) + 190395 - 225J + ============================================================================= */ +const genSocialSecurityNum = () => { + const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; + const numbers = '0123456789'; + let index = Math.floor(Math.random() * letters.length); + const letter = letters[index]; // getting a letter from the letters array + let date = Math.floor(Math.random() * 31) + 1; // date from 1 to 31 + let month = Math.floor(Math.random() * 12) + 1; // month from 1 to 12 + + //if the date or month is less than 10 + if (date < 10) date = '0' + date; + if (month < 10) month = '0' + month; + + let year = Math.floor(Math.random() * 2019); + if (year > 100) { + year = year.toString().substr(-2); + } else if (year < 10) { + year = '0' + year; + } + + let suffix = ''; + for (let i = 0; i < 3; i++) { + let randomIndex = Math.floor(Math.random() * numbers.length); + suffix += numbers[randomIndex]; + } + + return `${date}${month}${year}-${suffix}${letter}`; +}; +console.log(genSocialSecurityNum()); + +/* ========================================= QUESTION 9 ======================================================= + The following todoList has three tasks. + Create an addTask, removeTask, editTask, toggleTask, toggleAll, removeAll functions to modify the todoList. + const todoList = [ + { + task:'Prepare JS Test', + time:'4/3/2019 8:30', + completed:true + + }, + { + task:'Give JS Test', + time:'4/3/2019 10:00', + completed:false + + }, + { + task:'Assess Test Result', + time:'4/3/2019 1:00', + completed:false + + }] +========================================================================================================= */ +const todoList = [ + { + task: 'Prepare JS Test', + time: '4/3/2019 8:30', + completed: true + }, + { + task: 'Give JS Test', + time: '4/3/2019 10:00', + completed: false + }, + { + task: 'Assess Test Result', + time: '4/3/2019 1:00', + completed: false + } +]; + +// function to generate date, month, year, hour and minute : day/month/year hh:mm +const displayDateTime = () => { + const now = new Date(); + const year = now.getFullYear(); + const month = now.getMonth() + 1; + const date = now.getDate(); + const hours = now.getHours(); + let minutes = now.getMinutes(); + if (minutes < 10) { + minutes = '0' + minutes; + } + return `${date}/${month}/${year} ${hours}:${minutes}`; +}; + +const addTask = task => { + const time = displayDateTime(); + const completed = false; + const newTask = { task, time, completed }; + todoList.push(newTask); +}; +const editTask = (index, task) => { + todoList[index].task = task; +}; + +const removeTask = index => { + todoList.splice(index, 1); +}; +const toggleTask = (index, task) => { + todoList[index].completed = !todoList[index].completed; +}; +const toggleAll = arr => { + let completedTodos = 0; + for (let i = 0; i < arr.length; i++) { + if (arr[i].completed) { + completedTodos++; + } + if (completedTodos === arr.length) { + for (let i = 0; i < arr.length; i++) { + arr[i].completed = !arr[i].completed; + } + } else { + for (let i = 0; i < arr.length; i++) { + arr[i].completed = true; + } + } + } + return arr; +}; +console.log(toggleAll(todoList)); +const removeAll = () => { + todoList = []; + return todoList; +}; +console.log(todoList); + +/* ========================= QUESTION 10 ========================= + Write a function which check if items of an array are unique? + const arrOne = [1, 4, 6, 2, 1]; + console.log(checkUniqueness(arrOne)); + false + const arrTwo = [1, 4, 6, 2, 3] + console.log(checkUniqueness(arrTwo)); + true +================================================================== */ +const checkUniqueness = arr => { + let uniquenesFlag = true; + for (const element of arr) { + if (arr.indexOf(element) !== arr.lastIndexOf(element)) { + uniquenesFlag = false; + break; + } + } + return uniquenesFlag; +}; +const arrOne = [1, 4, 6, 2, 1]; +console.log(checkUniqueness(arrOne)); + +const arrTwo = [1, 4, 6, 2, 3]; +console.log(checkUniqueness(arrTwo)); +/* ====================== QUESTION 11 ========================================================== + Write a function named shuffle, it takes an array parameter and it returns a shuffled array. + ============================================================================================= */ +const shuffle = arr => { + const shuffledArray = []; // empty array to store shaffled array + let index; // random index which we use to take element from the original array + let element; // the item we get using the random index will be stored in element + while (shuffledArray.length !== arr.length) { + index = Math.floor(Math.random() * arr.length); + element = arr[index]; + if (shuffledArray.indexOf(element) === -1) { + shuffledArray.push(element); + } + } + return shuffledArray; +}; +console.log(shuffle([1, 2, 3, 4, 5])); + +/* =============================== Bonus ============================================= + Write a function which filter users who has scoresGreaterThan85. + Write a function which addUser to the user array only if the user does not exist. + Write a function which addUserSkill which can add skill to a user only if the user exist. + Write a function which editUser if the user exist in the users array. + ========================================================================================== */ +const users = [ + { + name: 'Brook', + scores: 75, + skills: ['HTM', 'CSS', 'JS'], + age: 16 + }, + { + name: 'Alex', + scores: 80, + skills: ['HTM', 'CSS', 'JS'], + age: 18 + }, + { + name: 'David', + scores: 75, + skills: ['HTM', 'CSS'], + age: 22 + }, + { + name: 'John', + scores: 85, + skills: ['HTM'], + age: 25 + }, + { + name: 'Sara', + scores: 95, + skills: ['HTM', 'CSS', 'JS'], + age: 26 + }, + { + name: 'Martha', + scores: 80, + skills: ['HTM', 'CSS', 'JS'], + age: 18 + }, + { + name: 'Thomas', + scores: 90, + skills: ['HTM', 'CSS', 'JS'], + age: 20 + } +]; + +const scoresGreaterThan85 = arr => { + const scores = []; + for (const element of arr) { + if (element.scores > 85) { + scores.push(element.scores); + } + } + return scores; +}; + +console.log(scoresGreaterThan85(users)); +const newUser = { + name: 'Asabeneh', + scores: 800, + skills: ['HTML', 'CSS', 'JS'], + age: 250 +}; +const addUser = (arr, newUser) => { + for (const user of arr) { + if (user['name'] === newUser.name) { + return ' A user does exist'; + } + } + arr.push(newUser); + return arr; +}; +console.log(addUser(users, newUser)); + +const addUserSkill = (arr, name, skill) => { + let found = false; + for (const user of arr) { + if (user['name'] === name) { + user.skills.push(skill); + found = true; + break; + } + } + if (!found) { + return 'A user does not exist'; + } + + return arr; +}; +console.log(addUserSkill(users, 'Brook', 'Node')); + +const editUser = (arr, name, newUser) => { + let found = false; + for (const user of arr) { + if (user['name'] === name) { + user.name = newUser.name; + user.scores = newUser.scores; + user.skills = newUser.skills; + user.age = newUser.age; + found = true; + break; + } + } + if(!found) { + return 'A user does not exist'; + } + + return arr; +}; +console.log(editUser(users, "Brook", newUser)); +console.log(users); diff --git a/solutions/javascript-test-4.js b/solutions/javascript-test-4.js new file mode 100644 index 0000000..e40fae8 --- /dev/null +++ b/solutions/javascript-test-4.js @@ -0,0 +1,420 @@ +/* =============================== QUESTION 1 ================================================ + Create a function which solve quadratic equation ax2 + bx + c = 0. + A quadratic equation may have one, two or no solution. + The function should return a set of the solution(s). + ============================================================================================ */ +const solveQuadratic = (a = 1, b = 0, c = 0) => { + if (a === 0) { + return 'Not a quadratic equation'; + } + const determinate = b ** 2 - 4 * a * c; + const solnSet = new Set(); + + let root1, root2; + if (determinate === 0) { + root1 = -b / (2 * a); + solnSet.add(root1); + } else if (determinate > 0) { + root1 = ((-b + Math.sqrt(determinate)) / 2) * a; + root2 = ((-b - Math.sqrt(determinate)) / 2) * a; + solnSet.add(root1); + solnSet.add(root2); + } else { + } + return solnSet; +}; +console.log(solveQuadratic()); //Set(1) {0} +console.log(solveQuadratic(1, 2, 3)); // Set(0) {} +console.log(solveQuadratic(1, 4, 4)); //Set(1) {-2} +console.log(solveQuadratic(1, -1, -2)); //{2, -1} +console.log(solveQuadratic(1, 7, 12)); //Set(2) {-3, -4} +console.log(solveQuadratic(1, 0, -4)); //{2, -2} +console.log(solveQuadratic(1, -1, 0)); //{1, 0} +/* =============================== QUESTION 2 ================================================ + Create a function called isPrime which check if a number is prime or not. + ============================================================================================*/ +const isPrime = n => { + let prime = false; + if (n < 2) { + prime = false; + } + if (n === 2) { + prime = true; + } + for (let i = 2; i < n; i++) { + if (n % i === 0) { + prime = false; + break; + } else { + prime = true; + } + } + return prime; +}; + +console.log(isPrime(0)); // false +console.log(isPrime(1)); // false +console.log(isPrime(2)); // true +console.log(isPrime(3)); // true +console.log(isPrime(5)); // true + +/* =============================== QUESTION 3 ================================================ + Write a function rangeOfPrimes. + It takes two parameters, a starting number and an ending number . + The function returns an object with properties primes and count. + The primes value is an array of prime numbers and + count value is the number of prime numbers in the array. + See example + ============================================================================================ */ + +const rangeOfPrimes = (start, end) => { + const primes = []; + for (let i = start; i <= end; i++) { + if (isPrime(i)) { + primes.push(i); + } + } + const count = primes.length; + return { primes, count }; +}; +console.log(rangeOfPrimes(2, 11)); //{primes:[2, 3, 5, 7, 11], count:5} +console.log(rangeOfPrimes(50, 60)); //{primes:[53, 59], count:2} +console.log(rangeOfPrimes(95, 107)); //{primes:[97, 101, 103, 107], count:4} +/* =============================== QUESTION 4 ================================================ + Create a function called isEmpty which check if the parameter is empty. + If the parameter is empty, it returns true else it returns false. + ============================================================================================ */ +const isEmpty = value => { + return ( + value === null || + value === undefined || + (typeof value === 'string' && value.trim().length === 0) || + (value.construtor === Array && value.length === 0) || + (typeof value === 'object' && Object.keys(value).length === 0) + ); +}; +console.log(isEmpty('')); // true +console.log(isEmpty(' ')); // true +console.log(isEmpty('Asabeneh')); // false +console.log(isEmpty([])); // true +console.log(isEmpty(['HTML', 'CSS', 'JS'])); // false; +console.log(isEmpty({})); //true +console.log(isEmpty({ name: 'Asabeneh', age: 200 })); // false + +/* =============================== QUESTION 5 ================================================ + a. Create a function called reverse which take a parameter and it returns the reverse of the parameter. + Don't use the built in reverse method. + b. Create a function called isPalindrome which check if a parameter is a palindrome or not. + Use the function from a to reverse words. +============================================================================================ */ +//5a +const reverse = value => { + let reversed = ''; + if (typeof value === 'number') { + const formatedValue = value.toString(); + const len = formatedValue.length; + for (let i = len - 1; i >= 0; i--) { + reversed += formatedValue[i]; + } + } else if (typeof value === 'string') { + const formatedValue = value + .trim() + .replace(/\W/g, '') + .toLowerCase(); + let len = formatedValue.length; + for (let i = len - 1; i >= 0; i--) { + reversed += formatedValue[i]; + } + } else { + return 'Not a valid parameter'; + } + return reversed; +}; +console.log(reverse('car')); +console.log(reverse('Cat ')); +console.log(reverse('Tuna nut.')); +console.log(reverse('A nut for a jar of tuna.')); +// end of 5a + +//5b +const isPalindrome = value => { + let isPalindrome = false; + if (typeof value === 'number') { + const formatedValue = value.toString(); + if (reverse(formatedValue) === formatedValue) { + isPalindrome = true; + } + } else if (typeof value === 'string') { + const formatedValue = value + .trim() + .replace(/\W/g, '') + .toLowerCase(); + if (reverse(formatedValue) === formatedValue) { + isPalindrome = true; + } + } else { + return 'Not a valid parameter'; + } + return isPalindrome; +}; +console.log(isPalindrome('Anna')); //true +console.log(isPalindrome(121)); //true +console.log(isPalindrome('Noon')); //true +console.log(isPalindrome('Asa ')); //true +console.log(isPalindrome('Asab')); //false +console.log(isPalindrome('cat')); //false +console.log(isPalindrome('Tuna nut.')); // true +console.log(isPalindrome('A nut for a jar of tuna.')); // true +console.log(isPalindrome('A man, a plan, a canal. Panama')); +/* =============================== QUESTION 6 ============================================= + Create a function called countPalindrowWords which counts the number of palindrome words in + the palindoromeWords array or in any array. + =========================================================================================== */ +const words = [ + 'Anna', + 'Asa', + 'Civic', + 'common', + 'Kayak', + 'Level', + 'Madam', + 'Mom', + 'Noon ', + 'Rotor', + 'Sagas ', + 'Solar', + 'Stats', + 'Tenet ', + 'Wow' +]; + +const countPalindrowWords = arr => { + let count = 0; + for (const word of arr) { + if (isPalindrome(word)) { + count++; + } + } + return count; +}; +console.log(countPalindrowWords(words)); // 13 + +/* =============================== QUESTION 7 ============================================= + Count the number of palindrome words in the following sentence. + =========================================================================================== */ +const sentence = `He met his mom at noon and she was watching an epsoide of the begninging of her Solos. Her tenet helped her to level up her stats. After that he went to kayak driving Civic Honda.`; +const countPalindrowWords2 = sent => { + const words = sent.split(' '); + const palindromeWords = []; + let count = 0; + for (const word of words) { + if (isPalindrome(word)) { + count++; + palindromeWords.push(word); + } + } + return { count, words: palindromeWords }; +}; +console.log(countPalindrowWords2(sentence)); +//{count:8, words:["mom", "noon", "Solos.", "tenet", "level", "stats.", "kayak", "Civic"]} + +const users = [ + { + _id: 'ab12ex', + username: 'Alex', + email: 'alex@alex.com', + password: '123123', + createdAt: '17/05/2019 9:00 AM', + isLoggedIn: false + }, + { + _id: 'fg12cy', + username: 'Asab', + email: 'asab@asab.com', + password: '123456', + createdAt: '17/05/2019 9:30 AM', + isLoggedIn: true + }, + { + _id: 'zwf8md', + username: 'Brook', + email: 'brook@brook.com', + password: '123111', + createdAt: '17/05/2019 9:45 AM', + isLoggedIn: true + }, + { + _id: 'eefamr', + username: 'Martha', + email: 'martha@martha.com', + password: '123222', + createdAt: '17/05/2019 9:50 AM', + isLoggedIn: false + }, + { + _id: 'ghderc', + username: 'Thomas', + email: 'thomas@thomas.com', + password: '123333', + createdAt: '17/05/2019 10:00 AM', + isLoggedIn: false + } +]; + +const products = [ + { + _id: 'eedfcf', + name: 'mobile phone', + description: 'Huawei Honor', + price: 200, + ratings: [{ userId: 'fg12cy', rate: 5 }, { userId: 'zwf8md', rate: 4.5 }], + likes: [] + }, + { + _id: 'aegfal', + name: 'Laptop', + description: 'MacPro: System Darwin', + price: 2500, + ratings: [], + likes: ['fg12cy'] + }, + { + _id: 'hedfcg', + name: 'TV', + description: 'Smart TV:Procaster', + price: 400, + ratings: [{ userId: 'fg12cy', rate: 5 }], + likes: ['fg12cy'] + } +]; + +/* =============================== QUESTION 8 ============================================= + Imagine you are getting the above users collection from a MongoDB database. + a. Create a function called signUp which allows user to add to the collection. + If user exists, inform the user that he has already an account. + b. Create a function called signIn which allows user to sign in to the application + =========================================================================================== */ + +const randomId = () => { + const numbersLetters = '0123456789abcdefghijklmnopqrstuvwzyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split( + '' + ); + let randId = ''; + let randIndex; + for (let i = 0; i < 6; i++) { + randIndex = Math.floor(Math.random() * numbersLetters.length); + randId += numbersLetters[randIndex]; + } + return randId; +}; +const newUser = { + _id: randomId(), + username: 'Asabeneh', + email: 'asabeneh@asabeneh.com', + password: '123123123', + createdAt: new Date(), + isLoggedIn: false +}; +const signUp = () => { + const { email } = newUser; + for (const user of users) { + if (user['email'] == email) { + return 'An email has already exist. Please log in!'; + } + } + users.push(newUser); + return 'You have successfully signed up!'; +}; +console.log(users); +console.log(signUp(newUser)); +console.log(signUp(newUser)); +console.log(users); +const currentUser = { + email: 'asabeneh@asabeneh.com', + password: '123123123' +}; +const signIn = user => { + let found = false; + const { email, password } = user; + for (let i = 0; i < users.length; i++) { + if (users[i]['email'] === email && users[i]['password'] === password) { + users[i].isLoggedIn = true; + return 'Successfully logged in'; + } + } + if (!found) { + return 'Use does not exist'; + } +}; +console.log(signIn(currentUser)); +console.log(users); +console.log(signIn({ email: 'asab@asab.com', password: '123456' })); +/* =============================== QUESTION 9 ============================================= + The products array has three elements and each of them has six properties. + a. Create a function called rateProduct which rates the product + b. Create a function called averageRating which calculate the average rating of a product + =========================================================================================== */ +//a +const rateProduct = (productId, userId, ratingPoint) => { + let found = false; + for (let i = 0; i < products.length; i++) { + if (products[i]._id === productId) { + for (let j = 0; j < products[i].ratings.length; j++) { + if (products[i].ratings[j].userId === userId) { + const rate = { userId, rate: ratingPoint }; + products[i].ratings[j].rate = ratingPoint; + found = true; + break; + } + } + if (!found) { + products[i].ratings.push({ userId, rate: ratingPoint }); + } + } + } +}; +console.log(products); +rateProduct('eedfcf', 'fg12cy', 5); +rateProduct('aegfal', 'fg12cy', 2.5); +rateProduct('aegfal', 'fg12cy', 2.0); +console.log(products); +//b +const averageRating = productId => { + let sum = 0; + let len; // number of ratings + for (let i = 0; i < products.length; i++) { + if (products[i]._id === productId) { + len = products[i].ratings.length; + for (let j = 0; j < len; j++) { + if (len === 0) { + return 0; + } else { + sum += products[i].ratings[j].rate; + } + } + } + } + console.log(len); + return sum / len; +}; +console.log(averageRating('eedfcf')); + +/* =============================== QUESTION 10 ============================================= + Create a function called likeProduct. + This function will helps to like to the product if it is not liked and remove like if it was liked. + =========================================================================================== */ +const likeProduct = (productId, userId) => { + for (let i = 0; i < products.length; i++) { + if (products[i]._id === productId) { + const likes = products[i].likes; + const index = products[i].likes.indexOf(userId); + if (index !== -1) { + products[i].likes.splice(index, 1); + } else { + products[i].likes.push(userId); + } + } + } +}; +console.log(likeProduct('aegfal', 'fg12cy')); +console.log(likeProduct('eedfcf', 'fg12cy')); diff --git a/solutions/js-test-2020.html b/solutions/js-test-2020.html new file mode 100644 index 0000000..e89abea --- /dev/null +++ b/solutions/js-test-2020.html @@ -0,0 +1,15 @@ + + + + + + + + Javascript-test-2020 + + + + + + + \ No newline at end of file diff --git a/solutions/solutons-test-5/index.html b/solutions/solutons-test-5/index.html new file mode 100644 index 0000000..c9cff61 --- /dev/null +++ b/solutions/solutons-test-5/index.html @@ -0,0 +1,519 @@ + + + + + + + JavaScript Test + + +

JavaScript Test: 5

+ + + + + diff --git a/solutions/solutons-test-5/melina.js b/solutions/solutons-test-5/melina.js new file mode 100644 index 0000000..cfce945 --- /dev/null +++ b/solutions/solutons-test-5/melina.js @@ -0,0 +1,16 @@ +const melina = `Thank you very much. Thank you. You have all been very kind to Donald and me, to our young son Barron, and to our whole family. It's a very nice welcome and we're excited to be with you at this historic convention. I am so proud of your choice for president of the United States, my husband, Donald J. Trump. +And I can assure you, he is moved by this great honor. The 2016 Republican primaries were fierce and started with many candidates, 17 to be exact, and I know that Donald agrees with me when I mention how talented all of them are. They deserve respect and gratitude from all of us. +However, when it comes to my husband, I will say that I am definitely biased, and for good reason. I have been with Donald for 18 years and I have been aware of his love for this country since we first met. He never had a hidden agenda when it comes to his patriotism, because, like me, he loves this country so much. I was born in Slovenia, a small, beautiful and then-communist country in Central Europe. My sister Ines, who is an incredible woman and a friend, and I were raised by my wonderful parents. My elegant and hard-working mother Amalia introduced me to fashion and beauty. My father Viktor instilled in me a passion for business and travel. Their integrity, compassion and intelligence reflects to this day on me and for my love of family and America. +From a young age, my parents impressed on me the values that you work hard for what you want in life; that your word is your bond and you do what you say and keep your promise; that you treat people with respect. They taught and showed me values and morals in their daily life. That is a lesson that I continue to pass along to our son, and we need to pass those lessons on to the many generations to follow. Because we want our children in this nation to know that the only limit to your achievements is the strength of your dreams and your willingness to work for them. +I am fortunate for my heritage, but also for where it brought me today. I traveled the world while working hard in the incredible arena of fashion. After living and working in Milan and Paris, I arrived in New York City 20 years ago, and I saw both the joys and the hardships of daily life. On July 28, 2006, I was very proud to become a citizen of the United States — the greatest privilege on planet Earth. I cannot, or will not, take the freedoms this country offers for granted. But these freedoms have come with a price so many times. The sacrifices made by our veterans are reminders to us of this. I would like to take this moment to recognize an amazing veteran, the great Sen. Bob Dole. And let us thank all of our veterans in the arena today, and those across our great country. We are all truly blessed to be here. That will never change. +I can tell you with certainty that my husband has been concerned about our country for as long as I have known him. With all of my heart, I know that he will make a great and lasting difference. Donald has a deep and unbounding determination and a never-give-up attitude. I have seen him fight for years to get a project done — or even started — and he does not give up! If you want someone to fight for you and your country, I can assure you, he is the "guy." +He will never, ever, give up. And, most importantly, he will never, ever, let you down. Donald is, and always has been, an amazing leader. Now, he will go to work for you. His achievements speak for themselves, and his performance throughout the primary campaign proved that he knows how to win. He also knows how to remain focused on improving our country — on keeping it safe and secure. He is tough when he has to be but he is also kind and fair and caring. This kindness is not always noted, but it is there for all to see. That is one reason I fell in love with him to begin with. +Donald is intensely loyal. To family, friends, employees, country. He has the utmost respect for his parents, Mary and Fred, to his sisters Maryanne and Elizabeth, to his brother Robert and to the memory of his late brother Fred. His children have been cared for and mentored to the extent that even his adversaries admit they are an amazing testament to who he is as a man and a father. There is a great deal of love in the Trump family. That is our bond, and that is our strength. +Yes, Donald thinks big, which is especially important when considering the presidency of the United States. No room for small thinking. No room for small results. Donald gets things done. +Our country is underperforming and needs new leadership. Leadership is also what the world needs. Donald wants our country to move forward in the most positive of ways. Everyone wants change. Donald is the only one that can deliver it. We should not be satisfied with stagnation. Donald wants prosperity for all Americans. We need new programs to help the poor and opportunities to challenge the young. There has to be a plan for growth — only then will fairness result. +My husband's experience exemplifies growth and successful passage of opportunity to the next generation. His success indicates inclusion rather than division. My husband offers a new direction, welcoming change, prosperity and greater cooperation among peoples and nations. Donald intends to represent all the people, not just some of the people. That includes Christians and Jews and Muslims, it includes Hispanics and African Americans and Asians, and the poor and the middle-class. Throughout his career, Donald has successfully worked with people of many faiths and with many nations. +Like no one else, I have seen the talent, the energy, the tenacity, the resourceful mind, and the simple goodness of heart that God gave to Donald Trump. Now is the time to use those gifts as never before, for purposes far greater than ever before. And he will do this better than anyone else can — and it won't even be close. Everything depends on it, for our cause and for our country. +People are counting on him — all the millions of you who have touched us so much with your kindness and your confidence. You have turned this unlikely campaign into a movement that is still gaining in strength and number. The primary season, and its toughness, is behind us. Let's all come together in a national campaign like no other. +The race will be hard-fought, all the way to November. There will be good times and hard times and unexpected turns — it would not be a Trump contest without excitement and drama. But through it all, my husband will remain focused on only one thing: this beautiful country, that he loves so much. +If I am honored to serve as first lady, I will use that wonderful privilege to try to help people in our country who need it the most. One of the many causes dear to my heart is helping children and women. You judge a society by how it treats its citizens. We must do our best to ensure that every child can live in comfort and security, with the best possible education. As citizens of this great nation, it is kindness, love, and compassion for each other that will bring us together — and keep us together. These are the values Donald and I will bring to the White House. My husband is ready to lead this great nation. He is ready to fight, every day, to give our children the better future they deserve. Ladies and gentlemen, Donald J. Trump is ready to serve and lead this country as the next president of the United States. +Thank you, God bless you, and God bless America.`; \ No newline at end of file diff --git a/solutions/solutons-test-5/michelle.js b/solutions/solutons-test-5/michelle.js new file mode 100644 index 0000000..5152641 --- /dev/null +++ b/solutions/solutons-test-5/michelle.js @@ -0,0 +1,37 @@ +const michelle = `As you might imagine, for Barack, running for president is nothing compared to that first game of basketball with my brother, Craig. +I can't tell you how much it means to have Craig and my mom here tonight. Like Craig, I can feel my dad looking down on us, just as I've felt his presence in every grace-filled moment of my life. +At 6-foot-6, I've often felt like Craig was looking down on me too ... literally. But the truth is, both when we were kids and today, he wasn't looking down on me. He was watching over me. +And he's been there for me every step of the way since that clear February day 19 months ago, when — with little more than our faith in each other and a hunger for change — we joined my husband, Barack Obama, on the improbable journey that's brought us to this moment. +But each of us also comes here tonight by way of our own improbable journey. I come here tonight as a sister, blessed with a brother who is my mentor, my protector and my lifelong friend. +I come here as a wife who loves my husband and believes he will be an extraordinary president.I come here as a mom whose girls are the heart of my heart and the center of my world — they're the first thing I think about when I wake up in the morning, and the last thing I think about when I go to bed at night. Their future — and all our children's future — is my stake in this election. +And I come here as a daughter — raised on the South Side of Chicago by a father who was a blue-collar city worker and a mother who stayed at home with my brother and me. My mother's love has always been a sustaining force for our family, and one of my greatest joys is seeing her integrity, her compassion and her intelligence reflected in my own daughters. +My dad was our rock. Although he was diagnosed with multiple sclerosis in his early 30s, he was our provider, our champion, our hero. As he got sicker, it got harder for him to walk, it took him longer to get dressed in the morning. But if he was in pain, he never let on. He never stopped smiling and laughing — even while struggling to button his shirt, even while using two canes to get himself across the room to give my mom a kiss. He just woke up a little earlier and worked a little harder. +He and my mom poured everything they had into me and Craig. It was the greatest gift a child can receive: never doubting for a single minute that you're loved, and cherished, and have a place in this world. And thanks to their faith and hard work, we both were able to go on to college. So I know firsthand from their lives — and mine — that the American dream endures. +And you know, what struck me when I first met Barack was that even though he had this funny name, even though he'd grown up all the way across the continent in Hawaii, his family was so much like mine. He was raised by grandparents who were working-class folks just like my parents, and by a single mother who struggled to pay the bills just like we did. Like my family, they scrimped and saved so that he could have opportunities they never had themselves. And Barack and I were raised with so many of the same values: that you work hard for what you want in life; that your word is your bond and you do what you say you're going to do; that you treat people with dignity and respect, even if you don't know them, and even if you don't agree with them. +And Barack and I set out to build lives guided by these values, and pass them on to the next generation. Because we want our children — and all children in this nation — to know that the only limit to the height of your achievements is the reach of your dreams and your willingness to work for them. +And as our friendship grew, and I learned more about Barack, he introduced me to the work he'd done when he first moved to Chicago after college. Instead of heading to Wall Street, Barack had gone to work in neighborhoods devastated when steel plants shut down and jobs dried up. And he'd been invited back to speak to people from those neighborhoods about how to rebuild their community. +The people gathered together that day were ordinary folks doing the best they could to build a good life. They were parents living paycheck to paycheck; grandparents trying to get by on a fixed income; men frustrated that they couldn't support their families after their jobs disappeared. Those folks weren't asking for a handout or a shortcut. They were ready to work — they wanted to contribute. They believed — like you and I believe — that America should be a place where you can make it if you try. +Barack stood up that day, and spoke words that have stayed with me ever since. He talked about "The world as it is" and "The world as it should be." And he said that all too often, we accept the distance between the two, and settle for the world as it is — even when it doesn't reflect our values and aspirations. But he reminded us that we know what our world should look like. We know what fairness and justice and opportunity look like. And he urged us to believe in ourselves — to find the strength within ourselves to strive for the world as it should be. And isn't that the great American story? +It's the story of men and women gathered in churches and union halls, in town squares and high school gyms — people who stood up and marched and risked everything they had — refusing to settle, determined to mold our future into the shape of our ideals. +It is because of their will and determination that this week, we celebrate two anniversaries: the 88th anniversary of women winning the right to vote, and the 45th anniversary of that hot summer day when [Dr. Martin Luther King Jr.] lifted our sights and our hearts with his dream for our nation. +I stand here today at the crosscurrents of that history — knowing that my piece of the American dream is a blessing hard won by those who came before me. All of them driven by the same conviction that drove my dad to get up an hour early each day to painstakingly dress himself for work. The same conviction that drives the men and women I've met all across this country: +People who work the day shift, kiss their kids goodnight, and head out for the night shift — without disappointment, without regret — that goodnight kiss a reminder of everything they're working for. +The military families who say grace each night with an empty seat at the table. The servicemen and women who love this country so much, they leave those they love most to defend it. +The young people across America serving our communities — teaching children, cleaning up neighborhoods, caring for the least among us each and every day. +People like Hillary Clinton, who put those 18 million cracks in the glass ceiling, so that our daughters — and sons — can dream a little bigger and aim a little higher. +People like Joe Biden, who's never forgotten where he came from and never stopped fighting for folks who work long hours and face long odds and need someone on their side again. +All of us driven by a simple belief that the world as it is just won't do — that we have an obligation to fight for the world as it should be. +That is the thread that connects our hearts. That is the thread that runs through my journey and Barack's journey and so many other improbable journeys that have brought us here tonight, where the current of history meets this new tide of hope. +That is why I love this country. And in my own life, in my own small way, I've tried to give back to this country that has given me so much. That's why I left a job at a law firm for a career in public service, working to empower young people to volunteer in their communities. Because I believe that each of us — no matter what our age or background or walk of life — each of us has something to contribute to the life of this nation. +It's a belief Barack shares — a belief at the heart of his life's work. It's what he did all those years ago, on the streets of Chicago, setting up job training to get people back to work and after-school programs to keep kids safe — working block by block to help people lift up their families. +It's what he did in the Illinois Senate, moving people from welfare to jobs, passing tax cuts for hard-working families, and making sure women get equal pay for equal work. +It's what he's done in the United States Senate, fighting to ensure the men and women who serve this country are welcomed home not just with medals and parades but with good jobs and benefits and health care — including mental health care. +That's why he's running — to end the war in Iraq responsibly, to build an economy that lifts every family, to make health care available for every American, and to make sure every child in this nation gets a world class education all the way from preschool to college. That's what Barack Obama will do as president of the United States of America. +He'll achieve these goals the same way he always has — by bringing us together and reminding us how much we share and how alike we really are. You see, Barack doesn't care where you're from, or what your background is, or what party — if any — you belong to. That's not how he sees the world. He knows that thread that connects us — our belief in America's promise, our commitment to our children's future — is strong enough to hold us together as one nation even when we disagree. +It was strong enough to bring hope to those neighborhoods in Chicago. It was strong enough to bring hope to the mother he met worried about her child in Iraq; hope to the man who's unemployed, but can't afford gas to find a job; hope to the student working nights to pay for her sister's health care, sleeping just a few hours a day. +And it was strong enough to bring hope to people who came out on a cold Iowa night and became the first voices in this chorus for change that's been echoed by millions of Americans from every corner of this nation. +Millions of Americans who know that Barack understands their dreams; that Barack will fight for people like them; and that Barack will finally bring the change we need. +And in the end, after all that's happened these past 19 months, the Barack Obama I know today is the same man I fell in love with 19 years ago. He's the same man who drove me and our new baby daughter home from the hospital 10 years ago this summer, inching along at a snail's pace, peering anxiously at us in the rearview mirror, feeling the whole weight of her future in his hands, determined to give her everything he'd struggled so hard for himself, determined to give her what he never had: the affirming embrace of a father's love. +And as I tuck that little girl and her little sister into bed at night, I think about how one day, they'll have families of their own. And one day, they — and your sons and daughters — will tell their own children about what we did together in this election. They'll tell them how this time, we listened to our hopes, instead of our fears. How this time, we decided to stop doubting and to start dreaming. How this time, in this great country — where a girl from the South Side of Chicago can go to college and law school, and the son of a single mother from Hawaii can go all the way to the White House – we committed ourselves to building the world as it should be. +So tonight, in honor of my father's memory and my daughters' future — out of gratitude to those whose triumphs we mark this week, and those whose everyday sacrifices have brought us to this moment — let us devote ourselves to finishing their work; let us work together to fulfill their hopes; and let us stand together to elect Barack Obama president of the United States of America. +Thank you, God bless you, and God bless America.` \ No newline at end of file