Prepare for your exams
Get points
Guidelines and tips

Prepare for your exams

Study with the several resources on Docsity

Earn points to download

Earn points by helping other students or get them with a premium plan

Guidelines and tips

Sell on Docsity

Log in Sign up

Prepare for your exams

Study with the several resources on Docsity

Find documents

Prepare for your exams with the study notes shared by other students like you on Docsity

Search Store documents

The best documents sold by students who completed their studies

Search through all study resources

Docsity AINEW

Summarize your documents, ask them questions, convert them into quizzes and concept maps

Explore questions

Clear up your doubts by reading the answers to questions asked by your fellow students

Earn points to download

Earn points by helping other students or get them with a premium plan

Share documents

20 Points

For each uploaded document

Answer questions

5 Points

For each given answer (max 1 per day)

All the ways to get free points

Get points immediately

Choose a premium plan with all the points you need

Study Opportunities

Choose your next study program

Get in touch with the best universities in the world. Search through thousands of universities and official partners

Community

Ask the community

Ask the community for help and clear up your study doubts

University Rankings

Discover the best universities in your country according to Docsity users

Free resources

Our save-the-student-ebooks!

Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors

From our blog

Exams and Study

Go to the blog

Dynamic Images - Thinking Like Computers - Lecture Slides, Slides of Artificial Intelligence

Bidhan Chandra Krishi Viswavidyalaya Artificial Intelligence

During the course work of Thinking Like Computers, we study the key concept of artificial intelligence. The main points in these lecture slides are given as:Dynamic Images, Dynamic Image Example, Javascript, Conditional Execution, If Statements, Boolean Tests, Boolean Expression, Accessing Text Fields, Cascading If-Else Statements, Cleaner Notation

Typology: Slides

2012/2013

Uploaded on 04/24/2013

banani 🇮🇳

4.3

(3)

91 documents

1 / 6

This page cannot be seen from the preview

Don't miss anything!

1

CSCI 100

Think Like Computers

Lecture 19

Fall 2008

Last Time …

•Programming languages

•Compiling vs Interpreting

•Event driven programming

•Forms and Javascript

Button

Textbox

Textarea

Dynamic Images

•just as you can use user-initiated events to change the

contents of text areas and text boxes, you can also

dynamically modify images

•<img name="photo" src="happy.gif" alt="Happy Face" />

causes the image stored in the file happy.gif to appear in the page

•you can change the image by reassigning its SRC attribute

similar to the way that text boxes/areas have their VALUE attribute

reassigned

absolute name of an image:

document.images.IMAGE_NAME.src

•document.images.photo.src = "sad.gif";

replaces happy.gif with sad.gif

•note: images do not need to be embedded in forms

Dynamic Image Example

•initially the

image is set to

happy.gif

•when a button is

clicked, the

ChangeImage

function is called

to change the

image

•the new image is

specified by the

parameter to the

function

note the use of single quotes around the file names

to avoid conflicts with the onClick double quotes

Dynamic Image Example Javascript

•So far, we’ve learned about:

•Values and types

•Javascript variables

•Javascript functions

•Expressions

•Write statements

•Assignments

Docsity.com

Partial preview of the text

Download Dynamic Images - Thinking Like Computers - Lecture Slides and more Slides Artificial Intelligence in PDF only on Docsity!

CSCI 100

Think Like Computers

Lecture 19

Fall 2008

Last Time …

• Programming languages

• Compiling vs Interpreting

• Event driven programming

• Forms and Javascript

Button

Textbox

Textarea

Dynamic Images

just as you can use user-initiated events to change the

contents of text areas and text boxes, you can also

dynamically modify images

<img name ="photo" src="happy.gif" alt="Happy Face" /> causes the image stored in the file happy.gif to appear in the page
you can change the image by reassigning its SRC attribute similar to the way that text boxes/areas have their VALUE attribute reassigned absolute name of an image: document. images. IMAGE_NAME. src
document. images. photo .src = "sad.gif"; replaces happy.gif with sad.gif
note: images do not need to be embedded in forms

Dynamic Image Example

initially the image is set to happy.gif
when a button is clicked, the

ChangeImage

function is called to change the image

the new image is specified by the parameter to the function

note the use of single quotes around the file names to avoid conflicts with the onClick double quotes

Dynamic Image Example Javascript

• So far, we’ve learned about:

• Values and types

• Javascript variables

• Javascript functions

• Expressions

• Write statements

• Assignments

Examples

• a = “this is “ + prompt(“Enter your name:”,

“”) + “ calling.”;

• x = f(y) + Math.pow(t, 3);

Conditional Execution

so far, all of the code you have written has been

unconditionally executed

the browser carried out statements in the same set order

in contrast, many programming tasks require code that

reacts differently under varying circumstances or

conditions

e.g., a student's course grade depends upon his/her average e.g., an ESP test requires recognizing when a subject guessed right e.g., the outcome of a game depends upon die rolls or player moves

conditional execution refers to a program’s ability to

execute a statement or sequence of statements only if

some condition holds true

If Statements

• in JavaScript, the simplest form of conditional

statement is the if statement

one action is taken if some condition is true, but a

different action is taken if the condition is not true

(called the else case )

the else case is optional

• general form of the if statement:

Braces in If Statements

some people prefer braces on separate lines formatted like this: if (BOOLEAN_TEST) { STATEMENTS_EXECUTED_IF_TRUE } else { STATEMENTS_EXECUTED_IF_FALSE }
either style is acceptable, but be consistent! properly aligning the code (with if-else lining up and statements indented) is central in producing code that is easy to read and modify
technically, you can omit the braces if there is only one statement however, THIS IS STRONGLY DISCOURAGED! can lead to tricky errors if the code is ever modified

Boolean Tests

• the test that controls an if statement can be any

boolean expression (i.e., an expression that

evaluates to either true or false)

boolean tests are formed using relational operators

because they test the relationships between values

NOTE: == is for comparisons = is for assignments

Boolean Tests

• the boolean test in an if statement determines

the code that will be executed

if the test is true, then the code inside the

subsequent curly braces will execute

if the test is false, then the code inside the curly

braces following the else will execute

note that if the test is false and there is no else case,

the program moves on to the statement directly after

the if

A Cleaner Notation

• when it is necessary to handle a large number of

alternatives, nested if-else statements can

become cumbersome and unwieldy

multiple levels of indentation and curly braces cause

the code to look cluttered make it harder to

read/understand

A Cleaner Notation

example: nested if statements vs. a more readable else-if

Die Roll Example

• consider a Web page that simulates the roll of a

single die

will use an image to display the die

will use a button to initiate the die roll

when the user clicks the button,

a random die roll is selected and

the corresponding image is displayed

Die Roll Page

the RandomInt

function from

random.js is used

to select the random

roll

depending on the roll

value, the correct

image is displayed

since more than two

possibilities, a

cascading if-else is

needed

Generalizing Code

note that each case in the cascading if-else follows the

same pattern

if (roll == 1) { document.images.die.src = “http://www.pics.com/Images/die1.gif"; } else if (roll == 2) { document.images.die.src = "http://www.pics.com/Images/die2.gif"; } else if (roll == 3) { document.images.die.src = "http://www.pics.com/Images/die3.gif"; } else if (roll == 4) { document.images.die.src = "http://www.pics.com/Images/die4.gif"; } else if (roll == 5) { document.images.die.src = "http://www.pics.com/Images/die5.gif"; } else { document.images.die.src = "http://www.pics.com/Images/die6.gif"; }

this entire cascading if-else structure could be replaced

by the following:

document.images.die.src = “http://www.pics.com/Images/die" + roll + ".gif";

Counters

• in software applications, if statements are often

used to count occurrences of conditional or

user-initiated events

e.g., count the number of times dice rolls come up

doubles

e.g., count the number of times the user guesses a

number correctly

Counters

• any variable that is used to record occurrences

of an event is known as a counter

initially, the counter is set to zero

each time the specified action occurs, the counter is

incremented

after a given time period, the value stored in the

counter will tell you the number of times the desired

event took place

Logical Connectives

sometimes, simple comparisons between two values may not be adequate to express the conditions under which code should execute
JavaScript provides operators for expressing multipart tests logical AND (&&): represents the conjunction of two things (TEST1 && TEST2) is true if both TEST1 and TEST2 are true if (roll1 == 4 && roll2 == 4) { // code to be executed when double fours are rolled } logical OR (||): represents the disjunction of two things (TEST1 && TEST2) is true if either TEST1 or TEST2 are true if (roll1 == 4 || roll2 == 4) { // code to be executed when at least one four is rolled } logical NOT (!): represents negation (!TEST1) is true only if TEST1 is false if (!(roll1 == 4 || roll2 == 4)) { // code to be executed when neither roll is a four }

Dynamic Images - Thinking Like Computers - Lecture Slides, Slides of Artificial Intelligence

Related documents

Partial preview of the text

Download Dynamic Images - Thinking Like Computers - Lecture Slides and more Slides Artificial Intelligence in PDF only on Docsity!

CSCI 100

Think Like Computers

Lecture 19

Fall 2008

Last Time …

• Programming languages

• Compiling vs Interpreting

• Event driven programming

• Forms and Javascript

 Button

 Textbox

 Textarea

Dynamic Images

contents of text areas and text boxes, you can also

dynamically modify images

Dynamic Image Example

ChangeImage

Dynamic Image Example Javascript

• So far, we’ve learned about:

• Values and types

• Javascript variables

• Javascript functions

• Expressions

• Write statements

• Assignments

Examples

• a = “this is “ + prompt(“Enter your name:”,

“”) + “ calling.”;

• x = f(y) + Math.pow(t, 3);

Conditional Execution

unconditionally executed

reacts differently under varying circumstances or

conditions

execute a statement or sequence of statements only if

some condition holds true

If Statements

• in JavaScript, the simplest form of conditional

statement is the if statement

 one action is taken if some condition is true, but a

different action is taken if the condition is not true

(called the else case )

 the else case is optional

• general form of the if statement:

Braces in If Statements

Boolean Tests

• the test that controls an if statement can be any

boolean expression (i.e., an expression that

evaluates to either true or false)

 boolean tests are formed using relational operators

because they test the relationships between values

Boolean Tests

• the boolean test in an if statement determines

the code that will be executed

 if the test is true, then the code inside the

subsequent curly braces will execute

 if the test is false, then the code inside the curly

braces following the else will execute

 note that if the test is false and there is no else case,

the program moves on to the statement directly after

the if

A Cleaner Notation

• when it is necessary to handle a large number of

alternatives, nested if-else statements can

become cumbersome and unwieldy

 multiple levels of indentation and curly braces cause

the code to look cluttered make it harder to

read/understand

A Cleaner Notation

Die Roll Example

• consider a Web page that simulates the roll of a

single die

 will use an image to display the die

 will use a button to initiate the die roll

when the user clicks the button,

a random die roll is selected and

the corresponding image is displayed

Button

Textbox

Textarea

one action is taken if some condition is true, but a

the else case is optional

boolean tests are formed using relational operators

if the test is true, then the code inside the

if the test is false, then the code inside the curly

note that if the test is false and there is no else case,

multiple levels of indentation and curly braces cause

will use an image to display the die

will use a button to initiate the die roll

e.g., count the number of times dice rolls come up

e.g., count the number of times the user guesses a

initially, the counter is set to zero

each time the specified action occurs, the counter is

after a given time period, the value stored in the

it is used to control the execution of other

provides for conditional execution

is useful for solving problems that involve

either do this or don't, based on some condition (if)

either do this or do that, based on some condition

many problems involve repeating some task

e.g., rolling dice until a 7 is obtained

e.g., repeatedly prompting the user for a valid

in JavaScript, while loops provide for

however, the statements inside a while loop’s

general form:

if the test succeeds, then the statements inside

once all the statements have been executed,