Tag Archives: JavaScript

Week 3: Challenge Accepted

So far, we have learned about the different parts of a website such as the head, body, and paragraph in HTML. The following week, we learned how to make these parts look pretty using CSS, which is a language that focuses on the styling of a website.

Up until this week, I hadn’t had any major difficulty getting through the Codecademy lessons. The way I was powering through the lessons made me think coding was not as scary as I originally thought. I even found myself really getting into manipulating CSS to make a web page design more colorful.

This week’s JavaScript unit seriously challenged me. It was so different from HTML and CSS. I can’t say that I liked it if I’m being honest. However, I do understand the importance to learn this programming language. JavaScript uses three data types (strings, numbers, and booleans) to organize information. The lesson on using booleans made the most sense to me because it was a different way of writing an “if, then” statement.

The area where I started to get confused was with the arrays. I understood the concept but when I was applying it, I had to re-do my code a couple of times. When I got it wrong, I would look at the solution, go back, and correct my own code. It helped to see the solutions so that I could see where I went wrong. Also, I kept forgetting that sets of numbers start with 0 in JavaScript!

One concept I found interesting was how DOM elements relate to jQuery. Combining JavaScript with HTML using the library was much easier in comparison to combining it using syntax.

Overall, I appreciated this week’s challenge with JavaScript. I’m quickly learning that coding involves a lot of problem solving. With this perspective, it makes it easy to get excited about learning more.

One Cup of Java(Script), Please

This week was all about JavaScript, and no that isn’t a fancy latte you’ll be be able to find at your local Starbucks. Rather, JavaScript is  “is a scripting or programming language that allows you to implement complex things on web pages — every time a web page does more than just sit there and display static information for you to look at.” This looks like the unfollow/follow feature on Twitter, Google giving you search suggestions while you type, and yes, JavaScript is even responsible for those pop-up ads we adore.

JavaScript is the third layer of website, client-side programming. Combined with HTML & CSS, JavaScript makes webpages dynamic and more interactive. HTML, CSS, and JavaScript are all client-side programming because the language is interpreted by the client — which in most cases is our web browsers. Our web browsers read these languages and then present us with the finished product. The opposite of client-side programming languages are server-side programming languages. Server-side programming languages “deal with dynamic content. It runs on the server. Most web pages are not static since they deal with searching databases.” These programming languages structure web applications, query the database, and encode data into HTML. Examples of server-side programming languages are: PHP, C++, Python, and Java. Yep — sans “Script.”

Practicing JavaScript on Codecademy, I learned that they are three essential data types in this language: strings, numbers, and booleans. Strings are any grouping of words or numbers surrounded by single quotes. Numbers are well… numbers, but we don’t put these in quotes. Lastly, a boolean is either going to be the word true or the word false. These also don’t go in quotes. These are the building blocks of JavaScript, similar to nouns and verbs in our own language. To see what we’re trying to say in JavaScript, we simply use console.log and a pair of parentheses. JavaScript also has some pretty neat math functions. It can do the basics (multiple, divide, add, subtract) and it can even find a modulus. Now, what exactly does that mean? That’s a question better served for Google.

What’s Next?

This class was definitely a challenge. I was not sure I would make it to the end, grades are not out yet so we will see, but the prospect of making a site for my dad got me through. He absolutely loves it and wants to add a picture of us to the “About Us” page, which was suggested by someone in the class. Like I said a few posts ago, I’m not sure if I want to continue doing web development.

This has been an educational experience and I enjoyed doing the more cosmetic coding. But there is something unpleasant about JavaScript, jQuery, and PHP. If I continue developing skills in this field, I would need to go back and spend some time reviewing these languages because these are the ones I want to work with.

I will take some time to recover from this semester, my last one at Georgetown, and then start my learning again. I will be supplementing the courses on Codecademy with those on the Odin Project. They seem to offer free projects and the opportunity to actually build things. I’ll let you know how it goes.

A big thing I want to work on is creating a working contact page from scratch. I still have not figured out how to make it link to a “Thank you” page and still email the message to the account’s email. Especially once I change it over to my dad. I want to continue working on this site, create more content and possible make it a little more interactive if possible. I’ll be working on the host site, along with my learning and probably start both in October when I return from traveling.

I hope to be relatively proficient, if possible, by December or January, so that I can write code more quickly and efficiently.

Started From The Bottom, Now We’re Here

It has been a wild summer semester. I walked into this class (a week late) with unknown expectations for the class, the semester, and the material. To be honest, my only interactions with code were back when we had AOL Instant Messenger and MySpace and I wanted to customize something on my profile. Now, after being able to take a step back, I feel like I have learned so much more. I definitely would not have been able to learn what I did if I attempted to learn code on my own–I need the hand holding at the beginning to get comfortable. While I still feel like a total noob when it comes to code and coding, I also feel a sense of accomplishment for being able to at least (somewhat) understand HTML, CSS, JavaScript, and JQuery and PHP, and being able to create my own site using developer code. Like, what?! I’ve realized that coding truly is another language and I have a greater appreciation for the internet, dynamic and interactive sites and most importantly the web developers on my team. I didn’t comprehend the work that goes into their daily tasks.

As I look back on the class I think there are a few things that I would change to help my fellow Georgetown students on their web developer journeys:

  • Offer this class during a Fall or Spring semester. I think the extra weeks and shorter class times will make all the difference.
  • Continue using Codecademy. I think that was my saving grace.
  • Start the WordPress project from the beginning. Find a way to incorporate the final project from the beginning.
  • Work through Codeacademy-like lessons together in class. W3Schools helped, but I think being hands on would be even better.

I really enjoyed this class. I feel a sense of pride knowing that I have made it out alive on the other side with only several bumps, bruises, and maybe a few tears later. I hope my coding journey doesn’t end here and that I’m able to continue learning and developing these skills, but more on that in the next post!

jQuery: A Lesson in Persistence

As I was working through this week’s Codecademy lessons on jQuery, I felt a minor sense of relief because I seemed to be understanding the concepts more easily, especially when compared to last week’s JavaScript disaster. Applying the jQuery concepts, however, has been a different story.

After completing the Codecademy jQuery exercises and working on some further tweaking of my existing homepage HTML and CSS code on Friday evening, I decided to get away from my apartment and head to Georgetown’s main campus on Saturday afternoon, hoping that the jQuery gods would help me complete the slideshow assignment. Five hours later, I felt like I had little to show for my efforts. Numerous Google searches and perusing the pages of more than 10 different sites only left me even more confused. I reached out to Greg for assistance. His response to write out the required steps in the slideshow using code comments was helpful, but I guess I’m just unsure of where to go from here. I found what I thought was a useful source for building a jQuery slideshow, but even modeling my code after this example has not worked. I then proceeded to create an account on Stack Overflow and asked the same question there–how do I get started on creating a jQuery slideshow with captions that show/hide? I received a detailed response, and tried altering my code, but it still did not work. My GitHub repo for this assignment is here. If anyone has figured out the jQuery code, I’d love to chat!

I’m not one to give up on an assignment. It’s currently after 9:00 on Sunday evening, and with a full-time 8-5 job and then a 6-9:35 pm class to attend on Monday, I’m unable to dedicate any additional time to this before the 10:00 deadline on Monday night. You win [for now], jQuery. I will try to work on the slideshow again on Tuesday evening to get it working before Wednesday’s class. I’m hoping this week’s class will shed some light on the steps we should follow to make a slideshow. I think what would be most helpful for me would be to see a template of sorts that shows the correct code to use in order to get all images (except for the current one) to hide, to click through to the next image using a button, and to add the caption text that also shows and hides.

I’m excited to work on the developer profile midterm assignment. After working so hard to figure out the jQuery assignment and still reaching a dead end, I’m grateful for the opportunity to work on a written piece that is more straightforward. The developer I’m profiling is named Dave. He’s asked me to withhold his last name for privacy reasons due to the work he does as a government contractor. Dave is a developer and programmer who does front-end design for applications that provide analytics as well as freelance marketing and landing page-type work. I got in touch with Dave through my colleague who works on social media and analytics for my department at Georgetown. As I was discussing this assignment with her, she offered to put me in touch with Dave, who is a friend of her tech app startup-owner boyfriend. I’ve already spoken with Dave and have received answers to the questions I posed, so I’m looking forward to working his answers into the midterm assignment. I reviewed the developer profile examples from the 2013 class, and am wondering what exactly is expected for this assignment. Some people provided a brief overview of the person they profiled, and then simply listed out the questions and answers. A few others worked the questions and answers into an actual story (I’m assuming these were the journalism students). Do you have a preference, Greg, for how we approach this assignment?

Another trying week

This week was a culmination of putting a lot of the languages we’ve touched on together. And it went poorly. The slideshow project was an interesting take on putting all the pieces together but it still felt overwhelming.

I’ve found that learning all of these concepts has been hard because we haven’t really gone through them together. In a different class I took last semester, Data Journalism, we went through a lot of technical platforms like SQL and Python, but we went step by step together. Only then did higher level concepts start to make sense.

It would be really helpful if we had class time where we went through things like how to make a slideshow step by step, so we could see how something came to fruition, before we are expected to create one on our own. Like Greg said in class, teachers do teach you how to write a sentence, but they don’t release you into the wild to then write an essay. To take that metaphor we had in class to its logical conclusion, you’re leaving out important building blocks like essay structure, paragraphs, and thesis statements. I feel like we only cover abstract concepts in class, only to have questions moved past because we don’t really go over assignments or take a look at the building blocks we need.

While some could say that Codecademy is what bridges that gap, I’ve continued to have problems with that as well. Currently the interface seems to delete sections I’ve done or doesn’t add a check mark to things to say items have been completed. That’s been really hard, especially when I’m trying to figure out why some lines of code are right or wrong.

I understand why a lot of the class is geared towards making sure we can figure out how things are broken on our own, but I feel like I’m operating at a huge handicap every week because I don’t quite understand what the best practices are to begin with. It would be really helpful to work on foundational things in class so that way outside study can be used to hone things, not figure out what square one is.

As for my Midterm, I will be interviewing Matt Callahan. He works at The Washington Post as a designer, but mostly does what we call “enterprise” templates. These templates are for our bigger stories and are always custom designed using jQuery and JavaScript.

 

jQuery, more like jDisaster

This has been a very frustrating week to say the least! While I was able to complete the jQuery Codecademy lessons before the last class, I have been unable to follow along with how to create the slide show. I felt unprepared. My current code doesn’t work, at all. I’ve spent three days trying to figure out how to do this, so I’m hoping someone can look at my jQuery/JavaScript code and help me out! I think the hardest part was finding out where to start because it wasn’t as straight forward as some of the other assignments and wasn’t part of the Codecademy lessons. That being said, I went into this assignment thinking I had a good understanding of jQuery (not JavaScript), but now I feel as confused and behind as I did when we learned JavaScript. I’m not sure what the missing pieces are that I don’t understand, but there are definitely a few. Something I kept asking myself in researching guides on creating a slideshow was if I should put the images in a list or not? Everyone seems to do it differently. The captions were there when I initially ran the code, but are now hidden. AHH!!! It was not a successful coding weekend this weekend. I’ll have to give it a try next week and hope that things start to make better sense and get easier! (And I hope next week doesn’t involve 9+ hours of work!)

Midterm: For my midterm, I will be interviewing Lauren Soni who is the Webmaster and web developer for HHMI’s research campus, Janelia Research Campus in Ashburn, Virginia. I don’t work directly with Lauren and our paths only cross during team meetings since HHMI has a webmaster and web developer for our own site. Lauren has been a web developer for about 3 years and is also in the process of completing her Master’s degree at Northwestern University Online. Through our interview, I want to learn a few things—1) learn how Lauren transitioned her career from Biomedical research to web development, 2) her advice for learning different types of code, where to practice and how to begin, 3) talk about her involvement in creating a responsive site for Janelia and other major projects.

JavaScript — Difficult, But Not Impossible!

The JavaScript assignment this week was complex, yet simultaneously the most logical for me to follow. One of the Codecademy lessons pointed out that a lot of the JavaScript functions are very straight forward statements – “if” something then do [blank], otherwise, do [blank2]. The logical of that set-up, for me, is much easier to internalize than some of the CSS or HTML code (such as the difference between a class and id, still unclear why those need to be separate). Similarly, I found a lot of the functions to be relatively understandable. With if/else statements, for example, depending on the variable, the function will run though “if” “else” or “else if” statements until it finds the correct variable and then execute the appropriate statement.

Where the confusion, for me, came in was actually executing the code. Reading the Codecademy explanation, and reviewing the code provided by Codecademy, while time consuming, made sense after I read each line a few times. I struggled, however, when trying to recreate the code for a new set of variables, specifically when we got into functions.

Last week, my inability to execute the code would have been very concerning for me. However, this week I realized that my understanding of HTML and CSS has already greatly improved. I was able to build a new homepage with different fonts, colors, pictures, sizing, and overlapping images in a relatively short amount of time, which took me numerous hours last week. Thus, I am hopeful that with time and practice I will gain a similar familiarity with JavaScript.

I am excited to learn more about JQuery as I think that will simplify a lot of my confusion be de-cluttering the code. Sometimes I think I get lost in the numerous statements, variable, numbers, etc. I have a feeling I am overcomplicating the code, but I think the introduction of abbreviations will help me understand where I can cut back on wording.

Also, as a final side-note, I am interested to discuss in class how everyone’s slideshow is coming thus far. I feel relatively confident that I have built the CSS and HTML blocks correctly for the slideshow, but am struggling with (as mentioned above) actually executing the JavaScript code and wonder how others progress is coming along.

JavaScript: Even More Difficult than I Thought it Would Be

Echoing the thoughts of some of my peers, I found this week’s Codecademy lessons to be the most difficult to really understand. In particular, the lessons on functions, arrays, and looping really confused me, and I needed to go over practically each hint to figure out the correct code.

I think what I am struggling with most in learning JavaScript is understanding the purpose behind some of the pieces of code we are learning. I am still not exactly sure what a function does, which is the main thing I am struggling to understand, but I also don’t quite understand the purpose of elements like .pop() and .push() – why not change the initial array to include or exclude the items you specify in .push() or .pop()? I think seeing more real-world examples, like we did last week, will help me now that I’ve gone over the basic foundation laid out by Codecademy.

Another thing I struggled with was understanding how to correctly write pieces of code inside of code. Codecademy would ask me to write a for loop inside of a for loop, and I would have no idea how to set that up or where in the code to begin. It also made it hard to differentiate where one element of the code ended and another began.

As we go along, I am interested to learn more about how JavaScript, HTML, and CSS can work together. In Codecademy, it was really cool to see how you could use all three to make elements clickable or make them disappear. I know we went over a real-world example in class, but I’m excited (and slightly scared) to delve into making the gallery for next week’s assignment. I think it will be the best way to help me understand what I’ve learned. I am also looking forward to learning more about JQuery, since anything that can make JavaScript easier to understand and execute will be a big help. 

JavaScript – Help!

The past two weeks, I’ve spent most of my time attempting to learn the building blocks of JavaScript and JQuery. This is by far the most difficult part of Codecademy thus far and has taken me the most time to comprehend and complete. I was able to conquer the first two lessons of Codecademy with a little difficulty; the thought process behind variables made sense. Once we began adding in Functions, strings, and loops, I started to lose the literal connection between JavaScript and a functioning website. I learn by doing and through visualizations.  In order for me to comprehend something, I have to be able to see what the end result is of something…and is the reason why science has never been my strong suit. I am hoping that in the next class, we can take a step back and look at the building blocks of JavaScript from the beginning. While I valued the time you spent teaching Java Script from the w3school code, I think I need to start from the beginning, looking at the big picture and then at each individual piece, because it all builds on each other.

In an effort to not fall behind too quickly, I found a few resources that I thought were helpful in learning more about JavaScript. You can find them linked below. I hope they are of use to the class as well! Please let me know if anyone finds any other helpful resources.

Additional JavaScript Resources:

  • HTML Dog
    • On HTML Dog, they have different lessons and pages that go through similar content that we learned on Codecademy. I appreciated how easy it was to follow along and didn’t feel as lost as I did when going through the Codecademy lessons.
  • YouTube Tutorial
    • I found it helpful to see someone else in action writing the JavaScript code and connecting it back to how it works on a website. That being said, it isn’t the most thorough video.

The second half of the week, I started working on the midterm interview by searching on LinkedIn for potential connections with web developers. Would interviewing a web developer from HHMI’s sister research campus be too close of a connection? I am nervous about this assignment. I haven’t interviewed anyone for a story since college and know that my journalism skills have fallen flat since then. I’m looking forward to the challenge and what I’ll learn from someone who has made a career out of web development.