Then we’ll need to add 2 new functions above our draw() function, which help us get the mouse X, Y coordinate location and put it in some text in the upper-right of our canvas for us to see as we move our mouse around.
#JAVASCRIPT BBEDIT CODE#
If this doesn’t completely make sense yet, don’t worry, try putting in the code and test it out and that should help your understanding of how the mouse movement can be tracked and displayed. This will setup a mouseX and mouseY that will keep track of the X, Y coordinate locations of our mouse cursor in our JavaScript app, by listening to the mouse movement event. Var mouseX = 0 var mouseY = 0 canvas.addEventListener(“mousemove”, getMouseXY, false) Each file should contain UTF-8 text (no BOM) with.
To do this we’ll need to do a few things, starting with adding 3 lines of JavaScript code right above the init() function. What is best thing to do or get to format javascript code in BBEdit (8.2.6), Tidy formats the HTML (meaning basically indenting and making block elements. You can have multiple keyword files mapped to the same language, if you wish. Let’s make a few changes to create a bit of a “tool” to help us with our canvas coordinate locations, using our own mouse cursor. So convenient and there are many other cool features of BBEdit, but that’s probably good enough for now, so we can get back to coding JavaScript and make cool stuff! Quick JavaScript function jump-to selection menu BBEdit feature.Īnother super helpful feature of BBEdit and many other code editors, is the function selection drop-down menu, which can quickly take you to that selected function in your code.
#JAVASCRIPT BBEDIT SERIES#
Once you have that installed, go ahead and open your JavaScript.html file from Part 4 of this coding tutorial series and you will immediately see a difference, like text coloring, where the word “function” shows up as blue.
To get there quickly, choose Text Filters from the Folders menu on the BBEdit application menu, which will open a Finder window on the correct location. Text filters live in the Text Filters support folder. One that (as of now), you won’t find in the Apple App Store, but, is an equally great choice (especially if you are on Windows) is Visual Studio Code or VSCode for short and you can find that here: A text filter may be a Unix script, AppleScript file, BBEdit Text Factory, or Automator workflow. There are plenty of great code editor choices, but I’m going to choose BBEdit in this case, which is free, won the Editor’s Choice award and you can conveniently find it in the Apple App Store here:
TextEdit has served us well, but for coding and programming there are some programmer features that we don’t get with a TextEdit or Notepad-like application.
#JAVASCRIPT BBEDIT UPGRADE#
In the 1st four parts, we have done quite a lot with animation, randomness and more… So, much in fact, we have almost our 1st 100 lines of JavaScript! Congratulations on your way to learning quite a bit of JavaScript so far.Īt this point, with 100 lines of JavaScript code, I think we are due for a text editor upgrade and good thing for us, there are many free software options available for macOS, Windows and Linux.