csci333/micro8.htm at master · ramirezg-web/csci333 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<!-- saved from url=(0065)https://cs.nyu.edu/courses/spring21/CSCI-UA.0061-001/video_08.php -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>CSCI-UA.0061 : Fall 2020</title>

    <!-- Bootstrap core CSS -->
    <link href="./micro8_files/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="./micro8_files/style.css" rel="stylesheet">

    <style type="text/css">
		.imageholder {
			border: 1px solid #eee;
			padding: 25px;
			width: 600px;
			margin-bottom: 50px;
			text-align: center;
		}

		.imageholder img {
			width: 500px;
		}

		h3 {
			margin-top: 50px;
		}

		#hoverbutton1 {
			width: 100px;
			height: 25px;
			background-color: black;
			color: white;
			text-align: center;
		}

		#hoverbutton1:hover {
			background-color: yellow;
			color: black;
		}

		#linkbox a {
			text-decoration: underline;
		}


		#linkbox a:link {
			background-color: white;
			color: black;
		}

		#linkbox a:visited {
			background-color: green;
			color: black;
		}

		#linkbox a:focus {
			font-size: 200%;
		}

		#linkbox a:hover {
			background-color: yellow;
			color: black;
		}

		#linkbox a:active {
			background-color: blue;
			color: white;
		}

		.no_border_box div {
			box-sizing: content-box;
		}

	</style>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  <script data-dapp-detection="">!function(){let e=!1;function n(){if(!e){const n=document.createElement("meta");n.name="dapp-detected",document.head.appendChild(n),e=!0}}if(window.hasOwnProperty("ethereum")){if(window.__disableDappDetectionInsertion=!0,void 0===window.ethereum)return;n()}else{var t=window.ethereum;Object.defineProperty(window,"ethereum",{configurable:!0,enumerable:!1,set:function(e){window.__disableDappDetectionInsertion||n(),t=e},get:function(){if(!window.__disableDappDetectionInsertion){const e=arguments.callee;e&&e.caller&&e.caller.toString&&-1!==e.caller.toString().indexOf("getOwnPropertyNames")||n()}return t}})}}();</script><style id="holderjs-style" type="text/css"></style></head>

  <body data-new-gr-c-s-check-loaded="14.1010.0" data-gr-ext-installed="" data-new-gr-c-s-loaded="14.1010.0">

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="https://cs.nyu.edu/courses/spring21/CSCI-UA.0061-001/index.html">Web Development &amp; Programming, Fall 2020</a>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li><a href="https://cs.nyu.edu/courses/spring21/CSCI-UA.0061-001/index.html">Home</a></li>
            <li><a href="https://cs.nyu.edu/courses/spring21/CSCI-UA.0061-001/syllabus.html">Syllabus</a></li>
            <li class="active"><a href="https://cs.nyu.edu/courses/spring21/CSCI-UA.0061-001/schedule.html">Schedule</a></li>
          </ul>
        </div>

        <div id="content" class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
	        <h1 class="page-header">Video Lesson 08</h1>

	        <p>This semester our class will be running 1x per week, online. In order to make the most of our weekly meeting, and to prevent "Zoom Fatigue", I will be teaching the class using a "flipped classroom" model.   Here's how this model will operate in our class this semester:</p>

	        <ul>
		        <li>Before most classes you will be asked to watch a video lesson - the lesson for this week can be found below.</li>
		        <li>After you watch all of the videos in today's lesson you will have a small task to perform - we will refer to these as "micro assignments". These "micro" assignments are fairly straightforward and short and are directly related to the content covered in the video lesson for the week.</li>
		        <li>These "micro" assignments are due before our next class meeting. You cannot turn in a "micro" assignment late. We are setting up these assignments in this way so that everyone has a baseline level of knowledge of the topics being covered in the video lesson. This will allow us to make the most of our time together during our weekly course meeting.</li>
		        <li>During our course meeting we will cover new topics during the first half of class. During the second half of class we will focus on working on a larger programming assignment together and in small groups.</li>
	        </ul>


	        <h3>Introduction to jQuery</h3>

	        <p>This video will cover the absolute basics of the jQuery front-end framework.  This video will focus on jQuery's ability to work with the DOM, but you do not need to change the way you program on the front end to use these techniques. This video is being provided to you because you will be using the jQuery <code>ajax</code> function as part of this week's micro assignment, as well as next week's macro assignment</p>

	        <iframe width="560" height="315" src="./micro8_files/xm3ZdEXqZD8.html" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>


	        <h3>Introduction to AJAX</h3>

	        <p>This video goes through the basics of Asynchronous JavaScript and XML (AJAX).  I use a very low level technique in this video to do this, but in the next video I will go through a more streamlined and straightforward way of making AJAX calls to the server using jQuery.</p>

	        <iframe width="560" height="315" src="./micro8_files/jmWMLBJa_8w.html" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>


			<h3>AJAX with jQuery</h3>

			<iframe width="560" height="315" src="./micro8_files/o02-55inlVg.html" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>


			<h3>PHP Sessions</h3>

			<p>This video discusses PHP Sessions, which is a concept that is needed to implement the "security upgrade" extra credit component of Macro Assignment #08.  This features is NOT required for full credit on this assignment.  With that said, you should familiarize yourself with the basics of this topic since it is a popular technique for building content management systems that require the storage of temporary user data.</p>

<iframe width="560" height="315" src="./micro8_files/tyT7ZU_Pr-s.html" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>


			<span id="micro08"></span>
			<h3>Micro Assignment #08</h3>

			<p>In this program you are going to create a "sticky" website that allows a user to add a series of colored boxes to the page.  Every time a box is added an AJAX request should be made to a PHP script on the server to save the box being created in a text file.  In addition, when the page initially loads the program should contact the server and obtain the current text file and "recreate" all previously generated boxes.</p>

			<p>All of the HTML, CSS and PHP has been written for this program.  Your job is to edit the JavaScript on <code>micro08.html</code> to make these AJAX requests and parse the results that you receive.  <a href="https://cs.nyu.edu/courses/spring21/CSCI-UA.0061-001/sourcecode/micro_assignments/micro08_starter_code.zip" target="_blank">You can download the entire package for this assignment here</a>.  Here's a video of how your program should operate:</p>

			<iframe width="560" height="315" src="./micro8_files/TIYTna8NFmY.html" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

			<p>When you are finished please upload a copy of this file to your i6 website using the process described in <a href="https://cs.nyu.edu/courses/spring21/CSCI-UA.0061-001/assignment01.php">Assignment 01</a>.  Name your file <code>micro08.html</code> and ensure that it is accessible from within your <code>webdev</code> folder.  You will also want to submit a link to your work on <a href="https://newclasses.nyu.edu/" target="_blank">NYU Classes</a> under the 'Assignments' tool.  You will want to include this project as a link on your homepage (also described in <a href="https://cs.nyu.edu/courses/spring21/CSCI-UA.0061-001/assignment01.php">Assignment 01</a>)</p>


        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./micro8_files/jquery.min.js"></script>
    <script src="./micro8_files/bootstrap.min.js"></script>
    <script src="./micro8_files/docs.min.js"></script>


</body></html>