I have audited a Coursera course of Duke University called Programming Foundations with JavaScript, HTML and CSS.
A website, Codepen, is introduced to us for HTML & CSS learning.
CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets.
https://codepen.io
A website below is designed for HTML elements and CSS properties and values searching.
Documentations of HTML elements & CSS properties and values
https://www.dukelearntoprogram.com//course1/doc/#basichtml
A few common tags use in HTML
<html> </html> //for genneral website usage, contents contained between these two tags.
<head> </head> //the content on your top of browser TAB.
<body> </body>//之间夹网页内容的主体
Comments: Building a website by using HTML is quite similar with the pattern using “{}” to write programs. We use specific tags replace “{}” to describe the elements.
Link and Image：
image：
<img src=“target link” width=“100px”/>
link：
<a href="target link"> link head title </a>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML
How to add IDs and Name Classes to HTML elements and Use CSS to style the elements
Name classes by HTML:
**<div class="xxxx">**
//xxxx could be a named class to set its own style within.
<h1>CLASS<h1/>
<div/>
Style the elements by CSS
.xxxx{
//".xxxx" is a formerly named class in HTML
background-color: AliceBlue;
border: solid;
border-width: 1px; border-color:
CornflowerBlue;
margin: 0px 2px 15px 2px;
padding: 0px 17px 5px 17px;
border-radius: 25px;
}
Develoing an algorithm - The Green Screen Problem
A Seven Step Approach to Solving Programming Problems
- Work example by hand.
- Write down what you did. Think about what you did and write down every step.
- Find patterns. For finding a pattern with repetition.
- Chekc by hand
- Translate to code
- Run test cases
- Debug failed test cases
Variables: quite similar with C related language. We use code like var x = 3; to define a new variable.
we also could define a new object, var aImage = new SimpleImage("abc.png");. Otherwise, a class could be defined before we create a new object (SimpleImage).
Methods: For instances, var pixel = aImage. getPixel(0,0);getPixel() could be considered as a method provided.
Functions:
function square(x){
var sum = x * x;
return sum;
}
we can invoke a function which is formerly designed to help deal with repetitive works.
Types:
Types interpret the number, and explain how to operate the number.
(Different from other C related languages, Java use only one type called var.)
ps: concatenation is a word that describes string merging,
Exercise 1: Change RGB value of an image
https://www.dukelearntoprogram.com//course1/example/index.php
We now have an image of Hilton.
Requirements:
- From left to right, set RGB Red value of the first third width of the image to 255(max), set RGB Green value of the second part of a third image width to 255, set RGB Blue value of the third part of a third image width to 255.
- Print the image.
A possible solution:
var img = new SimpleImage("hilton.jpg");
var w = img.getWidth();
for (var pixel of img.values()){
var x = pixel.getX();
if(x < w/3){
pixel.setRed(255);
}
else if (x<2/3*w){
pixel.setGreen(255);
}
else{
pixel.setBlue(255);
}
}
print(img);
Exercise 2: Implementing green screen algorithm
Requirements:
- Consider drewRobert.png as the front image, dinos.png as background image.
- We need to change every green pixel of the front image to the corresponding background pixel value.
A possible solution:
//set front image, background iamge, and output image.
var fgImage = new SimpleImage("drewRobert.png");
var bgImage = new SimpleImage("dinos.png");
var output = new SimpleImage(fgImage.getWidth(),fgImage.getHeight());
//green screen loop here.
//choose the pixel when its green value higher than 235, change its RGB value equals to the background image's.
//other pixels' RGB values equal to front image's.
for( var pixel of fgImage.values()){
if(pixel.getGreen()>235){
var x = pixel.getX();
var y = pixel.getY();
var bgpixel = bgImage.getPixel(x,y);
output.setPixel(x,y,bgpixel);
}
else{
output.setPixel(pixel.getX(),pixel.getY(),pixel);
}
}
//print the output image.
print(output);
Finding Bugs in Code
In seven step approach to solving programming problems, we have a seventh step called finding bugs in code.
We usually use scientific method to debug
- observe the phenomenon.
- ask a question
- gather information & apply expert knowledge
- form hypothesis
- test hypothesis
- reject hypothesis ( back to 4) or (to 7)
- accept hypothesis
Create a button to change pages interactively
we create one button when we click on it, the title change the background color.
we create the other button when we click on it, the text change.
HTML part
<div id = "d1">
Hello
</div>
<div id = "d2">
Goodbye
</div>
<p>
<input type = "button" value = "color change"
onclick = "changecolor()">
<input type = "button" value = "text change"
onclick = "textchange()">
</p>
CSS part
/*assign a class named blueback with background color lightblue*/
.blueback{
background-color: lightblue;
}
/*assign a class named yellowback with background color yellow*/
.yellowback{
background-color: yellow;
}
JavaScript part
/*a function used to change color*/
function changecolor(){
var dd1 = document.getElementById("d1");
var dd2 = document.getElementById("d2");
dd1.className = "blueback";
dd2.className = "yellowback";
}
/*a function used to change text*/
function textchange(){
var dd1 = document.getElementById("d1");
var dd2 = document.getElementById("d2");
dd1.innerHTML = "Bonhour";
dd2.innerHTML = "Sayonara";
}
Several types of input and events
Input:
button, text, color picker, range
Events:
mouse click, mouse enter/leave, field changes, input given.
Global variables
In javascript, you can use global variables to define variables for all the functions.
References:
- Translating to Code - Duke University | Coursera. https://www.coursera.org/learn/duke-programming-web/lecture/KDhB5/translating-to-code. Accessed 5 Oct. 2020.
73
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
