Running & Testing :: IDEs jamie@drfrostmaths.com www.drfrostmaths.com @DrFrostMaths Last modified: 4th August 2019

www.drfrostmaths.com ? Everything is completely free. Why not register? Registering on the DrFrostMaths platform allows you to save all the code and progress in the various Computer Science mini-tasks. It also gives you access to the maths platform allowing you to practise GCSE and A Level questions from Edexcel, OCR and AQA. With Computer Science questions by: Your code on any mini-tasks will be preserved. Note: The Tiffin/DFM Computer Science course uses JavaScript as its core language. Most code examples are therefore in JavaScript. Using these slides: Green question boxes can be clicked while in Presentation mode to reveal. Slides are intentionally designed to double up as revision notes for students, while being optimised for classroom usage. The Mini-Tasks on the DFM platform are purposely ordered to correspond to these slides, giving your flexibility over your lesson structure. ?

Learning Objectives Directly from the OCR GCSE specification: This stuff

What are IDEs? ! Integrated Development Environments (IDEs) are software to help programmers, by providing tools to code, organise coding files and running/testing programs.

Features of IDEs :: Editor Most IDEs have a ‘auto-complete’ feature (called IntelliSense in Visual Studio). Visual Studio here knows that the variable test is a string, so “test.” is typed and Ctrl + Space pressed to activate the feature, it suggests all the available string methods that could be applied to this variable. But auto-complete can also suggest variables that are within scope, and so on.

Features of IDEs :: Editor Hovering your mouse over variables or functions will automatically display documentation about it. Here the IDE is telling us the parameters expected by the function split and the return type, as well as a sentence describing what it does. This is not just for existing pre-written utility functions: if you have multiple code files included within each other, the IDE will display the documentation you’ve written about constants/functions from elsewhere in that file/other files.

Features of IDEs :: Editor Line numbers. The line and character number you’re modifying. This is useful before JavaScript’s error console tells you the line and character number where the error occurred. The yellow Helpfully indicates lines of code that you’ve modified since the last save.

Features of IDEs :: Editor Auto-indents code (i.e. no need to add the spacing at the start of each line yourself) Auto-colours. In this case, blue for ‘keywords’ (e.g. var, if, else, return), red for values.

Features of IDEs :: Editor Ease of navigation. Can use these tabs to quickly swap between different code files that are up You can also quickly navigate to a particular function within that file.

Features of IDEs :: Editor A variety of other useful utilities, e.g. right-clicking a function name allows us to determine all parts of our code which call that function. Or renaming the function ensuring all calls to it are also renamed.

Features of IDEs :: Runtime Environment Visual Studio also provides a runtime environment, meaning we can run and test the code within the IDE. While we can’t run JavaScript code in Visual Studio, we can for Python. Code output is here.

Features of IDEs :: Translators/Error Diagnostics IDEs can also compile/interpret code for you. For languages where code is compiled (e.g. Python, but not JavaScript, without a suitable plugin), IDEs notify you of any syntax or other compiler errors. Visual Studio underlines these in red, and hovering the mouse over these displays the compiler error.

Features of IDEs :: Editor/GUI design Many IDEs (including Visual Studio) also allow you to design Graphical User Interfaces using a drag-and-drop style interface.

Features of IDEs :: Breakpoints Often we want to stop the code running at a particular point and see the current values of variables at that point, particularly to diagnose a problem. We can insert a ‘breakpoint’ at a particular line of code (in Visual Studio, right click line and choose ‘Insert Breakpoint’) When we run the code, it then stops at the breakpoint, and we can see the values of local variables at that point in time.

My confession… The DrFrostMaths code base was completely written in… Microsoft Notepad (or my FTP client’s inbuilt text editor) Why in this context it might not matter. Whereas normal programming languages need a compiler/translator to run, PHP/JS files can be run very easily in a browser (I just hit refresh!). I’m the only person who works on my codebase. Why I’m still a massive idiot: I have no excuse as I’m an experienced user of IDEs from my banking technology and PhD days. The IDE would remind of me of utility methods (e.g. string functions) without me endlessly having to Google those I’ve forgotten the syntax of. For larger JavaScript files (e.g. shared libraries between all DFM pages), it would allow me to navigate to the functions I need to find easier. I often have multiple code files open. Neither my FTP client nor Notepad has ‘tabs’. I often have to find all lines of code which call a particular function. In a simple text editor I have to resort to a simple text search (Ctrl + F). But I have now (finally!) switched to using Visual Studio.

Example Exam Question ? Note we get 1 mark for identifying the feature and 1 mark for identifying what it does. More

What Next? It is recommended that you experiment with the features of an IDE (we recommend Microsoft Visual Studio for either Python/JavaScript)