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 times.

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:

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:


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.

 

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.

Chapter 14 practice: 

On the bright side, I have styling tables and forms down pat. However,  making forms work seems to be a little more difficult than I thought it would be. I wanted to make a form that would email me submitted information, but after much googling have found out that one) that would require some knowledge of php (which I would like to learn but is a little more in depth than I really want to go on this right now) and two) codepen doesn’t support php code (so even if I did manage to learn enough php to send emails I’d have to find another online code editor that supported the code).

Chapter 14 notes: 

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: to set borders for table headers.
  • text-align: to align text in table cells.
  • background-color: to change colors of table cells.
  • :hover: to highlight a table row when a mouse is over it.

The border-space and border-collapse property specifies the distance between cells. The latter removes the distance between cells and creates one border between them.

Text inputs on forms:

Font-size, color, background-color, border, border-radius (to round the edges of the input), :focus (pseudoclass which will make the background-color of the text-input change when being used), :hover (changes color when hovered over), and background-image (adds an image to the background of an input box).

Submit buttons:

Can style submit buttons with the color, text-shadow (gives it a 3D look), border-bottom (also gives it a 3D look), background-color,  and hover properties.

Fieldsets:

Fieldsets can be styled with the width, color, background-color, border, border-radius, and padding properties.

You can also change the appearance of a cursor by using the cursor property with a value of crosshair, pointer, help etc but this is not done too frequently.

 

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 form

Chapter 12: Text

This chapter went over how to style text with css. I’ve learned that you can change the color, size, font, position, and spacing of text with css. The part on styling links was particularly interesting because I had never thought about links as being things you style.

As I go through these chapters, I can’t help wonder how much I am actually retaining. There are just so many different properties and styles that were covered; I probably will not be able to remember them all. But I think it’s more important that I get exposed to them so I know what kinds of things css can do and can look them up if I need them later.

Here are screenshots of my notes in webpage form. A little disappointed because I tried to use the text-decoration blink property to make the headings blink, but it seems to have been deprecated since the book was published.  Oh well, in consolation I style the text green.

Chapter 12 code notes

Chapter 12 webpage notes

Atlanta Vintage Books

I’m sitting down in a yellow antique chair with my legs crisscrossed kindergarten style. I’m a little worried someone will come in and get mad that my shoes are touching the butt of the seat, but I also doubt anyone would care. And the only witness to my crime-of-comfortableness is a black cat with green eyes staring into my soul. Maybe I took its spot. There are a couple of cats in the store. It’s kind of the appeal of the store. It’s so relaxed here that they can have animals running around and not care, and even enjoy their presence.

I’m surrounded by walls of books, mainly on entertainment and media. However, the books cover topics as diverse as stand up comedy, anime, guitar, and poetry.

I can hear a man and a woman talking in low voices in another room. Something about the New Testament, then what sounds like German. I’m super nosy  and a little disappointed that I can’t follow everything they’re saying.

I hear someone (or a cat?) flipping the page of a book. I love that sound. It makes me feel accomplished. You finished reading a whole page, congrats, you’re reward is getting to flip it. Hmm, such a crisp sound.

There are also crude ventilation tubes sticking out of the walls and ceiling.  They’re silver so they give the room a 70s scifi movie vibe. I hear an AC unit in the other room go off and start pumping cold air throughout the book store and a calico cat quietly creeps by the doorway.

The blue carpet that lines the floor is torn-up in white patches. Probably the cats.  It starts to get cold as I notice that the book shelves in the room are different sizes and colors, some mahogany, some tan. They give away the fact that it’s a used bookstore. A chain would probably have more uniform shelves.

I love it here. I could stay forever, but I’d probably get lonely. Although I suppose the cats could keep me company.

What is Exposition?

John Maguire in his Atlantic Article argues that student writing often is not the best because it gets too caught up on ideas and forgets that all ideas come from physical things. Exposition is focusing on the world outside of your own head. As Kineavy writes in Expressive Discourse: One of the requirements for writing expressively (aka with style) is that you take into account what Sarte calls Being in the world, which he explains is the broader cultural context of you and your actions. How you relate to the world. This is important not only in writing, but also in regular everyday actions.

No man is an Island.

-John Donne

We sometimes have this cultural image in our heads that great writers and creators were all isolated geniuses that took nothing and created completely original innovation, like a fly spontaneously generating out of dead flesh. However, much like flies, writing does not come from nothing. Every poem, manual, or novel was situated in its own cultural and historic moment.

Material culture studies is about using expository writing practices to uncover and demystify that moment. This is important because as I have learned through out Exposition 3140, a piece of text, a  bottle, a civil war belt buckle, or a pair of wooden die are so much more than just trash. They have so much information contained within them that could be written. Exposition takes that information and puts it in a mode of communication that is useful and appealing to people.

The idea of expository writing being used to help people understand each other better reminds me of my favorite quote from E.M. Forster :

Only connect
-Howards End

It is such a short quote but it always felt so meaningful to me. And its message is probably at the heart of why I study writing: to connect with people, to understand others and make myself understood. And exposition is an important part of understanding. In many cases, the best (and only) way to convey a feeling or experience is through describing it. And not just with words.

I’ve come to realize through working on my object analysis that multi-modality is critical to exposition. Like Writer/Designer points out, all text is multi-modal, so it is best to work with multi-modality and fully explore different mediums to communicate information. The object exhibits on Atlanta Artifacts would not be nearly as interesting without the visual images and 3D model and the gestural Timeline. While the different modes can give different information about an object, multi-modality also just makes exposition a little more fun.

I’m reminded of the first scene in Lewis Caroll’s Alice in Wonderland

“And what is the use of a book,” thought Alice, “without pictures or conversation?

To conclude, exposition is about replicating an aspect of the world or of yourself to other people. It’s about connecting. And it’s about using diverse ways of communicating to preserve the wonder of a piece of the world for other people to enjoy, experience, and learn from.