Landing : Athabascau University

Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : MiscPodcasts for each unit

Updated resource pages:  Unit 1 - Unit 2  - Unit 3Units 4 & 5 - Unit 6 - Unit 7

Unit 5 - Writing Javascript

  • Public
By Jasmin Gallant in the group COMP 266 September 1, 2019 - 5:24am

I thought it would be easy doing this unit due to the fact I had a good understanding in programming, but it seems when things relate together through html, CSS and JavaScript. It can become more complicated to find solution and debugging the problems.

I tackled this unit by trying to implement a code for gathering the data from the form in my contact page.  I made variables using let for the name, email and message ( textarea ). Then I created a function called theForm() with if statements to check for equality: if the name variable is empty display a message. Same thing for each field…

Then I put the name, email and message in an array and return the array.

The idea was to bring the data from array to wherever I can bring it when I would get an api or send it to a server.

I went through w3schools tutorials and tried the form validation method in the js form part.

There are multiple errors in my code that I wish I could debug. At first I tried to use the addEventListener to call using my form element id in the DOM but it would return an error on the browser tool and I was not able to find it. Then I found out about the form validation and that is what I was aiming for. Once the validation done through verifying that every fields are not empty. I could then take the value of the name, email and message and return them into an array.

 For my variables I have an error. The variables are null but once I input them in the form and click the submit I get an error that variables cannot be found before initialization.

 I have yet to find this error in my browser or code.

I did not meet my persona requirements here but I did learn a lot in javascript. I just could not go through my form data submission problem. This is a lesson on humility. I was confident that because I knew Java, this would be a piece of cake.

The tutorials in w3schools are good but for some reason my code doesn’t seem to relate well with the html page. Although it is straightforward. I will be figuring this out pretty soon as I do not let things go.

I started my code with variable declaration using getElemenById() in order to set the variables to the value in my id’s elements. Then added a variable for displaying error messages and implemented a div with errors id in html for later use in my validation of the email form.

I added a button variable set to the button id in my form page when trying to create a message in my debugger in the browser developer tool.

I made a function called theForm() that checks for equality with each fields in the form and the I made the variables into an array. The array is return as value. Later with an api and jquery the email form can be sent using a server. I was using the alert() function to test the variables initialization because there was an error in my variable initialization when submitting the form.

At a certain point I went on and created a class with a constructor and getters for the name. email and message but realized this syntactic sugar was maybe overkill for what I was trying to do.


These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.