Merge pull request #878 from bl-nero/manual-2
Complete Chapter I of the LaTeX version of the manual.dev
Po Szerokość: | Wysokość: | Rozmiar: 27 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 9.0 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 974 B |
Po Szerokość: | Wysokość: | Rozmiar: 1.1 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 1.1 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 1.0 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 1.0 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 284 KiB |
|
@ -0,0 +1,177 @@
|
|||
\usepackage[T1]{fontenc}
|
||||
\usepackage[utf8]{inputenc}
|
||||
\usepackage{baskervald} % Default font
|
||||
\usepackage[onehalfspacing]{setspace}
|
||||
\usepackage{graphicx}
|
||||
\usepackage{color}
|
||||
\usepackage{textcomp}
|
||||
\usepackage[hidelinks, pdfusetitle]{hyperref}
|
||||
\usepackage{float}
|
||||
\usepackage{ltxcmds}
|
||||
\usepackage{fp}
|
||||
\usepackage{tikz}
|
||||
\usepackage{etoolbox}
|
||||
% We frequently prevent page breaks before pictures, and it has a tendency to create a lot of widowed lines. Let's prevent it from happening.
|
||||
\usepackage[all]{nowidow}
|
||||
|
||||
\usetikzlibrary{calc}
|
||||
\usetikzlibrary{fit}
|
||||
|
||||
% This macro produces a "Snap!" logo.
|
||||
%
|
||||
% Note that in Polish (and other languages), nouns are inflected. The form "Snap!" with suffix looks plain stupid, so the macro takes a suffix as argument. If the suffix is non-empty, no exclamation mark is generated, and the suffix is used instead.
|
||||
\newcommand{\Snap}[1]{%
|
||||
\textsf{%
|
||||
Snap%
|
||||
\ifx\\#1\\\textit{!\@}%
|
||||
\else #1%
|
||||
\fi%
|
||||
}%
|
||||
}
|
||||
|
||||
\newcommand{\code}[1]{\textsf{\textbf{#1}}}
|
||||
\makeatletter
|
||||
\newcommand{\defaultGraphicsScale}{0.6}
|
||||
\makeatother
|
||||
|
||||
\renewcommand{\thechapter}{\Roman{chapter}}
|
||||
\renewcommand{\thesection}{\Alph{section}}
|
||||
\renewcommand{\thesubsection}{}
|
||||
|
||||
\makeatletter
|
||||
\edef\defaultFontSize{\f@size}
|
||||
|
||||
% A dirty hack: Apparently, this is the only way to multiply a length by a constant factor in the code below. What a mess.
|
||||
\newdimen\raiseLength
|
||||
|
||||
\newcommand{\inlinepicraised}[3]{%
|
||||
{%
|
||||
\FPeval\fontSizeRatio{\f@size / \defaultFontSize}%
|
||||
\FPeval\scale{#3 * \fontSizeRatio}%
|
||||
\raiseLength=#2%
|
||||
\raisebox{\fontSizeRatio\raiseLength}{%
|
||||
\includegraphics[scale=\scale]{#1}%
|
||||
}%
|
||||
}%
|
||||
% Add kerns if the next character is punctuation.
|
||||
\ltx@ifnextchar@nospace.{\,}{%
|
||||
\ltx@ifnextchar@nospace,{\,}{%
|
||||
}%
|
||||
}%
|
||||
}
|
||||
\makeatother
|
||||
|
||||
\newcommand{\inlinepic}[2][\defaultGraphicsScale]{%
|
||||
\inlinepicraised{#2}{-4pt}{#1}%
|
||||
}
|
||||
|
||||
\newcommand{\inlinereporterpic}[2][\defaultGraphicsScale]{%
|
||||
\inlinepicraised{#2}{-1.5pt}{#1}%
|
||||
}
|
||||
|
||||
\newcommand{\bigpic}[1]{
|
||||
\begin{figure}[H]
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{#1}
|
||||
\end{figure}
|
||||
}
|
||||
|
||||
\newcommand{\manualtitlepage}[2][]{ {
|
||||
\def\title{#2}
|
||||
\def\translator{#1}
|
||||
|
||||
\begin{titlepage}
|
||||
|
||||
\pgfdeclarelayer{background}
|
||||
\pgfsetlayers{background,main}
|
||||
\begin{tikzpicture}[remember picture, overlay, text depth=0]
|
||||
|
||||
\definecolor{title blue}{HTML}{206C8F}
|
||||
\definecolor{title orange}{HTML}{F59201}
|
||||
\pgfdeclareimage[width=0.2\textwidth]{logo}{../common/logo}
|
||||
\pgfdeclareimage{cover picture}{../common/cover-picture}
|
||||
\coordinate (NW) at ($(current page.north west) + (0.5, -0.5)$);
|
||||
\coordinate (NE) at ($(current page.north east) + (-0.5, -0.5)$);
|
||||
\coordinate (SW) at ($(current page.south west) + (0.5, 0.5)$);
|
||||
\coordinate (SE) at ($(current page.south east) + (-0.5, 0.5)$);
|
||||
|
||||
% Logo at the top left corner.
|
||||
\node[
|
||||
below right,
|
||||
align=left,
|
||||
font=\Large,
|
||||
execute at begin node=\setlength\baselineskip{3ex}]
|
||||
at ($(NW) + (1.5, -1.5)$) {
|
||||
\pgfuseimage{logo}\\
|
||||
Build Your Own Blocks
|
||||
};
|
||||
|
||||
% Version number.
|
||||
\node[
|
||||
below right,
|
||||
color=white,
|
||||
font=\fontsize{40pt}{48pt}\selectfont]
|
||||
at ($(NE) - (7, 5)$) {
|
||||
4.0
|
||||
};
|
||||
|
||||
% Title. Note: the % at the end is necessary for correct spacing between the text and orange background.
|
||||
\node[
|
||||
left,
|
||||
text=white,
|
||||
align=right,
|
||||
inner sep=15pt,
|
||||
font=\fontsize{40pt}{42pt}\selectfont]
|
||||
(title text)
|
||||
at ($(NE) - (1.5, 9)$) {
|
||||
\title%
|
||||
};
|
||||
|
||||
% The cover picture.
|
||||
\node[below left, inner sep=0] (cover picture)
|
||||
at ($(NE) - (0, 12)$) {
|
||||
\pgfuseimage{cover picture}
|
||||
};
|
||||
\draw[white, ultra thick]
|
||||
(cover picture.north west) -- (cover picture.north east);
|
||||
\draw[white, ultra thick]
|
||||
(cover picture.south west) -- (cover picture.south east);
|
||||
|
||||
% Authors.
|
||||
\node[above right, color=white, align=left, font=\Large]
|
||||
at ($(SE) + (-7, 3)$) {
|
||||
Brian Harvey\\
|
||||
Jens M\"onig
|
||||
};
|
||||
|
||||
% Translator.
|
||||
\ifdefempty{\translator}{}{
|
||||
\node [below right, color=white, align=left, font=\large]
|
||||
at ($(SE) + (-7, 2)$) {
|
||||
\translator
|
||||
};
|
||||
}
|
||||
|
||||
\begin{pgfonlayer}{background}
|
||||
% Blue bar on the right.
|
||||
\fill[title blue] ($(NE) - (7.5, 0)$) rectangle (SE);
|
||||
|
||||
% Title background stretches to the left until it reaches the left edge, which means (NW.x, title text.west.y).
|
||||
\coordinate (title background left point)
|
||||
at (NW |- title text.west);
|
||||
% Orange title background.
|
||||
\node[
|
||||
fit=(title text) (title background left point),
|
||||
shape=rectangle,
|
||||
fill=title orange,
|
||||
text=white,
|
||||
draw=white,
|
||||
ultra thick,
|
||||
align=right,
|
||||
inner sep=0,
|
||||
font=\fontsize{40pt}{42pt}\selectfont] {};
|
||||
\end{pgfonlayer}
|
||||
|
||||
\end{tikzpicture}
|
||||
\end{titlepage}
|
||||
} }
|
Po Szerokość: | Wysokość: | Rozmiar: 2.9 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 12 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 9.4 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 7.9 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 1.4 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 6.3 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 3.3 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 13 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 16 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 1.2 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 22 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 6.4 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 2.3 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 15 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 2.3 KiB |
Przed Szerokość: | Wysokość: | Rozmiar: 2.5 KiB Po Szerokość: | Wysokość: | Rozmiar: 2.5 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 4.0 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 5.0 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 2.1 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 3.5 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 2.8 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 1.2 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 6.2 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 11 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 16 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 8.3 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 4.3 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 8.5 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 3.3 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 15 KiB |
|
@ -0,0 +1,374 @@
|
|||
\documentclass{report}
|
||||
|
||||
\input{../common/defs.tex}
|
||||
|
||||
\begin{document}
|
||||
|
||||
\title{Snap! Reference Manual}
|
||||
\author{Brian Harvey\texorpdfstring{ \and}{,} Jens M\"onig}
|
||||
\date{}
|
||||
|
||||
\manualtitlepage{Snap! Reference Manual}
|
||||
|
||||
\tableofcontents
|
||||
|
||||
\chapter*{}
|
||||
\section*{Acknowledgements}
|
||||
|
||||
We have been extremely lucky in our mentors. Jens cut his teeth in the company of the Smalltalk pioneers: Alan Kay, Dan Ingalls, and the rest of the gang who invented personal computing and object oriented programming in the great days of Xerox PARC. He worked with John Maloney, of the MIT Scratch Team, who developed the Morphic graphics framework that's still at the heart of \Snap{}. The brilliant design of Scratch, from the Lifelong Kindergarten Group at the MIT Media Lab, is crucial to \Snap{}.
|
||||
|
||||
\textbf{\emph{Our earlier version, BYOB, was a direct modification of the Scratch source code. \Snap{} is a complete rewrite, but its code structure and its user interface remain deeply indebted to Scratch. And the Scratch Team, who could have seen us as rivals, have been entirely supportive and welcoming to us.}}
|
||||
|
||||
Brian grew up at the MIT and Stanford Artificial Intelligence Labs, learning from Lisp inventor John McCarthy, Scheme inventors Gerald~J. Sussman and Guy Steele, and the authors of the world's best computer science book, \textit{Structure and Interpretation of Computer Programs}, Hal Abelson and Gerald~J. Sussman with Julie Sussman, among many other heroes of computer science.
|
||||
|
||||
\textbf{\emph{In the glory days of the MIT Logo Lab, we used to say, ``Logo is Lisp disguised as BASIC.'' Now, with its first class procedures, lexical scope, and first class continuations, \Snap{} is Scheme disguised as Scratch.}}
|
||||
|
||||
We have been fortunate to get to know an amazing group of brilliant middle school (!\@) and high school students through the Scratch Advanced Topics forum, several of whom have contributed code to \Snap{}: Kartik Chandra, Nathan Dinsmore, Connor Hudson, and Ian Reynolds. Many more have contributed ideas and alpha-testing bug reports. UC Berkeley students who've contributed code include Michael Ball, Achal Dave, Kyle Hotchkiss, Ivan Motyashov, and Yuan Yuan. Contributors of translations are too numerous to list here, but they're in the ``About\ldots'' box in \Snap{} itself.
|
||||
|
||||
This work was supported in part by the National Science Foundation grant 1143566, and in part by MioSoft.
|
||||
|
||||
\clearpage
|
||||
|
||||
\begin{center}
|
||||
\bf \Huge \Snap{} Reference Manual \\
|
||||
\huge Version 4.0
|
||||
\vspace{40pt}
|
||||
\end{center}
|
||||
|
||||
\Snap{} (formerly BYOB) is an extended reimplementation of Scratch (\url{http://scratch.mit.edu}) that allows you to Build Your Own Blocks. It also features first class lists, first class procedures, and continuations. These added capabilities make it suitable for a serious introduction to computer science for high school or college students.
|
||||
|
||||
To run \Snap{}, open a browser window and connect to either \url{http://snap.berkeley.edu/run} to start with a minimal set of blocks or \url{http://snap.berkeley.edu/init} to load a small set of additional blocks (a little slower startup, but recommended for convenience and assumed in this manual).
|
||||
|
||||
\clearpage
|
||||
|
||||
\chapter{Blocks, Scripts, and Sprites}
|
||||
|
||||
This chapter describes the \Snap{} features inherited from Scratch; experienced Scratch users can skip to section~\ref{sec:nesting-sprites}.
|
||||
|
||||
\Snap{} is a programming language---a notation in which you can tell a computer what you want it to do. Unlike most programming languages, though, \Snap{} is a visual language; instead of writing a program using the keyboard, the \Snap{} programmer uses the same drag-and-drop interface familiar to computer users.
|
||||
|
||||
Start \Snap{}. You should see the following arrangement of regions in the window:\nopagebreak
|
||||
|
||||
\begin{center}
|
||||
\includegraphics[width=\textwidth]{window-regions}
|
||||
\end{center}
|
||||
|
||||
(The proportions of these areas may be different, depending on the size and shape of your browser window.)
|
||||
|
||||
A \Snap{} program consists of one or more \emph{scripts}, each of which is made of \emph{blocks}. Here's a typical script:\nopagebreak
|
||||
|
||||
\label{fig:typical-script}
|
||||
\bigpic{typical-script}
|
||||
|
||||
The five blocks that make up this script have three different colors, corresponding to three of the eight \emph{palettes} in which blocks can be found. The palette area at the left edge of the window shows one palette at a time, chosen with the eight buttons just above the palette area. In this script, the gold blocks are from the Control palette; the green block is from the Pen palette; and the blue blocks are from the Motion palette. A script is assembled by dragging blocks from a palette into the \emph{scripting area} in the middle part of the window. Blocks snap together (hence the name \Snap{} for the language) when you drag a block so that its indentation is near the tab of the one above it:\nopagebreak
|
||||
|
||||
\bigpic{snapping-blocks}
|
||||
|
||||
The white horizontal line is a signal that if you let go of the green block it will snap into the tab of the gold one.
|
||||
|
||||
\subsection{Hat Blocks and Command Blocks}
|
||||
|
||||
At the top of the script is a \emph{hat} block, which indicates when the script should be carried out. Hat block names typically start with the word ``\code{when}''; in this example, the script should be run when the green flag near the right end of the \Snap{} tool bar is clicked. (The \Snap{} tool bar is part of the \Snap{} window, not the same as the browser's or operating system's menu bar.) A script isn't required to have a hat block, but if not, then the script will be run only if the user clicks on the script itself. A script can't have more than one hat block, and the hat block can be used only at the top of the script; its distinctive shape is meant to remind you of that.
|
||||
|
||||
The other blocks in this script are \emph{command} blocks. Each command block corresponds to an action that \Snap{} already knows how to carry out. For example, the block \inlinepic{move-10-steps} tells the sprite (the arrowhead shape on the \emph{stage} at the right end of the window) to move ten steps (a step is a very small unit of distance) in the direction in which the arrowhead is pointing. We'll see shortly that there can be more than one sprite, and that each sprite has its own scripts. Also, a sprite doesn't have to look like an arrowhead, but can have any picture as a costume. The shape of the \code{move} block is meant to remind you of a Lego\texttrademark{} brick; a script is a stack of blocks. (The word ``block'' denotes both the graphical shape on the screen and the procedure, the action, that the block carries out.)
|
||||
|
||||
The number~$10$ in the \code{move} block above is called an \emph{input} to the block. By clicking on the white oval, you can type any number in place of the $10$. The sample script on page~\pageref{fig:typical-script} uses $100$ as the input value. We'll see later that inputs can have non-oval shapes that accept values other than numbers. We'll also see that you can compute input values, instead of typing a particular value into the oval. A block can have more than one input slot. For example, the \code{glide} block located about halfway down the Motion palette has three inputs.
|
||||
|
||||
Most command blocks have that brick shape, but some, like the \code{repeat} block in the sample script, are \emph{C-shaped}. Most C-shaped blocks are found in the Control palette. The slot inside the C shape is a special kind of input slot that accepts a \emph{script} as the input. In the sample script, the \code{repeat} block has two inputs: the number $4$ and the script\nopagebreak
|
||||
|
||||
\bigpic{typical-script-inner}
|
||||
|
||||
\section{Sprites and Parallelism}
|
||||
|
||||
Just below the stage is the ``new sprite'' button \inlinepic{../common/btn-new-sprite}. Click the button to add a new sprite to the stage. The new sprite will appear in a random position on the stage, facing in a random direction, with a random color.
|
||||
|
||||
Each sprite has its own scripts. To see the scripts for a particular sprite in the scripting area, click on the picture of that sprite in the \emph{sprite corral} in the bottom right corner of the window. Try putting one of the following scripts in each sprite's scripting area:\nopagebreak
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{sprites-and-parallelism-1}
|
||||
\end{minipage}%
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{sprites-and-parallelism-2}
|
||||
\end{minipage}
|
||||
\end{figure}
|
||||
|
||||
When you click the green flag \inlinepic{../common/btn-start}, you should see one sprite rotate while the other moves back and forth. This experiment illustrates the way different scripts can run in parallel. The turning and the moving happen together. Parallelism can be seen with multiple scripts of a single sprite also. Try this example:\nopagebreak
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{sprites-and-parallelism-3}
|
||||
\end{minipage}%
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{sprites-and-parallelism-4}
|
||||
\end{minipage}
|
||||
\end{figure}
|
||||
|
||||
When you press the space key, the sprite should turn forever in a circle, because the \code{move} and \code{turn} blocks are run in parallel. (To stop the program, click the red stop sign \inlinepic{../common/btn-stop} at the right end of the tool bar.)
|
||||
|
||||
\subsection{Costumes and Sounds}
|
||||
|
||||
To change the appearance of a sprite, import a new \emph{costume} for it. There are three ways to do this. First, select the desired sprite in the sprite corral. Then, one way is to click on the file icon \inlinepic{../common/btn-file} in the tool bar, then choose the ``\code{Costumes\ldots}'' menu item. You will see a list of costumes from the public media library, and can choose one. The second way, for a costume stored on your own computer, is too click on the file icon and choose the ``\code{Import\ldots}'' menu item. You can then select a file in any picture format (PNG, JPEG, etc.) supported by your browser. The third way is quicker if the file you want is visible on the desktop: Just drag the file onto the \Snap{} window. In any of these cases, the scripting area will be replaced by something like this:\nopagebreak
|
||||
|
||||
\bigpic{scripting-area-with-additional-costume}
|
||||
|
||||
Just above this part of the window is a set of three tabs: Scripts, Costumes, and Sounds. You'll see that the Costumes tab is now selected. In this view, the sprite's \emph{wardrobe}, you can choose whether the sprite should wear its Turtle costume or its Alonzo costume. (Alonzo, the \Snap{} mascot, is named after Alonzo Church, a mathematician who invented the idea of procedures as data, the most important way in which \Snap{} is different from Scratch.) You can give a sprite as many costumes as you like, and then choose which it will wear either by clicking in its wardrobe or by using the \inlinepic{switch-to-costume-turtle} or \inlinepic{next-costume} block in a script. (Every costume has a number as well as a name. The \code{next costume} block selects the next costume by number; after the highest-numbered costume it switches to costume~1. The Turtle, costume~0, is never chosen by \code{next costume}.) The Turtle costume is the only one that changes color to match a change in the sprite's pen color.
|
||||
|
||||
In addition to its costumes, a sprite can have \emph{sounds}; the equivalent for sounds of the sprite's wardrobe is called its \emph{jukebox}. Sound files can be imported in any format (WAV, OGG, MP3, etc.) supported by your browser. Two blocks accomplish the task of playing sounds. If you would like a script to continue running while the sound is playing, use the block \inlinepic{play-sound-help}. In contrast, you can use the \inlinepic{play-sound-help-until-done} block to wait for the sound's completion before continuing the rest of the script.
|
||||
|
||||
\subsection{Inter-Sprite Communication with Broadcast}
|
||||
|
||||
Earlier we saw an example of two sprites moving at the same time. In a more interesting program, though, the sprites on stage will interact to tell a story, play a game, etc. Often one sprite will have to tell another sprite to run a script. Here's a simple example:\nopagebreak
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics[scale=0.4]{../common/boy1-walking}
|
||||
\end{minipage}%
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\reflectbox{\includegraphics[scale=0.3]{../common/dog2-c}}
|
||||
\end{minipage}
|
||||
|
||||
\vspace{3ex}
|
||||
\begin{minipage}[t]{0.5\textwidth}
|
||||
\centering
|
||||
\vspace{0pt} % REALLY align to top
|
||||
\includegraphics[scale=\defaultGraphicsScale]{inter-sprite-communication-1}
|
||||
\end{minipage}%
|
||||
\begin{minipage}[t]{0.5\textwidth}
|
||||
\centering
|
||||
\vspace{0pt} % REALLY align to top
|
||||
\includegraphics[scale=\defaultGraphicsScale]{inter-sprite-communication-2}
|
||||
\end{minipage}
|
||||
\end{figure}
|
||||
|
||||
In the \inlinepic{broadcast-bark-and-wait} block, the word ``bark'' is just an arbitrary name I made up. When you click on the downward arrowhead in that input slot, one of the choices (the only choice, the first time) is ``\code{new},'' which then prompts you to enter a name for the new broadcast. When this block is run, the chosen message is sent to \emph{every} sprite, which is why the block is called ``broadcast.'' In this program, though, only one sprite has a script to run when that broadcast is sent, namely the dog. Because the boy's script uses \code{broadcast and wait} rather than just \code{broadcast}, the boy doesn't go on to his next \code{say} block until the dog's script finishes. That's why the two sprites take turns talking, instead of both talking at once.
|
||||
|
||||
Notice, by the way, that the \code{say} block's first input slot is rectangular rather than oval. This means the input can be any text string, not only a number. In the text input slots, a space character is shown as a brown dot, so that you can count the number of spaces between words, and in particular you can tell the difference between an empty slot and one containing spaces. The brown dots are \emph{not} shown on the stage when the block is run.
|
||||
|
||||
The stage has its own scripting area. It can be selected by clicking on the Stage icon at the left of the sprite corral. Unlike a sprite, though, the stage can't move. Instead of costumes, it has \emph{backgrounds}: pictures that fill the entire stage area. The sprites appear in front of the current background. In a complicated project, it's often convenient to use a script in the stage's scripting area as the overall director of the action.
|
||||
|
||||
\section{Nesting Sprites: Anchors and Parts}
|
||||
\label{sec:nesting-sprites}
|
||||
|
||||
Sometimes it's desirable to make a sort of ``super-sprite'' composed of pieces that can move together but can also be separately articulated. The classic example is a person's body made up of a torso, limbs, and a head. \Snap{} allows one sprite to be designated as the \emph{anchor} of the combined shape, with other sprites as its \emph{parts}. To set up sprite nesting, drag the sprite corral icon of a \emph{part} sprite onto the stage display (not the sprite corral icon!) of the desired \emph{anchor} sprite.
|
||||
|
||||
Sprite nesting is shown in the sprite corral icons of both anchors and parts:\nopagebreak
|
||||
|
||||
\bigpic{nested-sprites-in-corral}
|
||||
|
||||
In this illustration, it is desired to animate Alonzo's arm. (The arm has been colored green in this picture to make the relationship of the two sprites clearer, but in a real project they'd be the same color, probably.) Sprite1, representing Alonzo's body, is the anchor; Sprite2 is the arm. The icon for the anchor shows small images of up to three attached parts at the bottom. The icon for each part shows a small image of the anchor in its top left corner, and a \emph{synchronous rotation flag} in the top right corner. In its initial setting, as shown above, it means that the when the anchor sprite rotates, the part sprite also rotates as well as revolving around the anchor. When clicked, it changes from a circular arrow to a straight arrow, and indicates that when the anchor sprite rotates, the part sprite revolves around it, but does not rotate, keeping its original orientation. (The part can also be rotated separately, using its \code{turn} blocks.) Any change in the position or size of the anchor is always extended to its parts.
|
||||
|
||||
\begin{figure}[H]
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{hand-waving-command}%
|
||||
\hspace{2em}%
|
||||
\includegraphics[scale=0.4]{../common/alonzo-waving}
|
||||
\end{figure}
|
||||
|
||||
\section{Reporter Blocks and Expressions}
|
||||
|
||||
So far, we've used two kinds of blocks: hat blocks and command blocks. Another kind is the \emph{reporter} block, which has an oval shape: \inlinereporterpic{x-position}. It's called a ``reporter'' because when it's run, instead of carrying out an action, it reports a value that can be used as an input to another block. If you drag a reporter into the scripting area by itself and click on it, the value it reports will appear in a speech balloon next to the block:\nopagebreak
|
||||
|
||||
\bigpic{x-position-returns-a-number}
|
||||
|
||||
When you drag a reporter block over another block's input slot, a white ``halo'' appears around that input slot, analogous to the white line that appears when snapping command blocks together. Here's a simple script that uses a reporter block:\nopagebreak
|
||||
|
||||
\begin{figure}[H]
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{example-script-that-uses-a-reporter}%
|
||||
\hspace{2em}%
|
||||
\includegraphics{../common/turtle-says-its-position}
|
||||
\end{figure}
|
||||
|
||||
Here the \code{x position} reporter provides the first input to the \code{say} block. (The sprite's X position is its horizontal position, how far left (negative values) or right (positive values) it is compared to the center of the stage. Similarly, the Y position is measured vertically, in steps above (positive) or below (negative) the center.)
|
||||
|
||||
You can do arithmetic using reporters in the Operators palette:\nopagebreak
|
||||
|
||||
\begin{figure}[H]
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{using-reporters-for-arithmetic}%
|
||||
\hspace{2em}%
|
||||
\includegraphics{../common/turtle-says-its-rounded-position}
|
||||
\end{figure}
|
||||
|
||||
The \code{round} block rounds $35.3905\ldots$ to $35$, and the \code{+}~block adds $100$ to that. (By the way, the \code{round} block is in the Operators palette, just like~\code{+}, but in this script it's a lighter color with black lettering because \Snap{} alternates light and dark versions of the palette colors when a block is nested inside another block from the same palette:\nopagebreak
|
||||
|
||||
\bigpic{zebra-coloring}
|
||||
|
||||
This aid to readability is called \emph{zebra coloring}.) A reporter block with its inputs, maybe including other reporter blocks, such as \inlinepic{round-x-position-plus-100}, is called an \emph{expression}.
|
||||
|
||||
\section{Predicates and Conditional Evaluation}
|
||||
|
||||
Most reporters report either a number, like \inlinereporterpic{plus}, or a text string, like \inlinereporterpic{join-hello-world}. A \emph{predicate} is a special kind of reporter that always reports \code{true} or \code{false}. Predicates have a hexagonal shape:\nopagebreak
|
||||
|
||||
\bigpic{mouse-down}
|
||||
|
||||
The special shape is a reminder that predicates don't generally make sense in an input slot of blocks that are expecting a number or text. You wouldn't say \inlinepic{move-mouse-down-steps}, although (as you can see from the picture) \Snap{} lets you do it if you really want. Instead, you normally use predicates in special hexagonal input slots like this one:\nopagebreak
|
||||
|
||||
\bigpic{if}
|
||||
|
||||
The C-shaped \code{if} block runs its input script if (and only if) the expression in its hexagonal input reports \code{true}.\nopagebreak
|
||||
|
||||
\bigpic{predicates-and-conditional-evaluation-1}
|
||||
|
||||
A really useful block in animations runs its input script \emph{repeatedly} until a predicate is satisfied:\nopagebreak
|
||||
|
||||
\bigpic{predicates-and-conditional-evaluation-2}
|
||||
|
||||
If, while working on a project, you want to omit temporarily some commands in a script, but you don't want to forget where they belong, you can say\nopagebreak
|
||||
|
||||
\bigpic{predicates-and-conditional-evaluation-3}
|
||||
|
||||
Sometimes you want to take the same action whether some condition is true or false, but with a different input value. For this purpose you can use the \emph{reporter} \code{if} block:\footnote{\onehalfspacing If you don't see it in the Control palette, click on the File button \inlinepic{../common/btn-file} in the Tool Bar and choose ``Import tools.''}\nopagebreak
|
||||
|
||||
\bigpic{predicates-and-conditional-evaluation-4}
|
||||
|
||||
The technical term for a \code{true} or \code{false} value is a ``Boolean'' value; it has a capital~B because it's named after a person, George Boole, who developed the mathematical theory of Boolean values. Don't get confused; a hexagonal block is a \emph{predicate}, but the value it reports is a \emph{Boolean}.
|
||||
|
||||
Another quibble about vocabulary: Many programming languages reserve the name ``procedure'' for Commands (that carry out an action) and use the name ``function'' for Reporters and Predicates. In this manual, a \emph{procedure} is any computational capability, including those that report values and those that don't. Commands, Reporters, and Predicates are all procedures. The words ``a Procedure type'' are shorthand for ``Command type, Reporter type, or Predicate type.''
|
||||
|
||||
\section{Variables}
|
||||
|
||||
Try this script:\footnote{The \code{for} block is also in the tools library; choose ``\code{Import tools}'' from the file menu if you don't have it in the Control palette.}\nopagebreak
|
||||
|
||||
\bigpic{squiral-script}
|
||||
|
||||
The input to the \code{move} block is an orange oval. To get it there, drag the orange oval that's part of the \code{for} block:\nopagebreak
|
||||
|
||||
\bigpic{variable-dragging}
|
||||
|
||||
The orange oval is a \emph{variable}: a symbol that represents a value. (I took this screenshot before changing the second number input to the \code{for} block from the default $10$ to $200$, and before dragging in a \code{turn} block.) \code{For} runs its script input repeatedly, just like \code{repeat}, but before each repetition it sets the variable \code{i} to a number starting with its first numeric input, adding $1$ for each repetition, until it reaches the second numeric input. In this case, there will be $200$ repetitions, first with $\code{i}=1$, then with $\code{i}=2$, then $3$, and so on until $\code{i}=200$ for the final repetition. The result is that each \code{move} draws a longer and longer line segment, and that's why the picture you see is a kind of spiral. (If you try again with a turn of $90$ degrees instead of $92$, you'll see why this picture is called a ``squiral.'')
|
||||
|
||||
The variable~\code{i} is created by the \code{for} block, and it can only be used in the script inside the block's C-slot. (By the way, if you don't like the name~\code{i}, you can change it by clicking on the orange oval without dragging it, which will pop up a dialog window in which you can enter a different name:\nopagebreak
|
||||
|
||||
\bigpic{script-variable-name-dialog}
|
||||
|
||||
``\code{I}'' isn't a very descriptive name; you might prefer ``\code{length}'' to indicate its purpose in the script. ``\code{I}'' is traditional because mathematicians tend to use letters between~\code{i} and~\code{n} to represent integer values, but in programming languages we don't have to restrict ourselves to single-letter variable names.)
|
||||
|
||||
\subsection{Global Variables}
|
||||
|
||||
You can create variables ``by hand'' that aren't limited to being used within a single block. At the top of the Variables palette, click the ``\code{Make a variable}'' button:\nopagebreak
|
||||
|
||||
\bigpic{make-a-variable}
|
||||
|
||||
This will bring up a dialog window in which you can give your variable a name:\nopagebreak
|
||||
|
||||
\bigpic{variable-name-dialog}
|
||||
|
||||
The dialog also gives you a choice to make the variable available to all sprites (which is almost always what you want) or to make it visible only in the current sprite. You'd do that if you're going to give several sprites individual variables \emph{with the same name}, so that you can share a script between sprites (by dragging it from the current sprite's scripting area to the picture of another sprite in the sprite corral), and the different sprites will do slightly different things when running that script because each has a different value for that variable name.
|
||||
|
||||
If you give your variable the name ``\code{name}'' then the Variables palette will look like this:\nopagebreak
|
||||
|
||||
\bigpic{variable-on-a-palette}
|
||||
|
||||
There's now a ``\code{Delete a variable}'' button, and there's an orange oval with the variable name in it, just like the orange oval in the \code{for} block. You can drag the variable into any script in the scripting area. Next to the oval is a checkbox, initially checked. When it's checked, you'll also see a \emph{variable watcher} on the stage:\nopagebreak
|
||||
|
||||
\bigpic{variable-watcher}
|
||||
|
||||
When you give the variable a value, the orange box in its watcher will display the value.
|
||||
|
||||
\emph{How} do you give it a value? You use the \code{set} block:\nopagebreak
|
||||
|
||||
\bigpic{ask-and-set}
|
||||
|
||||
Note that you \emph{don't} drag the variable's oval into the \code{set} block! You click on the down arrow in the first input slot, and you get a menu of all the available variable names.
|
||||
|
||||
\subsection{Script Variables}
|
||||
|
||||
In that example, our project is going to carry on an interaction with the user, and we want to remember her name throughout the project. That's a good example of a situation in which a \emph{global} variable (the kind you make with the ``\code{Make a variable}'' button) is appropriate. Another common example is a variable called ``\code{score}'' in a game project. But sometimes you only need a variable temporarily, during the running of a particular script. In that case you can use the \code{script variables} block to make the variable:\nopagebreak
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{wiggling-line-script}%
|
||||
\end{minipage}%
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics{../common/wiggling-line}
|
||||
\end{minipage}%
|
||||
\end{figure}
|
||||
|
||||
As in the \code{for} block, you can click on an orange oval in the \code{script variables} block without dragging to change its name. You can also make more than one temporary variable by clicking on the right arrow at the end of the block to add another variable oval:\nopagebreak
|
||||
|
||||
\bigpic{script-variables-a-b-c}
|
||||
|
||||
\section{Etcetera}
|
||||
|
||||
This manual doesn't explain every block in detail. There are many more motion blocks, sound blocks, costume and graphics effects blocks, and so on. You can learn what they all do by experimentation, and also by reading the ``help screens'' that you can get by right-clicking or control-clicking a block and selecting ``\code{help\ldots}'' from the menu that appears. If you forget what palette (color) a block is, but you remember at least part of its name, type control-F and enter the name in the text block that appears in the palette area.
|
||||
|
||||
\chapter{Saving and Loading Projects and Media}
|
||||
\section{Local Storage}
|
||||
\subsection{Localstore}
|
||||
\subsection{XML Export}
|
||||
\section{Cloud Storage}
|
||||
\section{Loading Saved Projects}
|
||||
\chapter{Building a Block}
|
||||
\section{Simple Blocks}
|
||||
\subsection{Custom Blocks with Inputs}
|
||||
\section{Recursion}
|
||||
\section{Block Libraries}
|
||||
\chapter{First Class Lists}
|
||||
\section{The list Block}
|
||||
\section{Lists of Lists}
|
||||
\section{Functional and Imperative List Programming}
|
||||
\section{Higher Order List Operations and Rings}
|
||||
\chapter{Typed Inputs}
|
||||
\section{Scratch's Type Notation}
|
||||
\section{The \Snap{} Input Type Dialog}
|
||||
\subsection{Procedure Types}
|
||||
\subsection{Pulldown inputs}
|
||||
\subsection{Input variants}
|
||||
\subsection{Prototype Hints}
|
||||
\subsection{Title Text and Symbols}
|
||||
\chapter{Procedures as Data}
|
||||
\section{Call and Run}
|
||||
\subsection{Call/Run with inputs}
|
||||
\subsection{Variables in Ring Slots}
|
||||
\section{Writing Higher Order Procedures}
|
||||
\subsection{Recursive Calls to Multiple-Input Blocks}
|
||||
\section{Formal Parameters}
|
||||
\section{Procedures as Data}
|
||||
\section{Special Forms}
|
||||
\subsection{Special Forms in Scratch}
|
||||
\chapter{Object Oriented Programming}
|
||||
\section{Local State with Script Variables}
|
||||
\section{Messages and Dispatch Procedures}
|
||||
\section{Inheritance via Delegation}
|
||||
\section{An Implementation of Prototyping OOP}
|
||||
\chapter{The Outside World}
|
||||
\section{The World Wide Web}
|
||||
\section{Hardware Devices}
|
||||
\section{Date and Time}
|
||||
\chapter{Continuations}
|
||||
\section{Continuation Passing Style}
|
||||
\section{Call/Run w/Continuation}
|
||||
\subsection{Nonlocal exit}
|
||||
\chapter{User Interface Elements}
|
||||
\section{Tool Bar Features}
|
||||
\subsection{The \Snap{} Logo Menu}
|
||||
\subsection{The File Menu}
|
||||
\subsection{The Cloud Menu}
|
||||
\subsection{The Settings Menu}
|
||||
\subsection{Stage Resizing Buttons}
|
||||
\subsection{Project Control Buttons}
|
||||
\section{The Palette Area}
|
||||
\subsection{Context Menus for Palette Blocks}
|
||||
\subsection{Context Menu for the Palette Background}
|
||||
\section{The Scripting Area}
|
||||
\subsection{Sprite Appearance and Behavior Controls}
|
||||
\subsection{Scripting Area Tabs}
|
||||
\subsection{Scripts and Blocks Within Scripts}
|
||||
\subsection{Scripting Area Background Context Menu}
|
||||
\subsection{Controls in the Costumes Tab}
|
||||
\subsection{The Paint Editor}
|
||||
\subsection{Controls in the Sounds Tab}
|
||||
\section{Controls on the Stage}
|
||||
\section{The Sprite Corral and Sprite Creation Buttons}
|
||||
|
||||
\end{document}
|
Przed Szerokość: | Wysokość: | Rozmiar: 12 KiB Po Szerokość: | Wysokość: | Rozmiar: 12 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 7.7 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 9.2 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 7.5 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 8.0 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 12 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 3.3 KiB |
Przed Szerokość: | Wysokość: | Rozmiar: 4.5 KiB Po Szerokość: | Wysokość: | Rozmiar: 4.5 KiB |
Przed Szerokość: | Wysokość: | Rozmiar: 11 KiB Po Szerokość: | Wysokość: | Rozmiar: 11 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 16 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 12 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 8.7 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 17 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 1.7 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 28 KiB |
Przed Szerokość: | Wysokość: | Rozmiar: 139 KiB Po Szerokość: | Wysokość: | Rozmiar: 139 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 9.1 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 1.7 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 26 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 8.9 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 11 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 8.5 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 11 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 9.0 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 8.9 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 2.1 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 30 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 17 KiB |
Przed Szerokość: | Wysokość: | Rozmiar: 4.9 KiB Po Szerokość: | Wysokość: | Rozmiar: 4.9 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 4.6 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 27 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 7.1 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 2.3 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 9.0 KiB |
Przed Szerokość: | Wysokość: | Rozmiar: 98 KiB Po Szerokość: | Wysokość: | Rozmiar: 98 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 1.2 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 1.6 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 2.7 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 3.4 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 1.7 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 7.8 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 11 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 17 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 9.9 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 17 KiB |
Przed Szerokość: | Wysokość: | Rozmiar: 3.1 KiB Po Szerokość: | Wysokość: | Rozmiar: 3.1 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 5.5 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 3.2 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 14 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 13 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 29 KiB |
|
@ -0,0 +1,383 @@
|
|||
% !TeX spellcheck = pl
|
||||
|
||||
\documentclass[a4paper]{report}
|
||||
|
||||
\input{../common/defs.tex}
|
||||
|
||||
\usepackage[polish]{babel}
|
||||
\usepackage{polski}
|
||||
\frenchspacing
|
||||
\usepackage{indentfirst}
|
||||
|
||||
\begin{document}
|
||||
|
||||
\title{Snap! --- Podręcznik użytkownika}
|
||||
\author{Brian Harvey\texorpdfstring{ \and}{,} Jens M\"onig}
|
||||
\date{}
|
||||
|
||||
\manualtitlepage[Tłumaczenie na język polski:\\Bartosz Leper]{Snap!\\Podręcznik użytkownika}
|
||||
|
||||
\tableofcontents
|
||||
|
||||
\chapter*{}
|
||||
\section*{Podziękowania}
|
||||
|
||||
Mieliśmy ogromne szczęście do mentorów. Jens zdobył dużo doświadczenia pracując wśród pionierów Smalltalka: Alana Kaya, Dana Ingallsa i~reszty ekipy, która wynalazła komputery osobiste i~programowanie obiektowe w~najlepszych dniach firmy Xerox PARC. Pracował z~Johnem Maloneyem z~zespołu Scratcha w~MIT\footnote{Massachusetts Institute of Technology, amerykańska uczelnia techniczna --- przyp. tłum.}, autorem platformy graficznej Morphic, wciąż stanowiącej fundament \Snap{a}. Znakomity projekt języka Scratch, autorstwa Lifelong Kindergarten Group z~MIT Media Lab, odgrywa w~\Snap{ie} kluczową rolę.
|
||||
|
||||
\textbf{\emph{Nasza poprzednia wersja, BYOB, była bezpośrednią modyfikacją kodu źródłowego Scratcha. \Snap{} został napisany od zera, lecz struktura jego kodu oraz interfejs użytkownika pozostają mocno zakorzenione w~Scratchu. Z~kolei zespół Scratcha, który mógłby widzieć w~nas rywali, przyjął nas ciepło i~okazał nam całkowite wsparcie.}}
|
||||
|
||||
Brian zdobywał szlify w~MIT oraz Stanford Artificial Intelligence Labs\footnote{Laboratorium sztucznej inteligencji na Uniwersytecie Stanforda --- przyp. tłum.}, gdzie uczył się pod okiem Johna McCarthy'ego, twórcy Lispa, oraz Geralda~J. Suss\-mana i~Guya Steele'a, twórców języka Scheme. Zdobywał również wiedzę od wielu innych wybitnych informatyków, w~tym autorów najlepszej książki z zakresu informatyki --- \emph{Struktury i~interpretacji programów komputerowych}: Hala Abelsona, Geralda~J. Suss\-mana i~Julie Suss\-man.
|
||||
|
||||
\textbf{\emph{Za starych dobrych czasów mawialiśmy w~MIT Logo Lab: ,,Język Logo to Lisp w przebraniu BASIC-a''. Dziś, ze swoimi pierwszoklasowymi procedurami, zasięgami leksykalnymi~i pierwszoklasowymi kontynuacjami, \Snap{} jest jak Scheme w~przebraniu Scratcha.}}
|
||||
|
||||
Szczęśliwym zrządzeniem losu, poprzez forum Scratch Advanced Topics, poznaliśmy wspaniałą grupę błyskotliwych uczniów gimnazjów~(!\@) i liceów. Kilku z nich wniosło swój wkład w~kod \Snap{a}: Kartik Chandra, Nathan Dinsmore, Connor Hudson i~Ian Reynolds. Ponadto wielu zgłosiło pomysły i~raporty błędów podczas testowania wersji alfa. Wśród studentów Uniwersytetu Kalifornijskiego w~Berkeley, którzy przyczynili się do rozwoju kodu, znajdują się Michael Ball, Achal Dave, Kyle Hotchkiss, Ivan Motyashov i~Yuan Yuan. Wymienianie wszystkich tłumaczy zajęłoby zbyt wiele miejsca, ale można ich odnaleźć w~okienku ,,O \Snap{}\ldots'' dostępnym w~programie.
|
||||
|
||||
Niniejsze dzieło powstało częściowo w~ramach grantu nr~1143566 udzielonego przez National Science Foundation, a częściowo przy wsparciu firmy MioSoft.
|
||||
|
||||
\clearpage
|
||||
|
||||
\begin{center}
|
||||
\bf \Huge \Snap{} \\
|
||||
Podręcznik użytkownika \\
|
||||
\huge Wersja 4.0 \vspace{40pt}
|
||||
\end{center}
|
||||
|
||||
\Snap{} to rozszerzona reimplementacja języka Scratch (\url{http://scratch.mit.edu}), która pozwala na tworzenie własnych bloków (ang.\ \textit{Build Your Own Blocks}; stąd dawna nazwa \Snap{a} --- BYOB). Opisywany tu język obsługuje pierwszoklasowe listy, procedury i~kontynuacje. Te dodatkowe możliwości sprawiają, że nadaje się on do przeprowadzenia poważnego wstępu do informatyki dla uczniów liceów i szkół wyższych.
|
||||
|
||||
Aby uruchomić środowisko \Snap{}, wystarczy otworzyć przeglądarkę internetową i~wpisać adres \url{http://snap.berkeley.edu/run}, aby zacząć pracę z~minimalnym zestawem bloków. Można też użyć adresu \url{http://snap.berkeley.edu/init}, aby załadować niewielki zestaw dodatkowych bloków. Wiąże się to z~nieco wolniejszym ładowaniem, ale jest zalecane dla wygody użytkowników (w~dalszej części podręcznika będziemy zakładali korzystanie z~tej właśnie metody).
|
||||
|
||||
\clearpage
|
||||
|
||||
\chapter{Bloki, skrypty i~duszki}
|
||||
|
||||
W~tym rozdziale poznamy kilka cech języka \Snap{} odziedziczonych po Scratchu; doświadczeni użytkownicy Scratcha mogą przejść od razu do sekcji~\ref{sec:zagnieżdżanie-duszków}.
|
||||
|
||||
\Snap{} jest językiem programowania --- notacją, przy pomocy której możemy powiedzieć komputerowi, co ma zrobić. Jednak w~odróżnieniu od większości innych, \Snap{} jest językiem wizualnym; programując w~nim, zamiast posługiwać się klawiaturą, używamy metody ,,przeciągnij i~upuść'', dobrze znanej użytkownikom komputerów.
|
||||
|
||||
Uruchom teraz środowisko \Snap{}. Powinieneś zobaczyć ekran podzielony na kilka obszarów:\footnote{\onehalfspacing Pierwsze uruchomienie \Snap{a} prawdopodobnie spowoduje wyświetlenie angielskiej wersji programu; aby przełączyć się na język polski, należy kliknąć menu ,,Ustawienia'' \inlinepic{../common/btn-settings} na pasku narzędzi, a~następnie użyć polecenia ,,Language\ldots'' (,,Język\ldots'') --- przyp. tłum.}\nopagebreak
|
||||
|
||||
\begin{center}
|
||||
\def\svgwidth{\textwidth}
|
||||
\input{obszary-okna.pdf_tex}
|
||||
\end{center}
|
||||
|
||||
(Proporcje tych stref mogą się różnić, w~zależności od rozmiaru i~kształtu okna przeglądarki).
|
||||
|
||||
Program w~języku \Snap{} składa się z~jednego lub więcej \emph{skryptów}, te zaś z~kolei --- z~\emph{bloków}. Oto przykładowy skrypt:\nopagebreak
|
||||
|
||||
\label{fig:typowy-skrypt}
|
||||
\bigpic{typowy-skrypt}
|
||||
|
||||
Na powyższy skrypt składa się pięć bloków w~trzech różnych kolorach, odpowiadających trzem z~ośmiu \emph{palet} z~blokami. Obszar palet, znajdujący się po lewej stronie okna, pokazuje jedną paletę na raz. Do zmiany widocznej palety służy osiem przycisków znajdujących się tuż nad tym obszarem. Bloki ciemnożółte, widoczne w~naszym skrypcie, pochodzą z~palety ,,Kontrola''; zielone z~palety ,,Pisak'', a~niebieskie --- z~palety ,,Ruch''. Aby złożyć taki skrypt, należy poprzeciągać odpowiednie bloki z~palet do \emph{obszaru skryptów}, umiejscowionego na środku okna. Kiedy układamy jeden blok pod drugim w~taki sposób, aby wcięcie dolnego bloku znalazło się w~pobliżu wypustki tego powyżej, bloki łączą się ze sobą (ang. \textit{snap together}; stąd nazwa języka \Snap{}):\nopagebreak
|
||||
|
||||
\bigpic{laczenie-blokow}
|
||||
|
||||
Pozioma biała linia sygnalizuje, że jeśli puścimy zielony blok, połączy się on z~wypustką ciemnożółtego.
|
||||
|
||||
\subsection{Bloki-czapki i~bloki komend}
|
||||
|
||||
Na górze skryptu znajduje się \emph{blok-czapka}, który określa, kiedy skrypt ma zostać wykonany. Nazwy bloków-czapek zazwyczaj zaczynają się słowem ,,\code{kiedy}''; nasz przykładowy skrypt powinien zostać uruchomiony w~momencie kliknięcia zielonej flagi, znajdującej się w pobliżu prawej strony paska narzędzi \Snap{a}. (Pasek ten jest częścią okna programu \Snap{}; nie chodzi tutaj o pasek menu przeglądarki lub systemu operacyjnego). Skrypt nie musi posiadać czapki, jednak w~takim przypadku zostanie wykonany tylko wtedy, gdy użytkownik sam go kliknie. Skrypt nie może mieć więcej niż jednej czapki; jej charakterystyczny kształt służy łatwiejszemu zapamiętaniu tej szczególnej własności.
|
||||
|
||||
Pozostałe bloki w naszym skrypcie to \emph{bloki komend}. Każdy z~nich oznacza jakąś akcję, którą \Snap{} potrafi wykonać. Na przykład blok \inlinepic{przesun-o-10-krokow} nakazuje duszkowi\footnote{W grafice komputerowej słowem ,,duszek'' (ang. \textit{sprite}) nazywa się ruchomy obiekt na ekranie --- przyp. tłum.}, czyli strzałce na \emph{scenie} po prawej stronie okna, aby przesunął się o~dziesięć kroków do przodu w~kierunku, w~którym jest zwrócony. Każdy krok to niewielka odległość na ekranie. Wkrótce przekonamy się, że na scenie może być więcej duszków, a~każdy z nich może mieć własne skrypty. Ponadto duszki nie muszą wyglądać jak strzałki; ich kostiumy mogą być dowolnymi obrazkami. Kształt bloku \code{przesuń} ma za zadanie przypominać klocek, skrypt zaś jest jak wieża z klocków. Słowa ,,blok'' będziemy używać dla oznaczenia zarówno graficznego symbolu na ekranie, jak i~procedury (akcji) jaką ten blok wykonuje.
|
||||
|
||||
Liczbę $10$ w powyższym bloku \code{przesuń} nazywamy jego \emph{parametrem}. Kliknąwszy na białym, owalnym polu, możemy wpisać w~jej miejsce dowolną inną. W przykładowym skrypcie ze strony \pageref{fig:typowy-skrypt} parametrem jest liczba $100$. Jak się później okaże, pola parametrów mogą mieć kształty inne od owalnych; oznacza to wtedy, że akceptują one wartości inne niż liczby. Zobaczymy również, że zamiast wpisywać konkretne wartości w~pola, możemy nakazać komputerowi je obliczać. Ponadto blok może mieć więcej niż jeden parametr. Na przykład blok \code{leć}, znajdujący się mniej więcej w~połowie palety ,,Ruch'', przyjmuje trzy parametry.
|
||||
|
||||
Większość bloków komend ma kształt klocków, lecz niektóre, jak \code{powtórz} z~tego samego przykładu, wyglądają jak \emph{klamry}. Większość bloków klamrowych można znaleźć na palecie ,,Kontrola'. Wnętrze klamry jest szczególnym rodzajem pola parametru, który przyjmuje \emph{skrypt} jako parametr. W~przykładowym skrypcie blok \code{powtórz} ma dwa parametry: liczbę $4$ oraz skrypt\nopagebreak
|
||||
|
||||
\bigpic{typowy-skrypt-wnetrze}
|
||||
|
||||
\section{Duszki i~współbieżność}
|
||||
|
||||
Tuż pod sceną znajduje się przycisk ,,nowy duszek'' \inlinepic{../common/btn-new-sprite}. Kliknięcie go spowoduje dodanie nowego duszka do sceny. Pojawi się on w~losowym miejscu na scenie, skierowany w~losową stronę i~zabarwiony na losowy kolor.
|
||||
|
||||
Każdy duszek ma swoje własne skrypty. Aby wyświetlić w~obszarze skryptów te należące do konkretnego duszka, należy kliknąć na jego obrazku w~\emph{zagrodzie duszków}, znajdującej się w~prawym dolnym rogu okna. Spróbuj umieścić następujące skrypty w~obszarze skryptów --- po jednym dla każdego duszka:\nopagebreak
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{duszki-i-wspolbieznosc-1}
|
||||
\end{minipage}%
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{duszki-i-wspolbieznosc-2}
|
||||
\end{minipage}
|
||||
\end{figure}
|
||||
|
||||
Kiedy klikniemy zieloną flagę \inlinepic{../common/btn-start}, powinniśmy zobaczyć jak jeden duszek się obraca, podczas gdy drugi porusza się w~tę i~z~powrotem. Ten eksperyment pokazuje, jak różne skrypty mogą być wykonywane jednocześnie (\emph{współbieżnie}). Obracanie się dookoła i~ruch po linii prostej zachodzą jednocześnie. Współbieżność zachodzi również w~przypadku wielu skryptów należących do tego samego duszka. Spróbujmy tego przykładu:\nopagebreak
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{duszki-i-wspolbieznosc-3}
|
||||
\end{minipage}%
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{duszki-i-wspolbieznosc-4}
|
||||
\end{minipage}
|
||||
\end{figure}
|
||||
|
||||
Po naciśnięciu spacji duszek powinien zacząć bez końca chodzić w kółko, ponieważ bloki \code{przesuń} i \code{obróć} są wykonywane współbieżnie. (Aby przerwać program, kliknij czerwony czerwony znak ,,stop'' \inlinepic{../common/btn-stop} na prawym brzegu paska narzędzi).
|
||||
|
||||
\subsection{Kostiumy i~dźwięki}
|
||||
|
||||
Aby zmienić wygląd duszka, należy zaimportować dla niego nowy \emph{kostium}. Są na to trzy sposoby. Najpierw trzeba wybrać duszka z~zagrody. Następnie, w~pierwszej metodzie, klikamy na ikonie pliku \inlinepic{../common/btn-file} na pasku narzędzi, a~następnie wybieramy polecenie ,,\code{Kostiumy\ldots}''. Ukaże się lista kostiumów z~publicznej biblioteki multimediów, spośród których możemy dokonać wyboru. Drugą metodą jest wybór pliku ze swojego własnego kompuera. Należy w~tym celu kliknąć ikonę pliku, a~następnie polecenie ,,\code{Importuj\ldots}''. Można wtedy wybrać plik obrazu w~dowolnym formacie (PNG, JPEG itd.) obsługiwanym przez przeglądarkę. Trzeci sposób jest szybszy jeśli plik, którego chcemy użyć, jest widoczny na pulpicie: po prostu przeciągnij go do okna \Snap{a}. W~każdym z~tych przypadków obszar skryptów zacznie wyglądać mniej więcej tak:\nopagebreak
|
||||
|
||||
\bigpic{obszar-skryptow-z-dodatkowym-kostiumem}
|
||||
|
||||
Tuż nad tą częścią okna znajdują się trzy zakładki: ,,Skrypty'', ,,Kostiumy'' i~,,Dźwię\-ki''. W~tym momencie aktywna jest karta ,,Kostiumy''. Widzimy na niej \emph{garderobę} duszka i~możemy z~jej poziomu wybrać dla niego kostium --- domyślny kostium żółwia\footnote{Z powodów historycznych, słowem ,,żółw'' nazywamy ruchomy obiekt, który porusza się wykonując program i~rysuje, zostawiając za sobą ślad} lub wybrany wcześniej kostium Alonza. (Alonzo, maskotka \Snap{a}, został nazwany na cześć Alonza Churcha, matematyka, który jako pierwszy wpadł na pomysł, aby procedury traktować na równi z~danymi, co jest najistotniejszą różnicą między \Snap{em} a~Scratchem). Możemy przypisać duszkowi tyle kostiumów ile chcemy, a~potem wybierać, który z~nich założy, albo poprzez kliknięcie w~obrębie garderoby, albo używając w~skrypcie bloku \inlinepic{zmien-kostium-na-zolwia} lub \inlinepic{nastepny-kostium}. (Każdy kostium ma zarówno numer jak i~nazwę. Blok \code{następny kostium} wybiera następny w~kolejności kostium; po ostatnim wybiera z~powrotem kostium numer~1. Żółw, czyli kostium numer~0, jest przez blok \code{następny kostium} ignorowany). Kostium ,,Żółw'' jest jedynym, który zmienia kolor zgodnie z~kolorem pisaka.
|
||||
|
||||
Oprócz kostiumów, duszki mogą posiadać \emph{dźwięki}; dźwiękowy odpowiednik garderoby duszka nazywamy jego \emph{szafą grającą}. Można importować pliki dźwiękowe w~dowolnym formacie obsługiwanym przez przeglądarkę. Do odtwarzania dźwięków służą dwa rodzaje bloków. Jeśli skrypt ma się dalej wykonywać podczas odtwarzania, używamy bloku \inlinepic{zagraj-dzwiek-ratunku}. Za to aby poczekać, aż dźwięk się zakończy, zanim skrypt będzie kontynuowany, należy wykorzystać blok \inlinepic{zagraj-dzwiek-ratunku-i-czekaj}.
|
||||
|
||||
\subsection{Nadawanie i~odbieranie komunikatów}
|
||||
|
||||
Widzieliśmy wcześniej przykład dwóch duszków poruszających się jednocześnie. Jednak w~bardziej interesującym programie duszki na scenie będą wchodzić w~interakcje, abyśmy mogli opowiedzieć przy ich pomocy jakąś historię, zagrać w~grę itd. Czasami jeden duszek będzie musiał nakazać innemu wykonanie jakiegoś skryptu. Oto prosty przykład:\nopagebreak
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics[scale=0.4]{../common/boy1-walking}
|
||||
\end{minipage}%
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\reflectbox{\includegraphics[scale=0.3]{../common/dog2-c}}
|
||||
\end{minipage}
|
||||
\vskip 3ex
|
||||
\begin{minipage}[t]{0.5\textwidth}
|
||||
\centering
|
||||
\vspace{0pt} % REALLY align to top
|
||||
\includegraphics[scale=\defaultGraphicsScale]{nadawanie-i-odbieranie-komunikatow-1}
|
||||
\end{minipage}%
|
||||
\begin{minipage}[t]{0.5\textwidth}
|
||||
\centering
|
||||
\vspace{0pt} % REALLY align to top
|
||||
\includegraphics[scale=\defaultGraphicsScale]{nadawanie-i-odbieranie-komunikatow-2}
|
||||
\end{minipage}
|
||||
\end{figure}
|
||||
|
||||
Słowo ,,szczekaj'' występujące w~bloku \inlinepic{nadaj-szczekaj-do-wszystkich-i-czekaj} to pierwszy lepszy wyraz, który przyszedł mi do głowy. Jedną z~opcji, które ukazują się po kliknięciu strzałki w~dół obok tego pola parametru (i~jedyną początkowo dostępną), jest ,,\code{nowy}''. Po jej wybraniu \Snap{} pyta o~nazwę komunikatu. Kiedy wspomniany blok zostanie wykonany, wybrany komunikat zostaje wysłany do \emph{każdego} duszka --- stąd też określenie ,,nadaj do wszystkich''. Jednak w~naszym przykładzie tylko jeden duszek ma skrypt, który jest wywoływany w~momencie nadania tego komunikatu --- jest nim pies. Ponieważ skrypt chłopca wykorzystuje blok \code{nadaj do wszystkich i~czekaj} zamiast \code{nadaj do wszystkich}, chłopiec nie przechodzi do następującego po nim bloku \code{powiedz}, dopóki skrypt psa się nie skończy. Z~tej przyczyny dwa duszki mówią na zmianę, a~nie jednocześnie.
|
||||
|
||||
Warto przy okazji zwrócić uwagę na to, że pierwsze pole parametru na bloku \code{powiedz} nie jest owalne, lecz prostokątne. Oznacza to, że parametr ten może być dowolnym łańcuchem znaków (tekstem), nie tylko liczbą. W~polach parametrów typu tekstowego spacje ukazują się jako brązowe kropki, abyśmy mogli policzyć liczbę odstępów między wyrazami. Co ważniejsze, możemy dzięki temu odróżnić pusty łańcuch od złożonego z~samych spacji. Brązowe kropki \emph{nie będą} widoczne na scenie, kiedy blok zostanie wykonany.
|
||||
|
||||
Scena ma swój własny obszar skryptów. Możemy wyświetlić jej szczegóły klikając ikonę ,,Scena'' po lewej stronie zagrody duszków. W~przeciwieństwie do duszków scena się nie porusza. Zamiast kostiumów ma \emph{tła} --- obrazki wypełniające cały obszar sceny. Duszki rysowane są na aktualnym tle. W~skomplikowanych projektach często wygodnie jest użyć skryptu sceny do koordynacji działań poszczególnych części programu.
|
||||
|
||||
\section{Zagnieżdżanie duszków: kotwice i~części}
|
||||
\label{sec:zagnieżdżanie-duszków}
|
||||
|
||||
Czasem dobrze jest stworzyć swego rodzaju ,,nadduszka'', złożonego z~kawałków, które poruszają się razem, ale mogą być osobno względem siebie ustawiane. Klasycznym przykładem może być ciało człowieka złożone z~tułowia, kończyn i~głowy. \Snap{} pozwala nam uczynić jednego z~duszków \emph{kotwicą} złożonego obiektu, a~resztę --- jego \emph{częściami}. Aby zagnieździć w~ten sposób duszki, należy przeciągnąć z~zagrody ikonę duszka, który ma zostać \emph{częścią} złożonego obiektu na znajdującego się na scenie (nie w~zagrodzie!) duszka, który zostanie \emph{kotwicą}.
|
||||
|
||||
Zagnieżdżone duszki --- zarówno kotwice jak i części --- mają w zagrodzie specjalne oznaczenia:\nopagebreak
|
||||
|
||||
\bigpic{zagniezdzone-duszki-w-zagrodzie}
|
||||
|
||||
W~tym przypadku chcielibyśmy animować rękę Alonza. (Ręka została pokolorowana na zielono, aby uwypuklić zależność między dwoma duszkami, choć w~prawdziwym projekcie miałyby one raczej ten sam kolor). ,,Duszek1'', reprezentujący ciało Alonza, jest kotwicą; ,,Duszek2'' to ręka. Ikona duszka-kotwicy zawiera w~dolnej części do trzech miniatur doczepionych do niego duszków-części. Z~kolei na ikonie każdej z~części widać pomniejszony obrazek duszka-kotwicy w~lewym górnym rogu, w~prawym górnym zaś --- \emph{przełącznik synchronizacji obrotów}. Początkowo, jak widać na rysunku powyżej, jest on tak ustawiony, aby obrót kotwicy powodował zarówno orbitowanie części wokół niej, jak i~obrót części dookoła swojej własnej osi. Po kliknięciu przełącznik zmienia kształt z~okrągłej strzałki na prostą, co oznacza, że od tej pory obrót duszka-kotwicy będzie powodował jedynie zmianę pozycji przymocowanych do niego części, ale nie będą się one obracać wokół własnej osi. (Części mogą również obracać się niezależnie, przy pomocy bloków \code{obróć}). Każda zmiana pozycji lub rozmiaru kotwicy jest propagowana na wszystkie części.
|
||||
|
||||
\begin{figure}[H]
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{komenda-machania-reka}%
|
||||
\hspace{2em}%
|
||||
\includegraphics[scale=0.4]{../common/alonzo-waving}
|
||||
\end{figure}
|
||||
|
||||
\section{Bloki funkcji i~wyrażenia}
|
||||
|
||||
Jak dotąd używaliśmy dwóch rodzajów bloków: ,,czapek'' i~komend. Kolejnym rodzajem jest blok \emph{funkcji}, który ma owalny kształt: \inlinereporterpic{pozycja-x}. Nazywamy go ,,blokiem funkcji'', ponieważ --- podobnie jak funkcja w~matematyce --- kiedy zostaje wykonany, zamiast przeprowadzać jakąś czynność, zwraca wartość, która może zostać użyta jako parametr w~innym bloku. Jeśli przeciągniemy sam blok funkcji do obszaru skryptów i~klikniemy go, obok pokaże się dymek z~wartością zwróconą przez tę funkcję:\nopagebreak
|
||||
|
||||
\bigpic{pozycja-x-zwraca-liczbe}
|
||||
|
||||
Kiedy przeciągamy blok funkcji nad polem parametru należącym do innego bloku, wokół tego pola pojawia się biała otoczka, analogicznie do sytuacji, w~której łączymy bloki komend i~pojawia się biała linia. Oto przykładowy skrypt wykorzystujący funkcję:\nopagebreak
|
||||
|
||||
\begin{figure}[H]
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{przykladowy-skrypt-wykorzystujacy-funkcje}%
|
||||
\hspace{2em}%
|
||||
\includegraphics{../common/turtle-says-its-position}
|
||||
\end{figure}
|
||||
|
||||
Funkcja \code{pozycja X} nadaje tu wartość pierwszemu parametrowi bloku \code{powiedz}. Pozycja X~duszka to inaczej jego współrzędna pozioma. Określa ona, jak daleko w~lewo (jeśli jest liczbą ujemną) lub w~prawo (jeśli dodatnią) znajduje się duszek w~stosunku do środka sceny. Analogicznie, pozycja Y~to współrzędna pionowa, mierzona ilością kroków w~górę (wartości dodatnie) lub w~dół od środka (wartości ujemne).
|
||||
|
||||
Przy pomocy funkcji z palety ,,Wyrażenia'' możemy wykonywać obliczenia:\nopagebreak
|
||||
|
||||
\begin{figure}[H]
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{uzycie-funkcji-do-obliczen}%
|
||||
\hspace{2em}%
|
||||
\includegraphics{../common/turtle-says-its-rounded-position}
|
||||
\end{figure}
|
||||
|
||||
Blok \code{zaokrąglij} zaokrągla $35.3905\ldots$ do $35$, a~blok~\code{+} dodaje do tej liczby $100$. Nawiasem mówiąc, choć blok \code{zaokrąglij} znajduje się na palecie ,,Wyrażenia'', podobnie jak~\code{+}, to w~tym skrypcie ma on jaśniejszy kolor i~czarne litery. To dlatego, że \Snap{} używa na przemian ciemnych i~jasnych odcieni kolorów, kiedy zagnieżdżamy w~sobie bloki z~tej samej palety:\nopagebreak
|
||||
|
||||
\bigpic{kolorowanie-w-zebre}
|
||||
|
||||
Takie \emph{kolorowanie w~zebrę} poprawia czytelność programu. Blok funkcji wraz z~parametrami, a~być może również innymi blokami funkcji, na przykład \inlinepic{zaokraglij-pozycja-x-plus-100}, nazywamy \emph{wyrażeniem}.
|
||||
|
||||
\section{Predykaty i~obliczenia warunkowe}
|
||||
|
||||
Większość funkcji zwraca albo liczbę, jak \inlinereporterpic{plus}, lub łańcuch tekstowy, jak \inlinereporterpic{polacz-witaj-swiecie}. \emph{Predykat} to specjalny rodzaj funkcji, która zawsze zwraca jedną z dwojga wartości: \code{prawdę} lub \code{fałsz}. Predykaty mają kształt sześciokątów:\nopagebreak
|
||||
|
||||
\bigpic{przycisk-myszy-nacisniety}
|
||||
|
||||
\begin{sloppypar}
|
||||
Specjalny kształt jest oznaką, że predykaty nie mają z~reguły sensu w~tych polach parametrów, które oczekują liczby lub tekstu. Raczej nie napisalibyśmy \inlinepic{przesun-o-przycisk-myszy-nacisniety-krokow}, choć gdybyśmy się uparli, \Snap{} by nam na to pozwolił, co widać na załączonym obrazku. W~typowych sytuacjach predykaty umieszczamy w~specjalnych sześciokątnych polach parametrów takich jak to:\nopagebreak
|
||||
\end{sloppypar}
|
||||
|
||||
\bigpic{jezeli-to}
|
||||
|
||||
Klamra \code{jeżeli --- to} wykonuje obejmowany przez nią fragment skryptu wtedy i~tylko wtedy, gdy wyrażenie w~jej sześciokątnym polu parametru jest prawdziwe, czyli zwraca wartość \code{prawda}.\nopagebreak
|
||||
|
||||
\bigpic{predykaty-i-obliczenia-warunkowe-1}
|
||||
|
||||
Poniższy blok jest bardzo użyteczny w~animacjach. Wykonuje on skrypt będący jego parametrem \emph{wielokrotnie}, dopóki predykat nie zostanie spełniony:\nopagebreak
|
||||
|
||||
\bigpic{predykaty-i-obliczenia-warunkowe-2}
|
||||
|
||||
Jeśli pracując nad projektem, będziemy chcieli tymczasowo pominąć niektóre komendy w~skrypcie, lecz nie będziemy chcieli zapomnieć, gdzie było ich miejsce, możemy użyć następującej sztuczki:\nopagebreak
|
||||
|
||||
\bigpic{predykaty-i-obliczenia-warunkowe-3}
|
||||
|
||||
Czasami potrzeba wykonać tę samą czynność bez względu na to, czy jakiś warunek zachodzi czy nie, za to z~różnymi parametrami dla obu tych przypadków. Można do tego użyć bloku \emph{funkcji} \code{if}:\footnote{\onehalfspacing Jeśli nie widzisz go w~palecie ,,Kontrola'', kliknij przycisk ,,Plik'' \inlinepic{../common/btn-file} na pasku narzędzi i~wybierz polecenie ,,Importuj narzędzia''.}\footnote{Niestety, podobnie jak pozostałe dodatkowe narzędzia i~biblioteki bloków, blok \code{if --- then --- else} posiada wyłącznie angielską nazwę, bez względu na nasze ustawienia języka. Oznacza ona ,,jeżeli --- to --- w~przeciwnym razie'' --- przyp. tłum.}\nopagebreak
|
||||
|
||||
\bigpic{predykaty-i-obliczenia-warunkowe-4}
|
||||
|
||||
Wartości \code{prawda} i~\code{fałsz} określa się technicznymi terminami ,,wartość logiczna'' lub ,,wartość boolowska'' (ang. \textit{Boolean}). Ta ostatnia nazwa pochodzi on nazwiska George'a Boole'a, który stworzył opisującą je teorię matematyczną\footnote{Jest to \emph{algebra Boole'a} --- przyp. tłum.}. Uważaj na nazewnictwo --- sześciokątny blok to \emph{predykat}, ale wartość przezeń zwracana to \emph{wartość logiczna}.
|
||||
|
||||
Jest jeszcze jedna warta wytłumaczenia niejasność terminologiczna: W wielu językach programowania nazwa ,,procedura'' jest zarezerwowana dla \emph{komend}, które wykonują jakąś czynność, zaś nazwa ,,funkcja'' --- dla części programów zwracających wartość (\emph{funkcji} i \emph{predykatów}). W tym podręczniku \emph{procedury} to dowolne składniki programu, zarówno te zwracające, jak i nie zwracające wartości. Podobnie jak komendy, również funkcje i predykaty będziemy nazywać procedurami. Słowa ,,typ proceduralny'' będą skrótem myślowym dla słów ,,typ komendowy, funkcyjny lub predykatowy''.
|
||||
|
||||
\section{Zmienne}
|
||||
|
||||
Wypróbujmy następujący skrypt:\footnote{Blok \code{for}\footnotemark{} również znajduje się w~bibliotece narzędzi; użyj polecenia ,,\code{Importuj narzędzia}'' z~menu ,,Plik'', jeśli nie widzisz ich na palecie ,,Kontrola''.}\footnotetext{Słowa \code{for i = 1 to 10} oznaczają ,,dla $i=1$ do $10$'' --- przyp. tłum.}\nopagebreak
|
||||
|
||||
\bigpic{skrypt-kwadratowej-spirali}
|
||||
|
||||
Parametr bloku \code{przesuń} ma postać pomarańczowego owalu. Aby go tam umieścić, należy przeciągnąć taki sam owal będący częścią bloku \code{for}:\nopagebreak
|
||||
|
||||
\bigpic{przeciaganie-zmiennej}
|
||||
|
||||
Ten owal to \emph{zmienna} --- symboliczna nazwa reprezentująca jakąś wartość. Powyższy rysunek przedstawia sytuację sprzed zmiany drugiego parametru liczbowego bloku \code{for} z~domyślnego $10$ na $200$ oraz przeciągnięcia do jego środka bloku \code{obróć}. Blok \code{for} wykonuje swój parametr skryptowy wielokrotnie, podobnie jak \code{powtarzaj}, lecz przed każdym razem zapisuje liczbę do zmiennej~\code{i}, zaczynając od swojego pierwszego parametru liczbowego, dodając~$1$ przy każdym powtórzeniu, aż dojdzie do liczby z~drugiego parametru liczbowego. W~tym przypadku będziemy mieć $200$ powtórzeń, najpierw dla $\code{i}=1$, potem dla $\code{i}=2$, następnie $3$ i~tak dalej, aż do $\code{i}=200$ w~ostatnim powtórzeniu. W~rezultacie każdy blok \code{przesuń} rysuje coraz to dłuższy segment łamanej, co nadaje jej wygląd zbliżony do spirali. (Możesz spróbować ze skrętem $90$~stopni zamiast $92$; zobaczysz wtedy, dlaczego nazywamy tego rodzaju obraz ,,kwadratową spiralą'').
|
||||
|
||||
Zmienna~\code{i}~została utworzona przez blok \code{for} i~może zostać użyta wyłącznie wewnątrz jego klamry. Nawiasem mówiąc, jeśli nie spodoba nam się nazwa~\code{i}, możemy ją zmienić klikając pomarańczowy owal bez przeciągania go. Pokaże się wtedy okno dialogowe, do którego można wpisać inną nazwę:\nopagebreak
|
||||
|
||||
\bigpic{dialog-nazwy-zmiennej-skryptu}
|
||||
|
||||
Nazwa~,,\code{i}'' nie mówi nam zbyt wiele; można by tu użyć słowa ,,długość'', aby podkreślić znaczenie zmiennej. Nazwa~,,\code{i}'' jest popularna, gdyż w~matematyce istnieje tradycja używania liter od~\code{i} do~\code{n} dla liczb całkowitych. W~językach programowania nie musimy się jednak ograniczać do jednoliterowych nazw zmiennych.
|
||||
|
||||
\subsection{Zmienne globalne}
|
||||
|
||||
Możemy ,,ręcznie'' tworzyć zmienne, których widoczność nie jest ograniczona do jednego bloku. Aby to zrobić, należy kliknąć przycisk ,,\code{Stwórz zmienną}'' w~górnej części palety ,,Dane'':\nopagebreak
|
||||
|
||||
\bigpic{stworz-zmienna}
|
||||
|
||||
Otworzy się okno dialogowe, które pozwala nadać nazwę nowej zmiennej:\nopagebreak
|
||||
|
||||
\bigpic{dialog-nazwy-zmiennej}
|
||||
|
||||
Okno to pozwala również wybrać, czy zmienna ma być dostępna dla wszystkich duszków (co jest pożądane w~większości przypadków), czy ma być ona widoczna tylko dla aktualnego duszka. Postępujemy tak, jeśli mamy zamiar dać wielu duszkom własne zmienne o~\emph{tej samej nazwie}. Możemy potem kopiować skrypty między duszkami, przeciągając je z~obszaru skryptów aktualnego duszka na obrazek innego duszka w~zagrodzie duszków. Dzięki temu różne duszki będą wykonywać nieco inne rzeczy w~momencie wykonywania tego skryptu, ponieważ każdy z~nich będzie miał w~tej zmiennej zapisaną inną wartość.
|
||||
|
||||
Jeśli nadamy zmiennej nazwę ,,imię'', paleta ,,Dane'' będzie wyglądać następująco:\nopagebreak
|
||||
|
||||
\bigpic{zmienna-na-palecie}
|
||||
|
||||
Widzimy teraz przycisk ,,\code{usuń zmienną}'', a~także pomarańczowy owal z~nazwą zmiennej, taki sam jak owal na bloku \code{for}. Zmienną możemy przeciągnąć do dowolnego skryptu w~obszarze skryptów. Obok owalu widzimy pole wyboru; jest ono początkowo zaznaczone, dzięki czemu na scenie widoczny jest \emph{podgląd zmiennej}:\nopagebreak
|
||||
|
||||
\bigpic{podglad-zmiennej}
|
||||
|
||||
Kiedy nadamy zmiennej jakąś wartość, pojawia ona się w~polu podglądu.
|
||||
|
||||
Ale \emph{jak} nadać zmiennej wartość? Należy użyć do tego bloku \code{ustaw}:\nopagebreak
|
||||
|
||||
\bigpic{zapytaj-i-ustaw}
|
||||
|
||||
Zauważ, że \emph{nie przeciągamy} owalu zmiennej do bloku \code{ustaw}! Aby wybrać z~listy dostępnych zmiennych, należy kliknąć strzałkę w~dół przy pierwszym polu parametru tegoż bloku.
|
||||
|
||||
\subsection{Zmienne skryptu}
|
||||
|
||||
W~poprzednim przykładzie przeprowadzaliśmy interakcję z~użytkownikiem i~chcieliśmy zapamiętać jego imię na potrzeby całego projektu. To dobry przykład sytuacji, w~której właściwe jest użycie zmiennej \emph{globalnej} (z~rodzaju tych, które tworzymy przyciskiem ,,\code{Stwórz zmienną}''). Innym typowym przykładem jest zmienna ,,\code{wynik}'' w~projekcie gry. Czasem jednak potrzebujemy zmiennej tylko tymczasowo podczas wykonywania któregoś ze skryptów. W~takim przypadku możemy użyć bloku \code{zmienne skryptu} aby ją utworzyć:\nopagebreak
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics[scale=\defaultGraphicsScale]{skrypt-skrecajacej-linii}%
|
||||
\end{minipage}%
|
||||
\begin{minipage}{0.5\textwidth}
|
||||
\centering
|
||||
\includegraphics{../common/wiggling-line}
|
||||
\end{minipage}%
|
||||
\end{figure}
|
||||
|
||||
Podobnie jak w przypadku bloku \code{for}, aby zmienić nazwę zmiennej, wystarczy kliknąć pomarańczowy owal w bloku \code{zmienne skryptu} bez przeciągania. Możemy również stworzyć więcej tymczasowych zmiennych klikając strzałkę w prawo na końcu bloku. Spowoduje to dodanie kolejnego owalu zmiennej:\nopagebreak
|
||||
|
||||
\bigpic{zmienne-skryptu-a-b-c}
|
||||
|
||||
\section{I tak dalej}
|
||||
|
||||
Niniejszy podręcznik nie opisuje szczegółowo każdego bloku. Jest wiele bloków związanych z ruchem, dźwiękiem, kostiumami, efektami graficznymi i tak dalej. Ich przeznaczenie można poznać eksperymentalnie, ale także poprzez lekturę ,,ekranów pomocy''\footnote{Niestety, są one dostępne wyłącznie w języku angielskim --- przyp. tłum.}, które można obejrzeć klikając interesujący nas blok albo prawym przyciskiem myszy, albo lewym z wciśniętym jednocześnie klawiczem Ctrl, a następnie wybierając z menu polecenie ,,\code{pomoc\ldots}''. Jeśli zapomnisz, w której palecie znajduje się potrzebny Ci blok, ale pamiętasz choćby część nazwy, wciśnij Ctrl-F i wpisz ją w polu tekstowym, które pojawi się w obszarze palet.
|
||||
|
||||
\chapter{Saving and Loading Projects and Media}
|
||||
\section{Local Storage}
|
||||
\subsection{Localstore}
|
||||
\subsection{XML Export}
|
||||
\section{Cloud Storage}
|
||||
\section{Loading Saved Projects}
|
||||
\chapter{Building a Block}
|
||||
\section{Simple Blocks}
|
||||
\subsection{Custom Blocks with Inputs}
|
||||
\section{Recursion}
|
||||
\section{Block Libraries}
|
||||
\chapter{First Class Lists}
|
||||
\section{The list Block}
|
||||
\section{Lists of Lists}
|
||||
\section{Functional and Imperative List Programming}
|
||||
\section{Higher Order List Operations and Rings}
|
||||
\chapter{Typed Inputs}
|
||||
\section{Scratch's Type Notation}
|
||||
\section{The \Snap{} Input Type Dialog}
|
||||
\subsection{Procedure Types}
|
||||
\subsection{Pulldown inputs}
|
||||
\subsection{Input variants}
|
||||
\subsection{Prototype Hints}
|
||||
\subsection{Title Text and Symbols}
|
||||
\chapter{Procedures as Data}
|
||||
\section{Call and Run}
|
||||
\subsection{Call/Run with inputs}
|
||||
\subsection{Variables in Ring Slots}
|
||||
\section{Writing Higher Order Procedures}
|
||||
\subsection{Recursive Calls to Multiple-Input Blocks}
|
||||
\section{Formal Parameters}
|
||||
\section{Procedures as Data}
|
||||
\section{Special Forms}
|
||||
\subsection{Special Forms in Scratch}
|
||||
\chapter{Object Oriented Programming}
|
||||
\section{Local State with Script Variables}
|
||||
\section{Messages and Dispatch Procedures}
|
||||
\section{Inheritance via Delegation}
|
||||
\section{An Implementation of Prototyping OOP}
|
||||
\chapter{The Outside World}
|
||||
\section{The World Wide Web}
|
||||
\section{Hardware Devices}
|
||||
\section{Date and Time}
|
||||
\chapter{Continuations}
|
||||
\section{Continuation Passing Style}
|
||||
\section{Call/Run w/Continuation}
|
||||
\subsection{Nonlocal exit}
|
||||
\chapter{User Interface Elements}
|
||||
\section{Tool Bar Features}
|
||||
\subsection{The \Snap{} Logo Menu}
|
||||
\subsection{The File Menu}
|
||||
\subsection{The Cloud Menu}
|
||||
\subsection{The Settings Menu}
|
||||
\subsection{Stage Resizing Buttons}
|
||||
\subsection{Project Control Buttons}
|
||||
\section{The Palette Area}
|
||||
\subsection{Context Menus for Palette Blocks}
|
||||
\subsection{Context Menu for the Palette Background}
|
||||
\section{The Scripting Area}
|
||||
\subsection{Sprite Appearance and Behavior Controls}
|
||||
\subsection{Scripting Area Tabs}
|
||||
\subsection{Scripts and Blocks Within Scripts}
|
||||
\subsection{Scripting Area Background Context Menu}
|
||||
\subsection{Controls in the Costumes Tab}
|
||||
\subsection{The Paint Editor}
|
||||
\subsection{Controls in the Sounds Tab}
|
||||
\section{Controls on the Stage}
|
||||
\section{The Sprite Corral and Sprite Creation Buttons}
|
||||
|
||||
\end{document}
|
Po Szerokość: | Wysokość: | Rozmiar: 16 KiB |
Przed Szerokość: | Wysokość: | Rozmiar: 5.1 KiB Po Szerokość: | Wysokość: | Rozmiar: 5.1 KiB |
Przed Szerokość: | Wysokość: | Rozmiar: 12 KiB Po Szerokość: | Wysokość: | Rozmiar: 12 KiB |
Po Szerokość: | Wysokość: | Rozmiar: 18 KiB |