Code


<!DOCTYPE html>
<html>
<head>
	<title>Digital Media and Photography Courses</title>

</head>

<body>

	<button onclick="create_toc();">create table of content</button>
	<button onclick="more_courses();">more courses</button>


	<h1>Art 190 - Contemporary Art Photography I </h1>

	<p>
		Full course for one semester. This course introduces students to the
		fundamentals of black and white photographic processes and
		investigates the use of photography in the context of contemporary
		art. The class will cover camera operation, principles of exposure,
		basic understanding of light, film development, and darkroom
		printing. Technical, aesthetic, and conceptual possibilities of
		photography are explored through shooting assignments, readings, slide
		presentations, lab work, and critiques. Students will learn to respond
		to assignments with technical competence and critical
		clarity. Prerequisite: Art 161. Studio.
	</p>


	<h1>Art 195 - Digital Imaging/Processing </h1>

	<p>
		Full course for one semester. This course introduces students to the
		fundamentals of digital media. Technical and conceptual units will be
		presented both in a historical context and in light of contemporary
		arts practice. We will explore the link between art, technology, and
		the computer through readings, slide presentations, and class
		discussions. Topics will include the nature of the digital document;
		the relationship of digital forms to traditional hand-based media; the
		machine/digital aesthetic; and intersecting discourses of art, new
		media, and the sciences. Students will learn to acquire, manipulate,
		and print digital images. The class will also explore the use of the
		computer as an autonomous art tool through programming and examine the
		possibility of process-based art. Students will be expected to respond
		to assignments with technical competence and critical
		clarity. Studio.
	</p>



	<h1>Art 196 Digital Video/Interactive Art</h1>

	<p>
		Full course for one semester. We will explore artistic concepts and
		technologies involved in the creation of video art and interactive
		time-based art. Students will learn nonlinear video editing (Final
		Cut) and interactive graphical programming (Max/MSP/Jitter) while
		being exposed to the history and discourse of video art and new media
		art. Class time will be spent in lectures, viewings, lab work,
		critique, and occasional field trips. Students will be expected to
		respond to assignments with technical competence and critical clarity.
		Enrollment limited to 12. Prerequisite: Art 161 or consent of the
		instructor. Studio.
	</p>



	<h1>Art 293 Internet Literacy, Culture, and Practice</h1>

	<p>
		Full course for one semester. Students will develop an understanding
		of the technology and the issues surrounding the Internet and the web
		through studio activities, readings, and fieldwork. Students will gain
		literacy in web development languages (HTML, CSS, and javascript) and
		design web applications. We will cover the history of the use of
		computers and networks as a tool for empowerment, explore topics such
		as hypertextuality, non-linearity, interactivity, authorship, web as
		archive, net-neutrality, and the open source movement. With the newly
		acquired literacy in hand we will investigate how the convergence of
		the web/social-media with social practice/activism reconfigures the
		ways in which artists and citizens view, participate in, understand,
		and narrate real-world issues.  Prerequisite: Art 161 or consent of
		the instructor. Studio.
	</p>


	<h1>Art 291 - Contemporary Art Photography II</h1>

	<p>
		Full course for one semester. The course will introduce color,
		larger-scale printing, fiber-based printing, and medium-format
		materials. With elementary skills and historical context in place, the
		class will focus on manifestations of the photographic image as an art
		object, both physically and conceptually. Technical, aesthetic, and
		conceptual possibilities of photography are explored through shooting
		assignments, readings, slide presentations, lab work, and
		critiques. Class time will be spent in lecture, slide presentations,
		lab work, critique, and occasional field trips. Students will be
		expected to respond to assignments with technical competence and
		critical clarity. Prerequisite: Art 190 or consent of the
		instructor. Studio.
	</p>




	<h1>Art 361 - Intermediate Photography and Digital Media I</h1>

	<p>
		Full course for one semester. This intermediate studio course provides
		a forum for more advanced and independent work for students who have
		completed the introductory sequence in photography or digital
		media. It will function as both a studio intensive and a junior
		seminar, with regular discussion of articles in contemporary media
		arts and theory, as well as selected historical writings and
		works. Assignments will be open-ended, providing thematic guidelines,
		which build on skills and conceptual awareness from the introductory
		courses. Assignments will also respond directly to individual and
		group interests. Possibilities include electronic visualization,
		collaborative video or still production, documentary, large-format
		photography, mural printing (photographic and digital), and
		hybridization of traditional and electronic photography. Topics of
		reading and research will include the aesthetics and politics of
		visual truth, the collective imagination of popular culture, the
		science and psychology of optics and seeing, and the indexical as a
		mode of representation. Class time will be spent in lecture, slide
		presentations, lab work, critique, and occasional field
		trips. Students must be highly self-motivated and will be expected to
		respond to assignments with technical competence and critical
		clarity. Studio
	</p>



	<h1>Art 374 - New Media Old Media</h1>

	<p>
		The course will examine and experiment with various forms of old and analog
		media combined with new and speculative twenty-first-century media technology to
		see if they can be productively remade and integrated into contemporary art
		practices. Our goal is to defamiliarize photography and new/digital media by
		finding alternative uses, or by revisiting a time when they had not separated
		themselves into distinct and different discourses looking at historical devices,
		methods, and tools that shared common aspirations and limitations. Technical,
		aesthetic, and conceptual possibilities are explored through studio workshops,
		projects, readings, presentations, and critiques. Students must be highly
		self-motivated and will be expected to design independent projects. </p>





		<script>


		/*  A function that generates random color found on the Internet */
		function get_random_color() {
			return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
		}

		//receives individual DOM element as an argument
		//apply CSS
		function applyRandom(course){
			course.style.color = get_random_color();

		}

		// select all HTML elements with class "h1".
		// the result is an array of DOMs and stored in variable "courses".
		var courses = document.querySelectorAll("h1");
		// using forEach, iterate over all the DOM elements in the array
		// for each of the elements, applyRandom function
		courses.forEach(applyRandom);

		// select all HTML elements with class "p".
		// the result is an array of DOMs and stored in variable institutions.
		var descs = document.querySelectorAll("p");
		// using forEach, iterate over all the DOM elements in the array
		// for each of the elements, applyRandom function
		descs.forEach(applyRandom);


		function createlist(course){
			var li_dom = document.createElement("li");
			li_dom.innerHTML = course.innerHTML;
			var ul_dom = document.querySelector("ul");
			ul_dom.appendChild(li_dom);
		}


		function create_toc(){
			// the line below is not necessary as the variable courses is defined
			// outside of this function (as a global variable) but to make
			// this function self-sufficient, I define the variable courses here
			var courses = document.querySelectorAll("h1");
			var ul_dom = document.createElement("ul");
			document.body.appendChild(ul_dom);
			courses.forEach(createlist);
		}

		function more_courses(){
			var h1_dom = document.createElement("h1");
			h1_dom.innerHTML = prompt("course number and title?");
			h1_dom.style.color = get_random_color();
			document.body.appendChild(h1_dom);
		}

	</script>
</body>
</html>

Notes

selecting all h1 tags

Recall that an array has multiple compartments like this






and that it can be accessed like this
    alert(mycart[0]);    // tomatoes
    alert(mycart[2]);    // eggs  
  


    		// select all HTML elements with class "h1".
		// the result is an array of DOMs and stored in variable "courses".
		var courses = document.querySelectorAll("h1");
		
		// using forEach, iterate over all the DOM elements in the array
		// for each of the elements, applyRandom function
		courses.forEach(applyRandom);
  
document.querySelectorAll("h1"); puts all the H1 elements into an array named courses:



So the array courses would have 7 comparments:

courses[<h1>Art 190 - Contemporary Art Photography I </h1>] [<h1>Art 195 - Digital Imaging/Processing </h1>] [<h1>Art 196 Digital Video/Interactive Art</h1>] [<h1></a>Art 293 Internet Literacy, Culture, and Practice</h1>] [<h1>Art 291 - Contemporary Art Photography II</h1>] [<h1>Art 361 - Intermediate Photography and Digital Media I</h1>] [<h1>Art 374 - New Media Old Media</h1>]



courses[0] has <h1>Art 190 - Contemporary Art Photography I </h1>
courses[1] has ...
courses[2] has ...
courses[3] has ...
courses[4] has ...
courses[5] has <h1>Art 361 - Intermediate Photography and Digital Media I</h1>
courses[6] has ...
Notes

foreach

Now that we have all the h1s in the array named courses, we can use the forEach function
    		// select all HTML elements with class "h1".
		// the result is an array of DOMs and stored in variable "courses".
		var courses = document.querySelectorAll("h1");
		
		// using forEach, iterate over all the DOM elements in the array
	        // for each of the elements, applyRandom function
		
		courses.forEach(applyRandom);
  

  
The forEach function in effect does this:
    applyRandom(courses[0]);
    applyRandom(courses[1]);
    applyRandom(courses[2]);
    applyRandom(courses[3]);
    applyRandom(courses[4]);
    applyRandom(courses[5]);
    applyRandom(courses[6]);
    
  
If you recall, applyRandom is defined as:
    function applyRandom(course){
       course.style.color = get_random_color();
    }


so ultimatly, something like this happens
  courses[0].style.color = get_random_color();
  ...
  courses[1].style.color = get_random_color();
  ...
  courses[2].style.color = get_random_color();
  ...
  courses[3].style.color = get_random_color();
  ...
  courses[4].style.color = get_random_color();
  ...
  courses[5].style.color = get_random_color();
  ...
  courses[6].style.color = get_random_color();
  ...
  
Notes

Summary

Whenever you select many things, you get an array
    var myh1 = document.querySelectorAll("h1");
  
use forEach() function of the array to apply a function to the individual elements in the array
    myh1.forEach(somefunction)
  
You have to define the function before you use it
    function somefunction(e){
       ...
    }
  

TOC

    <button onclick="create_toc();">create table of content</button>
  

                ...

    		var courses = document.querySelectorAll("h1");

                ...
		
			
  		function createlist(course){
			var li_dom = document.createElement("li");
			li_dom.innerHTML = course.innerHTML;
			var ul_dom = document.querySelector("ul");
			ul_dom.appendChild(li_dom);
		}


		function create_toc(){
			var ul_dom = document.createElement("ul");
			document.body.appendChild(ul_dom);
			courses.forEach(createlist);
		}
    












      
                ...

    		var courses = document.querySelectorAll("h1");

                ...
		

  		function createlist(course){
			var li_dom = document.createElement("li");
			li_dom.innerHTML = course.innerHTML;
			var ul_dom = document.querySelector("ul");
			ul_dom.appendChild(li_dom);
		}


		function create_toc(){
			var courses = document.querySelectorAll("h1");
			var ul_dom = document.createElement("ul");
			document.body.appendChild(ul_dom);
			courses.forEach(createlist);
		}
    












      
                ...

    		var courses = document.querySelectorAll("h1");

                ...
		

  		function createlist(course){
			var li_dom = document.createElement("li");
			li_dom.innerHTML = course.innerHTML;
			var ul_dom = document.querySelector("ul");
			ul_dom.appendChild(li_dom);
		}


		function create_toc(){
			var courses = document.querySelectorAll("h1");
		        var ul_dom = document.createElement("ul");
			document.body.appendChild(ul_dom);
			courses.forEach(createlist);
		}
    












      
                ...

    		var courses = document.querySelectorAll("h1");

                ...
		

  		function createlist(course){
			var li_dom = document.createElement("li");
			li_dom.innerHTML = course.innerHTML;
			var ul_dom = document.querySelector("ul");
			ul_dom.appendChild(li_dom);
		}


		function create_toc(){
			var courses = document.querySelectorAll("h1");
		        var ul_dom = document.createElement("ul");
			document.body.appendChild(ul_dom);
			courses.forEach(createlist);
		}
	












      
                ...

    		var courses = document.querySelectorAll("h1");

                ...
		


  		function createlist(course){
			var li_dom = document.createElement("li");
			li_dom.innerHTML = course.innerHTML;
			var ul_dom = document.querySelector("ul");
			ul_dom.appendChild(li_dom);
		}


		function create_toc(){
			var courses = document.querySelectorAll("h1");
		        var ul_dom = document.createElement("ul");
			document.body.appendChild(ul_dom);
			courses.forEach(createlist);
		}
    













                ...

    		var courses = document.querySelectorAll("h1");

                ...
		


  		function createlist(course){
		       var li_dom = document.createElement("li");
			li_dom.innerHTML = course.innerHTML;
			var ul_dom = document.querySelector("ul");
			ul_dom.appendChild(li_dom);
		}


		function create_toc(){
			var courses = document.querySelectorAll("h1");
		        var ul_dom = document.createElement("ul");
			document.body.appendChild(ul_dom);
			courses.forEach(createlist);
		}
    







                ...

    		var courses = document.querySelectorAll("h1");

                ...
		

  		function createlist(course){
		       var li_dom = document.createElement("li");
			li_dom.innerHTML = course.innerHTML;
			var ul_dom = document.querySelector("ul");
			ul_dom.appendChild(li_dom);
		}


		function create_toc(){
			var courses = document.querySelectorAll("h1");
		        var ul_dom = document.createElement("ul");
			document.body.appendChild(ul_dom);
			courses.forEach(createlist);
		}
    






Notes

Summary