31:T7d0,{ const f = (t) => { return `${t}`; }; const v = (t) => { return `${t}`; }; const v1 = (t) => { return `${t}`; }; const v2 = (t) => { return `${t}`; }; const n = (t) => { return `${t}`; }; const s = (t) => { return `${t}`; }; const code = `=${f("IF")}( ${f("AND")}( ${v1("C3")}, ${v2("K3")}, ${f("NOT")}( ${f("ISBLANK")}(${v1("C3")}) ), ${f("NOT")}( ${f("ISBLANK")}(${v2("K3")}) ) ), ${n("-1")} ${f("*")} (${n("1")} ${f("-")} ${v2("K3")}${f("/")}${v1("C3")}), ${s('""')} )`; return html`

${code}

`; }32:Tee2,languages = { const l = [ { key: "js", name: "JavaScript", url: "https://en.wikipedia.org/wiki/JavaScript", example: `// JavaScript ${count_all_files}`, explanation: `This was the example [we wrote earlier](${chapters[3].url}) using [JavaScript](https://en.wikipedia.org/wiki/JavaScript), a very popular language that runs in your browser.` }, { key: "py", name: "Python", url: "https://en.wikipedia.org/wiki/Python_programming_language", example: `# Python def count_all_files (subfolders, files): count = len(files) for subfolder in subfolders: count += count_all_files(subfolder[0], subfolder[1]) return count`, explanation: `[Python](https://en.wikipedia.org/wiki/Python_programming_language) is very similar to JavaScript, with minor differences: - Comments (first line) are marked with \`#\` rather than \`//\`. - We must use the function \`len\` to get the length of the array, rather than the \`.length\` property like in JavaScript. - To define a function or loop, _indentation_ is used instead of curly braces. - The keyword \`let\` is not necessary in Python.` }, { key: "php", name: "PHP", url: "https://en.wikipedia.org/wiki/PHP", example: `// PHP function count_all_files ($subfolders, $files) { $file_count = count($files); foreach ($subfolders as $subfolder) { $file_count += count_all_files($subfolder[0], $subfolder[1]); } return $file_count; }`, explanation: `In [PHP](https://en.wikipedia.org/wiki/PHP), variables always start with \`$\`. We must use a function to \`count\` the number of items in an array. PHP is commonly used for writing web services. It does not run in the browser, but rather on servers as discussed in the previous chapter.` }, { key: "rb", name: "Ruby", url: "https://en.wikipedia.org/wiki/Ruby", example: `# Ruby def count_all_files (subfolders, files) file_count = files.length subfolders.each do |subfolder| file_count += count_all_files(subfolder[0], subfolder[1]) end file_count end`, explanation: `In [Ruby](https://en.wikipedia.org/wiki/Ruby), we use keywords \`def\`, \`do\` and \`end\` to define functions and loops. The _foreach_ loop defines parameters with \`|\` rather than parenthesis. Ruby also has an [alternative syntax](https://ruby-for-beginners.rubymonstas.org/blocks/syntax.html), allowing you to use curly braces to mark the blocks. Some people appreciate it, while others think that it unnecessarily complicates the language. Ruby is used by the popular [Rails](https://rubyonrails.org/) framework.` }, { key: "lua", name: "Lua", url: "https://en.wikipedia.org/wiki/Lua", example: `-- Lua function count_all_files (subfolders, files) local file_count = #files for i = 1, #subfolders do file_count = file_count + count_all_files(subfolders[i][1], subfolders[i][2]) end return file_count end`, explanation: `[Lua](https://en.wikipedia.org/wiki/Lua) also has only minor differences to JavaScript: - Comments are marked with \`--\` instead of \`//\` - Local variables are defined with \`local\` rather than \`let\` - We can get length of an array with \`#\` rather than \`.length\` - Instead of curly braces, we use the keywords \`do\` and \`end\` - Indexing starts from \`1\` rather than \`0\` - The shorthand \`+=\` does not exist Many large, complex programs like _game engines_ make it possible to script smaller programs with Lua, so that people working on the project do not have to learn very complex languages like C. For example, Lua is used to develop games for [PICO-8](https://www.lexaloffle.com/pico-8.php) and [Playdate](https://play.date/).` } ]; return _.keyBy(l, "key"); }33:[{"id":"c3861e50bc66f8b96d3f79f169ffd07fbe112f8ad75a962209954b8ef6b39b494dbdbced5db8621aad4aee0531962c6de53b18fc87e3e3f8cab5b70bae9b96ed","href":"https://static.observableusercontent.com/files/c3861e50bc66f8b96d3f79f169ffd07fbe112f8ad75a962209954b8ef6b39b494dbdbced5db8621aad4aee0531962c6de53b18fc87e3e3f8cab5b70bae9b96ed","name":"image@1.png","type":"image/png","lastModified":1701603628949.552,"size":765102},{"id":"51f4b67c48efc2f07e02370fb2889e19a70ac7014323b1749aa3f6e766cbe815753e005dcfccbaa69ebf859a159979c5f3e619607734818c513baef9c95b7081","href":"https://static.observableusercontent.com/files/51f4b67c48efc2f07e02370fb2889e19a70ac7014323b1749aa3f6e766cbe815753e005dcfccbaa69ebf859a159979c5f3e619607734818c513baef9c95b7081","name":"image@8.png","type":"image/png","lastModified":1705237864267.475,"size":22927}] 2f:{"title":"Chapter 5: Languages","cells":[{"id":6769,"value":"chapterTitle(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6710,"value":"chapterProgress(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6721,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"Whether the same _logic_ is expressed in _JavaScript_ or _Python_, is ultimately not very meaningful. A _programming language_ is only a tool that helps us build useful programs.\n\nAs we already went through the fundamentals in previous chapters, let’s now look at the differences across languages, and the various tools available to us.","pinned":false,"hidden":false,"mode":"md"},{"id":6722,"value":"toc = getToc(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6633,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6947,"value":"## Pseudo code","pinned":false,"hidden":false,"mode":"md"},{"id":6949,"value":"When programmers work together, they often discuss fundamental programming logic by using _pseudo code_:\n\n> `IF x < max_x THEN x + 1 ELSE x = 0`\n\nPseudo code is not valid code in any language. It communicates the overall logic of the program.\n\nTwo programmers could write two different programs in different languages, both capturing this same logic.","pinned":false,"hidden":false,"mode":"md"},{"id":7011,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6652,"value":"## Programming languages","pinned":false,"hidden":false,"mode":"md"},{"id":7039,"value":"There are thousands of programming languages out there. Why so many?\n\n_[COBOL](https://medium.com/@sebastiandelimagec/the-basics-of-cobol-programming-language-79b865494e3c)_ was created ${currentYear - cobolCreatedYear} years ago in ${cobolCreatedYear}. With today’s knowledge and hardware, we can design more user-friendly and more performant languages.\n\nSometimes we want to put together a budget sheet in our web browser, and sometimes we want to render a model of the solar system in 3D. Some languages are general-purpose, but some are highly tailored for specific _use cases_.\n\nEach language also has its own syntax, tools, editors, communities and conventions.\n\nFor example, you can use _MATLAB_ to program mathematical notebooks and do very advanced math operations. MathWorks provides documentation, tools and community forums to help you. But this would not help you if you wanted to write a point-and-click adventure game: for that, other tools and communities offer a better resource.","pinned":false,"hidden":false,"mode":"md"},{"id":6911,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6661,"value":"## Syntax","pinned":false,"hidden":false,"mode":"md"},{"id":7031,"value":"Just like human languages, programming languages have grammar. Rules must be followed so that the computer understands what it’s being told to do.\n\n_Syntax_ is what defines the correct and incorrect way to write programming code. Let’s compare the syntax of different languages.","pinned":false,"hidden":false,"mode":"md"},{"id":7208,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7927,"value":"### Mainstream languages","pinned":false,"hidden":false,"mode":"md"},{"id":7210,"value":"Most mainstream languages look very similar, and you can apply your basic knowledge of programming to any of them:","pinned":false,"hidden":false,"mode":"md"},{"id":7531,"value":"viewof selectedLanguageKey = Inputs.radio(\n new Map(_.map(languages, l => [l.name, l.key])),\n {\n value: _.keys(languages)[0]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6798,"value":"```${selectedLanguage.key}\n${selectedLanguage.example}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":7558,"value":"md`${selectedLanguage.explanation}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6834,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7931,"value":"### Other languages","pinned":false,"hidden":false,"mode":"md"},{"id":7340,"value":"Other programming languages can be very different both in syntax and capabilities.\n\nHere is the formula of a computed field in _[Google Sheets](https://support.google.com/docs/table/25273?hl=en)_. Can you understand what it does?","pinned":false,"hidden":false,"mode":"md"},{"id":7645,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7732,"value":"viewof prettyPrintGoogleSheets = Inputs.toggle({\n label: \"Add line breaks\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7066,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7071,"value":"Here is a screenshot of a visual programming language on _[Bitspark](https://medium.com/dare-to-be-better/can-you-learn-programming-with-visual-programming-languages-f6cf83c17c70)_. It has representations for input, numbers, strings, functions and so on, but this time they are visual:","pinned":false,"hidden":false,"mode":"md"},{"id":7100,"value":"![image@1.png](${await FileAttachment(\"image@1.png\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":7063,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6845,"value":"Here is some [_Fortran_](https://www.tutorialspoint.com/fortran/fortran_basic_syntax.htm) code. Can you tell what it does?","pinned":false,"hidden":false,"mode":"md"},{"id":6849,"value":"```fortran\nprogram addNumbers\n implicit none\n\n ! Variable declarations with types\n real :: a, b, result\n\n ! Executable statements\n a = 12.0\n b = 15.0\n result = a + b\n print *, 'The total is ', result\n\nend program addNumbers\n```","pinned":false,"hidden":false,"mode":"md"},{"id":6865,"value":"While this is clearly different, it’s using basic concepts that you have already learned: variables, data types and output.","pinned":false,"hidden":false,"mode":"md"},{"id":7414,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7796,"value":"## Environments","pinned":false,"hidden":false,"mode":"md"},{"id":7800,"value":"The same programming language can work slightly differently depending on the context. For example, JavaScript can run in your browser, or on a server.\n\nLet’s say you want to draw a circle in the centre of the screen. Your program needs to calculate the correct `x` and `y` coordinates for it, which you can do using JavaScript:\n\n```js\nvar r = 10\nvar x = (window.innerWidth / 2) - r\nvar y = (window.innerHeight / 2) - r\n```\n\nOn a server though, there is no screen. This program does not make sense there.\n\nIn concrete terms, the `window` object does not exist in the server _environment_ and the above code would result in an error.","pinned":false,"hidden":false,"mode":"md"},{"id":7819,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7825,"value":"Similarly, you could write [Tic-tac-toe](https://en.wikipedia.org/wiki/Tic-tac-toe) for multiple platforms in [Lua](https://en.wikipedia.org/wiki/Lua).\n\nYour game logic runs multiple times per second. On each update, if the user has pressed the down key, you move the cursor down (i.e. change the current `y` coordinate).","pinned":false,"hidden":false,"mode":"md"},{"id":7830,"value":"On [Playdate](https://play.date/dev/), your code could look like this:\n\n```lua\ny = 0\nfunction playdate.update ()\n if playdate.buttonJustPressed(playdate.kButtonDown) then\n y = y + 1\n end\nend\n```","pinned":false,"hidden":false,"mode":"md"},{"id":7894,"value":"But on [PICO-8](https://www.lexaloffle.com/pico-8.php?page=resources), you would have to write the same program like this:\n\n```lua\ny = 0\nfunction _update ()\n if btnp(3) then\n y = y + 1\n end\nend\n```","pinned":false,"hidden":false,"mode":"md"},{"id":7806,"value":"Both platforms expose built-in functionality for you – but it might not be standardised across platforms, even though they use the same language.\n\nThe programming language sets the basics, but you must be conscious of the _environment_ your program will run in.","pinned":false,"hidden":false,"mode":"md"},{"id":7794,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7364,"value":"We have one big topic to tackle before we move to wrap-up: in the next chapter, we will talk about [AI technology](${chapters[chapterIndex + 1].url}).","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6744,"value":"chapterFooter(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6749,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6750,"value":"aboutAuthor","pinned":false,"hidden":false,"mode":"ojs"},{"id":7994,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7157,"value":"currentYear = new Date().getFullYear()","pinned":false,"hidden":false,"mode":"ojs"},{"id":7173,"value":"cobolCreatedYear = 1959","pinned":false,"hidden":false,"mode":"ojs"},{"id":6734,"value":"chapterIndex = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":7271,"value":"googleSheetsExample = `=IF(AND(C3, K3, NOT(ISBLANK(C3)), NOT(ISBLANK(K3))), -1 * (1 - K3/C3), \"\")`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7547,"value":"selectedLanguage = languages[selectedLanguageKey]","pinned":false,"hidden":false,"mode":"ojs"},{"id":7467,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":6742,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2777,"value":"import {\n getToc,\n tocCopyButton,\n wip,\n note,\n youtube,\n bookStyles,\n chapters,\n chapterTitle,\n chapterProgress,\n chapterFooter,\n aboutAuthor,\n style,\n px,\n em\n} from \"b20b90ae4c08d3fb\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6792,"value":"import { count_all_files } from \"fc931352f8210318\" // chapter 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":8006,"value":"tocCopyButton(toc)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7993,"value":"bookStyles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}