JavaScript Chapter 4

This chapter was about decisions and loops. I thought they were interesting as things are starting to get mathy. Basically you can use JavaScript to do different things based on what decision is made. If, if/else, and switch statements can be used for this. Comparison operators( <,=,and >) can be used in these statements to make these decisions. For example: if (i>18) { document.write(“Welcome to the site!”) ; } else { document.write(“Sorry, too young.”) ; } for, while, and do/while statements can be used to loop, or perform the same task multiple...

Chapter 15: Layout

This chapter was interesting because I had experience with using Bootstrap to make responsive webpages but I did not know about other css frameworks, like 960 Grid System. It was interesting how similar the syntax of 960 is to Bootstrap, for example container (Bootstrap) and container_12 (960). I am also glad to have figured out how to make the nav bar on my portfolio fixed to the screen: See the Pen Jack’s Portfolio by Jack O’Hara (@JackBayly) on CodePen. Notes: Positioning schemes of CSS: -Normal flow: Each block-level element appears on a new line. -Relative positioning: Shifts an element from where it would be in normal flow, e.g. top, left, right, bottom.  position: relative -Fixed positioning: element is positioned in relation to the browser window. Is glued onto the screen. position: fixed ( z-index:  10 brings it to the front of the webpage. ) -Floating: puts an element to the far right or left of a containing box. float: right/left To put elements side by side use the float: left rule. The clear: right/left/both/none rule can align an element if it is off position. Can create a multi-column layout (like with content and a side panel) by using float, width, and margin. Designers usually make websites around 960-1000 pixels. Layout grids help when designing. 960 Grid System is a helpful CSS framework for making a grid. Can use @import to use more than one stylesheet in your website; it looks like @import url(“blablab.com”); . Can also just put multiple links in your html document....

JavaScript Chapter 2

Finally figured out how to add a greeting that changes depending on the time to my portfolio website! Check it out: See the Pen Jack’s Portfolio by Jack O’Hara (@JackBayly) on CodePen. I did this by using the .getElementById and .textContent methods to replace the text I had in my original sans-JS greeting. Pretty proud to have incorporated my first JS code into an actual project. Notes: A script is a series of instructions. A statement is a set of instructions that ends with a semicolon. Statements can be organized into code blocks which begin and end with curly braces. You can make comments in JS with // (for single-line comments) and /* Blablah*/ (for multi-line comments) Comments make your code easier to read. Variables store information a script needs. You declare a variable with the var keyword. Use camelCase for naming variables. Data Types (covered so far):  Numbers: 1,2,3 Strings: “HI”, “1”, “July” Booleans: true or false. Arrays: [“one”, “two”, “three”], [1, 2, 3] You can do math with operators....

JavaScript Chapter 1

So I’ve started the companion book to Duckett’s HTML book: JavaScript and JQuery. I’m pretty excited to start learning my first actual programming language (as opposed to html, which is but  a mere markup language).  After completing the first chapter I have to say JavaScript does seem a lot more challenging than html. An example from the first chapter: a greeting that changes depending on the time of day. See the Pen RgaLEO by Jack O’Hara (@JackBayly) on CodePen. Notes: Scripts are instructions for a computer. Everything in JavaScript is an object. Objects have three components: –Properties: the characteristics of an object. Every property has a name and a value. –Events: the ways people interact with objects. –Methods: things people do with objects....

Chapter 14: Lists, tables, and forms

So I’ve decided to take my notes in a different way.  Instead of typing up my notes on Notepad++ and taking screenshots of them, I’ll post links to codepen with projects I make using whatever I learn in each chapter; thereby reinforcing the newly learnt information in my brain (where it will hopefully be retained) and making it easier to review my code. However, I will continue to post notes on each chapter, mainly so I can have a place to reference/review key info. I will just post them into little blog posts, such as this one, which will have a link to codepen projects/practice code. So here I go! This chapter was about styling lists, tables, and forms in css. The list-style-type property styles bullet points of lists. Unordered lists can take the following values: none:  eliminates a bullet. disc: makes a black circle bullet. circle: makes a circle with a black outline. square: makes a black square. Ordered lists can take the following values: decimal: 123 upper-alpha: ABC The list-style-image property allows you to use an image for a bullet. The css would look like this: li {list-style-image: url(“blablabla.com”);} The life-style-position property specifies whether the bullet point is on the inside (value of inside) of the text box or the outside (value of outside ). The list-style property is a shorthand way to style lists. You can style the style, image, and position (in any order). It would look like this: li {list-style: inside square;} Table properties: width: for width of whole table. padding: for cell and header space. text-transform:  can make header uppercase (to aid readability) border-top/border-bottom:...

Chapter 13: boxes

Okay, this chapter was a little difficult.  I never thought about how many aspects of boxes needed to be specified. I learned about margins, padding, and borders. And the many ways they can be styled. I will definitely have to review this chapter. Notes in webpage form Notes in code...
css.php