Monday, March 31, 2014

JQuery

I thought it would be a good idea to work on your suggestions and I mostly completed your challenge for the vanish assignment. Originally I had tried to do something overly complicated and it didn't work but apparently there is a hidden selector which is really useful in this case. Anyway, if you click the button different squares fade in.
http://students.gctaa.net/~snicholakos/webgraphics/jquery_ex1.html

Also, I quickly looked at the JQuery zoo which was very useful and I found this function which may come in handy
$.fn.toggleClick = function() {
    var events = arguments;
    var iteration = 0;
          
    return $(this).click(function() {
        events[iteration].apply(this, arguments);
        iteration = (iteration + 1) % events.length;
    });
};

Friday, March 28, 2014

Thursday, March 27, 2014

JavaScript Methods and Custom Constructors

  • Like a function but used specifically with objects
  • Defined like a function but you add the name after the object
    • bob.setAge = function (newAge)
  • Functions require parameters while methods do not
  • "this" can refer to a specific object without having to write it in the method
    • var setAge = function (newAge) {
        this.age = newAge;
      };
  • Custom constructors work like this
    • function Person(name,age) {
        this.name = name;
        this.age = age;
      }
  • and can be called like this
    • var bob = new Person("Bob Smith", 30);
  • You can also have it so that there will be a value for all objects when making a custom constructor
    • function Person(name,age) {
        this.name = name;
        this.age = age;
        this.species = "Homo Sapiens";
      }
    • There is no parameter for species so Person will always be Homo Sapien
  •  They can also come with methods
    • function Rectangle(height, width) {
        this.height = height;
        this.width = width;
        this.calcArea = function() {
            return this.height * this.width;
        };
        this.calcPerimeter = function() {
            return this.height * 2 + this.width * 2
        }
      }

Wednesday, March 26, 2014

JavaScript

I finished up contact list which was due last week, here's the code
http://students.gctaa.net/~snicholakos/javascript/contacts.js

I also got around to finishing nearly half of the JavaScript lesson for this week. I don't think I need to write notes on objects because I already wrote some from the last lesson and there has been a lot of practice. I will post notes on methods and any finished projects later on, though.


Tuesday, March 25, 2014

JQuery

I finished the second codecademy section. I thought it would be fun to try and start making a game. I tried to make a tic tac toe game which I have here.
So, my plan was to have these spots where you could click(marked as blue squares) and as you click they get replaced with either a red or green object.

$(document).ready()
   $("div").toggle(function() {
       $(this).replaceWith($("div.square"));
   }, function() {
       $(this).replaceWith($("div.circle"));
   });

What I was hoping this code would do is replace the object that the mouse is clicked on with either the square or circle which would cycle. As far as I know, the toggle function works as .click and replace would obviously replace the object but it doesn't work.

api.jquery.com/toggle-event/
http://api.jquery.com/replacewith/

Monday, March 24, 2014

JQuery

I made a quick project from some of the stuff I learned so far, the button will make the blue square go away but clicking on the green square will allow the red one to reappear.

http://students.gctaa.net/~snicholakos/webgraphics/jquery_ex1.html

Friday, March 21, 2014

What I Learned About JavaScript Arrays and Objects

I finished the Choose your own Adventure, it technically works but I will post it on my website when I make it more interesting.

Arrays
  • Arrays don't need to hold the same datatypes
  • Arrays can be nested, you can have arrays in arrays
  • Ex. myArray = [[true, false, 3, "three"], ["hello", 4], [0]]
Objects
  •  
  • you can create objects with nothing in them
    • var me = new Object();
  • you can add to objects
    • myObj["name"] = "Charlie";
      myObj.name = "Charlie";
       
  • similar to arrays they are formatted
    • var myObj = {
          type: 'fancy',
          disposition: 'sunny'
      }; 
      
      

Thursday, March 20, 2014

jQuery Animation

For my small project I made squares that increase in size as you mouse over them and when you move your mouse away from them they stop increasing in size. I would also like to make it so that you can decrease the size but I couldn't quite get that working.

http://students.gctaa.net/~snicholakos/webgraphics/rainbows.html

Wednesday, March 19, 2014

jQuery Lessons

  • the ".ready()" function has something happen the second the page loads
  • "document" refers to the html document itself
  • "$()" is where jquery code goes
  • "click" allows for something to happen when an object is clicked on
  • "mouseenter" allows for something to happen when the mouse is placed over an object, while "mouseleave" is the opposite
  • "animate" can manipulate an object
  • "slidedown" does exactly what it sounds like, objects slide down
  • "slow" can make an action slower

Tuesday, March 18, 2014

jQuery

I put the first two exercises into a web page
http://students.gctaa.net/~snicholakos/webgraphics/

It was pretty confusing at first and as codecademy said it all looked intimidating but now that I completed one exercise I think I can start doing the rest faster. The exercise itself isn't too hard but the info they give before each exercise is harder to understand, especially because there are three different tabs. I actually think javascript is easier to understand.

Tuesday, March 11, 2014

Javascript

  • .toUpperCase() capitalizes all letters in a string
  • .toLowerCase() does the opposite
  • "and" is written as &&
    • true && true;    // => true
      true && false;   // => false
      false && true;   // => false
      false && false;  // => false 
  • "or" is ||
    • true || true;     // => true
      true || false;    // => true
      false || true;    // => true
      false || false;   // => false 
  • "not" is !
    • !true;   // => false
      !false;  // => true
       
       

Monday, March 10, 2014

Javascript

I think I've finished everything for the week so I have moved on to the next lesson in codeacademy, I'll come back and edit my notes if needed.

  • The switch statement is very useful, it's a substitute for else if and allows the user to preset as many cases as they like and if one of the options is chosen it will execute the code otherwise it will execute some default code.
    • In code academy they have                                                                        var lunch = prompt("What do you want for lunch?","Type your lunch choice here");

      switch(lunch){
        case 'sandwich':
          console.log("Sure thing! One sandwich, coming up.");
          break;
        case 'soup':
          console.log("Got it! Tomato's my favorite.");
          break;                                                                                                       default:
          console.log("Huh! I'm not sure what " + lunch + " is. How does a sandwich sound?"); 
                                                                                         From what it looks like the user is prompted the questions what they want for lunch and if they choose either sandwich or soup they will get a preset response otherwise they will get the last message because they did not choose any of the available options.

Friday, March 7, 2014

Inkscape

I finished up my snail thanks to Kenneth and I changed the viewbox on both my teapot and snail to only fit the picture. SVG is really fun and it feels nice to finish a project.

My projects can be seen here
http://students.gctaa.net/~snicholakos/webgraphics/

Thursday, March 6, 2014

SVG and JS

I implemented my dragon slayer game into a web page.
http://students.gctaa.net/~snicholakos/javascript/dragon_demo.html

I also worked a bit on my teapot and snail, I managed to fix up my teapot using Inkscape so now the lid is perfect as far as I can see and I tried to make the fill on Gary the snail a bit more precise.
http://students.gctaa.net/~snicholakos/webgraphics/

Wednesday, March 5, 2014

SVG

I added the dictionary lists to my SVG portfolio and also added some color to both my SVG and JS portfolio to make both look a little better. I also sort of figured out a way to fix my teapot but it's not a very good solution.