Career Day

      Today was Career Day in my school. It is an event where companies and colleges come to our school to share information with students. There were Monroe Colleg, SUNY PolyTech, CUNY Hunter, the Army,non-profit organizations, other technical schools, and Steve Madden, the shoe company that gave away a lot of stuff to students. There were also alumni from our school who came back to visit us. I was surprised that most of them took a job unrelated to technology after college, coming from the technology high school. There was one who became a firefighter, a marine, a marketing director, and those who went into other fields. This opportunity to come to the fair was only given to the CTE students, which includes Web Design and Video Production students. All of us were supposed to dressed up in business attire for this event, although some didn't, most of the people went all out with a full on suit in this extremely cold day. The only things that were bothering me was the baggy suits that some were wearing, and those who button both buttons on their two-button suit jacket. It should be widely known that the bottom button on a suit jacket or blazer is never supposed to be fastened. I even try to be nice, giving advice to those I know to not fasten the bottom button, while some listened, a few of them not only thought I was crazy but  talked back to me in a very impolite way. To be honest, I was very disappointed on the amount of the students who made those mistakes... If you are wearing a suit, at least wear it properly!

      We went around and talked to most of these companies and schools. One of the most interesting part was that there were GearVR for students to try on. I know it's not the Oculus Rift, or the HTC Vive, or the PlayStationVr. But virtual reality is such a huge thing right now, yet most of the students barely know anything about this recent invention that will change our lives and even the direction of our future. It is something I am very interested in and am even thinking of working in something similar in the future. So it's nice they have something like that for students to better understand what's happening in the technology world. I mean, you have to know this when you are in a Information Technology school...

Lab 8: Loops

https://thimbleprojects.org/jh19tommy2/155092/Lab8.html

      This is lab 8, where we demonstrate our understanding of the four types of loops. That includes the For loop, the For/In loop, the While loop, and the Do/While Loop. Loops are extreme useful when you want to execute the same block of code multiple times in different, but similar conditions. It can help you write less amount of codes, which is less work for the programmer, and it's easier for the computer to read, which is less work for the computer, therefore it takes less time to process. The For loop is the most common used loop of all, where you have three statements to execute the code under a certain condition. The For/In loop is similar to the For loop, but used for properties instead. The While loop continues the loop as long as the condition is true. In the Do/While loop,The code in "do" will execute when the condition in "while" is true. But it will at least execute once even if the condition is false.

      Inside my lab, I have a table with 4 cells, each created to contain each of the loops needed to be demonstrated. In the For loop demonstration, I used a For loop to list my array called "food", and made it execute, starting at 0, until all the index in the "food" array is listed. In the For/In loop, I listed all the properties inside my array called "subject", which loops through all the properties with only using one statement. In the While loop section, I first wrote all the variables, then I set up the While loop to run as long as a variable is less than the length of my array, which listed what I like to do in my free time. In the last but not least, the Do/While loop, I put all variable before the loop, then used Do, to execute a block of code, then used While to made the loop stop the Do after a certain condition.

Lab 7: Mad Lib

      In this lab, we have to create a Mad Lib within a webpage where the user can enter multiple words into a paragraph to create their own story.Before this lab, I did even know what Mad Lib is. We have to use arrays to store all the variables of each words. And since there are so many words to enter, we need to use loops to make everything easier for ourselves. After learning about arrays and loops from Ms. Ramirez, we were given to use the codes in our own way to make it work. At first, I figure out how to create a loop to prompt the user for each word and put it in the array, but I was struggling to figure out how to use the loop to write each of the variables entered to the array into the HTML document. 

      First I created an id for every empty word that is being filled in. Create a CSS that separates that color of the nouns, the verbs, and the adjectives. Everything was easy until the time when I was trying to loop that array. I knew that I have to use  document.getElementById("id").innerHTML = arrN[i], but I really didn't know what is suppose to put in id. I tried ("ni"), (arrN[i]), (ni), and ("arrN[i]"). None of them worked. If I don't use the loop, I would have to write the same line of code so many, many times... 

Similar to this but with so much more arrays:

var arrN= [n1, n2];
for (i = 0; i < arrN.length; i++){
arrN[i] = prompt("Enter a noun.");
    
    }
  
    if (n1 != null) {
        document.getElementById("n1").innerHTML = arrN[0];
    }
if (n2 != null) {
        document.getElementById("n2").innerHTML = arrN[1];
    }

So I tried reading more online, researching to help myself figure this out at home. Then I finally found what I was look for, and it gave me the idea of what I am suppose to do. I love the moment when you figured the issue of the code that had been bothering you for days! Such an amazing filling! It's one of the best things about coding. I tried it in the Tryit Editor from W3schools, and it worked! I was so happy!

http://www.w3schools.com/code/tryit.asp?filename=FAJEHN5HCBEL

Instead of all of those I've tried, I was suppose to put ("n" + i) in the id.

like this:

var arrN = [];
var i;
for (i = 1; i <= 2 ; i++) {
    arrN[i] = prompt("enter");
    if(arrN[i] != null){
    document.getElementById("n" + i).innerHTML = arrN[i];
    }

}

So I applied this to the adjectives and verbs as well and it worked perfectly with some minor adjustments.
I'm just so pround that I had finally figured this out, fully understand it, and be able to apply and use it the way I want it to work.

https://thimbleprojects.org/jh19tommy2/149052/

Service Work BootCamp at The Door 10/22 and 10/29/2016

10/22/2016

      Since I don't have all my community service hours completed, I participated at this Service Work Boot Camp at The Door in Manhattan with my friend, Tanzil. It was such an amazing experience, the people there are extremely nice, and it was not what I imagined it to be. I questioned myself, "why have I not done this earlier?" It was so fun and so much better than what I expected. We first introduced ourselves with a game of toilet papers, where we all had to take a random amount of toilet papers, and for every square of toilet paper you take, you have to share a fact about yourself. 

      Then we started the Capstone Project where we all pointed out the issues of our community and were put into random groups to discuss and create a plan to help solve one of the issues. My group decided to focus on the issue of the homeless people and thought of ways to help them. And by the end of this capstone project, we've agreed on a project where we will be creating blessing bags to donate to charities to the homeless the following week. 

      We then had a little time to play games of 2 truth and one lie and went upstairs for the panel where we had two successful guests from Citi Bank to talk with us about the life, career, and education. When I asked them about Community Service, one of them said that, "After a certain level of education, everyone is smart, so the question is, 'what else are you bringing to the table', it can be community service or other things." This really inspired me because I really agree with his idea, and it helped me realize the benefits of doing community services besides fulfilling my school requirements and help out other. They also said that finding mentors are extremely important. And it can simply be just knowing people who knows someone in the field of your interest, and asking to have a short 15 minute talk with them, asking them questions that you are generally interested about. Some might ignore you, but those who agrees with you can be extremely beneficial. They also said that networking is extremely important, because you be opened to positions before it is told to the public or sometimes even before it's opened. The guy's brother also said that education is very important because it is what makes you go forward in life instead of staying in the same place forever. This panel was so interesting, it's just so nice to listen to people talking about their experiences. And I thank them for the what they have taught me.

      After the panel and lunch, we began to create these cute little Halloween mask for children who might not be able to buy their costumes. By the end of the day, I made around two owl masks. It was so an amazing day. I learned so much and had so much fun.

10/29/2016

      This is the second and last day of this Service Work Boot Camp. I really enjoy being there, everyone is so nice, and I felt quiet comfortable speaking there. There were not much plan for this day, we simply got all the supplies such as tooth brush, tooth paste, soap, and a hand written note to lighten their harsh lives, and assembled them into blessing bags so we can donate them to a certain charity that will give them to those who are homeless. We spent most of the time decorating the notes, because we wanted it to be pretty and really help make their day. We also spent time, communicate with students from all over NYC, most are in the top high schools, and it's really fun to talk to them. After we complete this Capstone Project that we planned. Kate, Marshal, and Ashley, the instructors of this Boot Camp taught us how to create our volunteer resumes and buzz works people look for while looking at your resume. Overall, I had a great time working with each other and completing this Capstone project.

Lab 6: Rollover

      In this lab, we have to create three types of rollover images: Javascript rollover, HTML rollover, and a rollover created with an Adobe software. This lab needs a separate JavaScript, HTML, and CSS document. All files need complete documentation comments. The HTML should not contain any JavaScript or Style, and the CSS should work properly and enhance the look of the site. The JavaScript shouldn't have any errors. Placing the mouse cursor over a JavaScript image should display the image in full size on top of the table.

      I created Adobe software rollover with Flash CS6 at first because I used it last year and I'm familiar and comfortable using it. It is also the one that takes the least amount of time for me to create. But a problem was going on to the server that I am uploading to so I had to use Thimber to display my lab. But Thimber has a limit for the size of the files that is uploaded to it, and since I create this rollover with Flash, it's swf file that is quit large, so I recreated it in PhotoShop CS6. Then I create the HTML version with the code:

<img src="image1"
         onmouseover="this.src='image2';"

         onmouseout="this.src='image1';"/>,

so when the image would change when you hover over it. Last, to do the JavaScript version of the rollover, I simply copied the code from the teacher without totally understanding the code. I know it's not good, but I'm very busy lately...

https://thimbleprojects.org/jh19tommy2/134557/

Lab 5: Rock, Paper, Scissor, and Computer Game

      In this lab, we have to create a game similar to the rock, paper, and scissor game kids play. And this game has to be within the webpage. We have to first complete the tutorial of building this "Rock, Paper, Scissors' game from CodeAcademy. CodeAcademy is a really helpful website that can teach you many types of computer languages. It taught me how to create this game with JavaScript from scratch. After we finish the tutorial and got the code, we need to modify the game to prove that we understand how to actually use the code. And we do that by creating a new chose for the user.

      After I completed the tutorial in CodeAcademy, I imported the codes into Dreamweaver CS6. I created another choice for the user called "computer". So instead of rock, paper, and scissor, it's rock, paper, scissor, and computer. I know, it's silly, but that was all I can think of... The computer can beat paper and scissors, and is beaten by rocks because of common sense... But I had a issue making the function to load after the page loads, then I realized I needed a function over everything and call that function with a onclick on a button. This not only lets the user decide when to start the game after the page load, they can also click the button to replay the game.

Lab 4: Sample Lab

      In this lab, we have to answer 22 questions in a worksheet with the class and demonstrate it in our website. It is a practice of all different types of JavaScript including JavaScript basics,  JavaScript I/O, event and handling,  and regular expressions that we did together as a class. After we completed these 22 questions, we used Dreamweaver CS6 to demonstrate what we learned from the practice we did together.


      To create a demonstration of this practice work sheet, I first created a table with a border with the color of my theme. Then I created 3 divisions, one for the question number, one for the question, and one for the answer. And if that answer can be demonstrated, I would also include a button at the answer box that if the user clicks on it, it will demonstrate the use of the code that the question is asking for.

Lab 3: JavaScript Dispply Possibilities

      This is one of the complex laboratories that we have to create. In this lab, we have to show all the different display possibilities with JavaScript in the browser. This includes using alert() or window.alert() that pops up a window of notification on the browser, an HTML output using document.write() that can write in the HTML side, write into a HTML element using innerHTML, and last, use console.log() to log information into the console of the browser. We also need a different type of pop up that asks that user ok or cancel, a prompt that lets the user input into the browser. And demonstrate that we know how to use variables.

     So first I use alert() to greet the user, said I wanted to introduced myself, and told the user of a number I created using variables and JavaScript algorithms. Then I would use document.write() to write down the introduction about myself on the webpage. Then I have a few buttons below that to showcase the other code required in this lab. The first buttons ask the user whether he/she want to provide their name, then there will be another button that prompts the user to enter their name. After the user answered their name, there will be a greeting to the user and ask the user to see more by clicking another button, but there aren't actually any more to it, it's just to show the different type of possibilities.

Switch and Loops

     In JavaScript, there are if/else statements and there are switch statements. Switch statements are similar to if/else statements. Both execute actions in which when another event or condition occur to cue it to execute. But unlike if/else statements, switch statements have a default value in which codes executes when nothing happens. Then they have case values that can be as much as you want, which are executed when a case is true. The syntax of a switch statement is:

switch(expression) {
    case n:
        code block        break;
    case n:
        code block        break;
    default:
        default code block
}.

This switch statement is evaluated once. The values of the expressions are compared with the values of each case then the case with the block of code that matches the values executes. Within the end of each case, there will be a "break" keyword to break out of the switch block so it would stop looking at more cases. Then there will be a case all the way on the bottom of all cases with a "default" keyword that will be executed when no cases match. Sometimes, the cases can have the same code block, and the default case does not always have to be at the bottom.

Exercise 1:



in this exercise, it is missing a case for "Apple", so I added a case for it and added the text: " An apple a day keeps you healthy!"

Exercise 2:



in this exercise, it is missing a default case that executes when a unknown fruit is typed into text box, so I added the default case with the text "I have never heard of the fruit".

Exercise 3:



in this exercise, there are syntax errors in the switch statement. It is missing the ":" after the cases and the "break" at the end of each case. After I added the missing parts, it works.

Exercise 4:



In this exercise, I am requested to add 3 cases and a default case shown in the image above.


      Loops are for running the same codes over and over again with different values each time. There are different Kinds of Loops that JavaScript supports. There are for, for/in, while, and do/while loops. for loops through a block of code a number of times. for/in loops through the properties of an object. while loops through a block of code while a specified condition is true. do/while also loops through a block of code while a specified condition is true. The for loop is the most common and have a syntax of:

for (statement 1; statement 2; statement 3) {
    code block to be executed
}

where statement 1 is executed before the code block began, it is to initialize the variable used in the loop, but it doesn't have to be, it's optional, and it can be more than one values. Statement 2 defines the condition for running the loop, it is also optional, and the loop will run until this statement returns false. And Statement 3 is executed each time after the loop has been executed, it is most of the time increasing the value of the initial value, but it is also optional and it can be adding or subtracting to do any math basically.


Exercise 1:


Here, I replaced the values in statement 1 and 3 to make it execute number from 0 to 10.

Exericise 2:



Here, I change the value of statement 1 from 0 to 5.

Excercie 3:



Here, I changed the value of statement 1 into 5 from 0, then change statement 2 from i < 10 to i <= 50, and statement 3 from i++ to i = i + 5.

Exercise 4:


Here, I changed statement 1 from i=0 to i=10, statement 2 from i < 10 to i> 0, and statement 3 from i++ to i--.

Excercise 5:



Here, I added all the statements shown above.

Exercise 6:



Here, I have to create the whole loop from scratch with the instruction give as shown in the image above. 

Lab 2: Pop Up Windows

      In this second lab of the year, we have to write about 3 paragraphs of our smart goals for this school year and make it pop up when you click on its button. These pop ups are also known as an alert boxes within buttons. And last, include a nice picture of ourselves on the webpage. We have to create buttons that includes JavaScript functions that are exceptionally well organized and very easy to follow.

      To create this lab, we have to create 3 buttons and to make it look better than the default look, I added a class called "button" with CSS into it, made it larger and match the theme color of my webpage. Then create 3 function for each of the buttons. The function will be call goal1(), goal2(), and goal3(). And within each of the three functions, there will be an alert written in the form:

   function goal ()
   {
  alert ('content of the goal');

   }

And within the buttons, I have add the function to the onclick code, so when you click on the button, the alert will pop up to the window. It'll look something like this:

<button type="button" class="button" onclick="goal ()"> Goal </button>

And last I added an image of myself, I really like my design of the circular images from last year so I made a class for the image. I cut in into a square first, then I gave it a class of CSS that changed its border radius so it is a circle.

JavaScript Conditions: If/else Statement

      Conditional Statements are used to perform different actions for different decisions and situations. In JavaScript we use "if" to specify a block of code to be executed, if a specified condition or statement is true. "else" will be used  to specify a block of code to be executed, if the same condition from the "if" statement is false. "else if" will be used to specify a new condition to test, if the first condition is false and the condition of this statement is true, this statement will be executed before the "else" statement.

example:

if(expression){

code will execute if expression is true

}

else if (expression2){

code will execute expression is false and expression2 is true

}

else{

code executed when both expressions are false

}

      "switch" is similar to "if"/"else" statements. They have a default value in which codes executes when nothing happens. Then they have case values that can be as much as you want, which are executed if a case is true. 

example:

switch(expr){

case value1:

execute if expr==value1

break;

case value2:

execute if expr==value2

break;

default:

executed if no case values match the expression

}

Lab 1: First JavaScript

      Another year of high school begins. Things are going so fast. Maybe a bit too fast for me. Within a blink of an eye, I am already in my senior year of high school and will be in college next year. This year is also the last year I'll be in this school, I'll miss it so much. It is also the year of the course of Web Client Programming in the amazing Web Design Academy. We will learn mostly about Java Script this year. This first lab of the year of course will be about Java Script, our first ever Java Script. We first have to write three paragraphs each answering a question. Who am I? Why am I here? and Why do I want to Succeed in Class? Then create a button the turns a portion of the text into another text using Java Script.

      It is exciting to learn about another, and more advances language. I first created a design for the my website, which will be consistent throughout the whole site. It's a blue and white combination and the layout is somewhat based on the website I've worked on during my Work Base Learning Internship I had during the summer at the Superintendent Office. The Navigation Bar is the same design as before, but the header had been changed in a logo I recently crafted along with my name next to it. Then I wrote about who I am, my education, and my desires of the future into these three paragraphs. After that, I create a button with a little additional CSS to make it match my theme, and used a simple Java Script taught by Mrs. Ramirez to change the text with a click of a button.

http://techteach.us/WCP2016/HJiahua/Labs/lab1/LB1_Jiahua.html