Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2018
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with JavaScript project

    Hi I am new here, am learning coding and I'm working on an assignment to make a website with my 10 favorite books. So far I have made it to this point, but I'm confused as to how make the following instructions:
    1.-Make an object containing information for each book. Each item (object) in this object should have the book ID you thought up in point 1 as a key, and it should have at least the following fields: title, language and author.

    2.-Now change the function you used to display the book ID's in a list to take the actual information about the book from the object and display that. Make sure you choose the right html elements for each piece of info, for instance, a heading for the title.

    3.-Download book covers for each book, construct a new Object which has as keys the bookId's again, and as value the path to the image source (e.g. {"harry_potter_blabla": "./img/harry_potter_blabla.jpg", ...}). Now loop over these entries (hint: Object.keys(objectName) gives you an array containing the keys). Then write a function which places an image at the corresponding li element. Remember that Objects are not ordered, so you cannot guarantee that the first key is the first li element. (Hint: you could give each li item an id tag by modifying the function you made before)

    This is what I started but I cannot finish:
    Code:
    let myFaveBooks = ["stranger-in-strange-land","the-foundation-series","", "the-moon-is-a-harsh-mistress",  "2001-a-space-odissey",  "the-godfather",  "pedro-paramo", "isle-of-passion", "the-great-gatsby", "the-house-of-the-spirits", "the-picture-of-dorian-grey"]
    console.log(myFaveBooks) //For porpusses of remembering I put this comments, this I used for the array, always remember when you console.log somethings its printed on the webpage;
    var ul = document.getElementById("recentlist")
    function generateUl() {
        myFaveBooks.forEach(element => {
            console.log(element) //element is myFaveBooks
            var li = document.createElement('li') //the element is the 10 books; myFaveBooks
            li.textContent = element //added content to list
            ul.appendChild(li) //appened  <li> to <ul>
    
        });
    }
    generateUl()

    Thank you for your help
    Last edited by VIPStephan; Mar 2nd, 2018 at 08:54 PM. Reason: added code BB tags

  2. #2
    New to the CF scene
    Join Date
    Feb 2018
    Location
    Sri Lanka
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Scope in JavaScript

    In JavaScript, like in any programming language, "scope" refers to where a variable is accessible, based on where and how the variable was declared.

    All variables have some scope: some portion of your script in which they can be referenced - printed to the screen, say, or used as part of a calculation. Global variables have, unsurprisingly, global scope - they can be accessed (set or read) anywhere in your script. Variables defined with the var keyword have function scope that is more limited; these are variables that might be accessed only within a function (often the function in which they are defined) or some other section of your script. Variables can also have block scope, as we'll see later in this lesson - specific to a block such as a for loop.

    Variables declared outside of any function are global, meaning they are accessible to any code inside or outside of functions. Consider the following example:
    Code Sample:
    Scope/Demos/scope1.html

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>JavaScript Scope - Example 1</title>
    	<script>
    		var v1 = 13;
    
    		function fun1() {
    			document.write("inside function fun1, v1 has value: " + v1);
    		}
    	</script>
    </head>
    <body>
    	<h1>Scope Example 1</h1>
    	<p><em>This page has no errors</em></p>
    	<script>
    		document.write("outside of functions, v1 has value: " + v1);
    		document.write("<hr>");
    		fun1();
    	</script>
    </body>
    </html>
    Code Explanation

    Variable v1, created on line 7, has global scope, and is thus accessible anywhere in our scripts. Variable v1 can be written to the screen on line 18 (via document.write) and can be accessed by function fun1 on line 10.

    A variable created with the var keyword inside of a function has function scope, meaning that it is not accessible outside of that function. Let's look at a couple of examples - each generating an error - that demonstrate this fact:
    Code Sample:
    Scope/Demos/scope2.html

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>JavaScript Scope - Example 2</title>
    	<script>
    		var v1 = 21;
    
    		function fun2() {
    			var v2 = "variable 2";
    		}
    
    		function writeIt() {
    			document.write('v1: ' + v1);
    			document.write('<hr>');
    			document.write('v2: ' + v2);
    		}
    	</script>
    </head>
    <body>
    	<h1>Scope Example 2</h1>
    	<p><em>This page generates an error</em></p>
    	<script>
    		writeIt();
    	</script>
    </body>
    </html>
    Code Explanation

    Variable v1, created on line 7 in the same manner as in our first example, has global scope, and is thus accessible inside of function writeIt. Variable v2, however, is created inside of function fun2; as such, it is local to function fun2 and cannot be accessed by function writeIt on line 16. Opening the JavaScript console when browsing to this file shows the error "Uncaught ReferenceError: v2 is not defined".

    To further illustrate the point, here's another example:
    Code Sample:
    Scope/Demos/scope3.html

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>JavaScript Scope - Example 3</title>
    	<script>
    		var v1 = 36;
    
    		function fun3() {
    			var v2 = "variable 2";
    		}
    	</script>
    </head>
    <body>
    	<h1>Scope Example 3</h1>
    	<p><em>This page generates an error</em></p>
    	<script>
    		document.write('v1: ' + v1);
    		document.write('<hr>');
    		fun3();
    		document.write('v2: ' + v2);
    	</script>
    </body>
    </html>
    Code Explanation

    Variable v1 again has global scope; we can successfully access it (to write to the screen) on line 18. But variable v2 is created inside of function fun3 - it's scope is local to function fun3. Thus we get an error (Uncaught ReferenceError: v2 is not defined") from line 21 when we try to write variable v2 to the screen, even though we call function fun3 before attempting to write the variable to the screen.

    Note that, in all of the examples above, we created variables inside of functions using the var keyword.
    Last edited by vinyl-junkie; Mar 6th, 2018 at 07:57 PM. Reason: added code tags

  3. #3
    New Coder
    Join Date
    Mar 2013
    Location
    Indiana
    Posts
    30
    Thanks
    1
    Thanked 7 Times in 7 Posts
    If the goal is to make an object, you didn't do so :P.

    This is an object, where 'books' is the object:

    Code:
    var books = {
     title: ["stranger-in-strange-land", "etc"],
     author: ["who knows", "&c"]
    }
    Khan Academy has a pretty good object tutorial: https://www.khanacademy.org/computin...amming#objects

    Otherwise, you may be best served consulting your instructor.

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,222
    Thanks
    4
    Thanked 470 Times in 458 Posts
    Normally we "don't do homework" here -- site rules violation... but... well...

    Quote Originally Posted by Chrystyan View Post
    This is an object, where 'books' is the object
    I would be suggesting an array OF objects, where EACH book is the object.

    Code:
    var bookList = [
    	{ 
    		title : 'Stranger in a Strange Land',
    		author : 'Robert A. Heinlen'
    	}, {
    		title : '2001: A Space Odyssey',
    		author : 'Arthur C. Clarke'
    	}, {
    		title : 'The Great Gatsby',
    		author : 'F. Scott Fitzgerald'
    	}
    ];

    This way you can for loop each of them -- I'd suggest assignment on for.

    Code:
    for (var i = 0, book; book = bookList[i]; i++) {
    A VERY powerful way to iterate through an array of objects since objects are inherently loose true -- it is in fact the FASTEST executing loop for such a task.

    Then inside the loop book.tittle is the title, book.author is the author... easy-peasy. Add/remove fields to each book as needed, process inside the loop as needed.

    Now all that said, @Aztecgoddess your code has some issues that make me wonder if your learning source is faulty, or simply jumping the gun. Array.foreach isn't ready for prime-time yet unless you have a 'polyfill' handy to make it work in older browsers. I'm a bit surprised you would be learning that. Likewise Element.textContent is ALSO a bit unreliable since it doesn't exist in IE. (it has innerText) -- and really if you're going to plug text content into a DOM element you just created, do it with appendChild and createTextNode.

    Code:
    function generateUl() {
    	for (var i = 0, book; book = bookList[i]; i++) {
    		console.log(book);
    		var li = ul.appendChild(document.createElement('li'));
    		li.appendChild(document.createTextNode(book.title));
    	}
    }

    Would be a rough translation of what you have so far.

    ALL THAT SAID, it's nice to see someone ACTUALLY trying to use the DOM with createElement instead of the utter mentally enfeebled halfwitted innerHTML garbage! Puts you head and shoulders over many alleged "experts" in the industry already! -- so you're doing something right.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •