Hour of Code & logo

Hour of Code & logo

URL Query Strings

Javascript, HTML & CSS

Tim Miller - tim.miller@humboldt.edu

Introductions

Tim miller

I use computer programming to solve problems:

  • share information
  • create presentations 
  • understand how programs work 
  • learn new skills that apply to other areas:
    • bike mechanic, organization -
      • trouble shooting
      • problem solving
      • critical thinking

Introductions

Who are you?

What is your experience with:

  • computer science?
  • computer programming?
  • using computers & technology?

What is your area of interest?

  • how do you think computer programming can be applied?

PLEASE BE CAREFUL

  • KEEP AWAY FROM THE COMPUTERS

  • KEEP YOUR HANDS CLEAN

  • LET US KNOW ABOUT ANY SPILLS/MESSES

food & drinks

What is a URL Query String?

  • If you type in a search on the web, the URL on the results page most often contains a query string with your search term

 

 

  • If you change the query string, you will get different results

https://www.google.com/search?q=search%20term

Why do we Care about Query Strings?

  • Search engines 
    • Google
    • Amazon
    • Wikipedia
  • Create your own search box
  • Customize your searches
  • Understand how search engines work

Today

Two-Part tutorial

  • Explore how query strings work
  • Learn and practice the basic concepts involved
  • You will create a search box
    • JSBin - JavaScript playground

Collaboration

  • Programs are written by groups of people
  • Work with each other to solve problems - ask questions!

Today

Big Concepts

  • Discussion: Planning & conceptualizing our application
  • Learn and practice: the specifics 
  • Critical thinking: 
    • How could we implement this?
    • What sites will work with it?
    • What sites won't work with it?
    • How does this help the user?
    • Is it easy enough to use?
    • What kinds of bugs might come up?

http://humboldt.edu

Let's begin!

Bonus Points

Create your own JSBin exercise

document.write("Enter some text here");
var yourVariable = "";
document.write(yourVariable);

What would YOU like to create?

Some code snippets to try out:

How did it go?

What worked best?

 

What didn't work?

 

What did you learn?

 

What do you still want to learn?

Ideas

How can we build upon the things we learned today?

Set up an account in JSBin and apply the things that you learn

  • JavaScript
  • HTML
  • CSS
  • JS Libraries & frameworks
    • jQuery
    • Bootstrap 

Ideas

How can we use the things we learned today?

  • URL Query Strings
  • HTML
    • elements
    • attribute/value pairs
    • forms
  • JavaScript
    • variables
  • jQuery
  • JSBin
Made with Slides.com