Scribd
Upload
65 views

JavaScript 02 WebStorm

This document provides an overview of using the WebStorm IDE for creating JavaScript programs. It discusses how Khan Academy uses JavaScript and Processing libraries, and how students need a full webpage rather than just Khan Academy code. It then explains how to download, install, and register for WebStorm. Steps are outlined for creating a new project, adding HTML files, and setting up the file structure. The document concludes with instructions for running programs in Chrome from within WebStorm.

Uploaded by

Anonymous 1BuyZjZ
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
65 views

JavaScript 02 WebStorm

This document provides an overview of using the WebStorm IDE for creating JavaScript programs. It discusses how Khan Academy uses JavaScript and Processing libraries, and how students need a full webpage rather than just Khan Academy code. It then explains how to download, install, and register for WebStorm. Steps are outlined for creating a new project, adding HTML files, and setting up the file structure. The document concludes with instructions for running programs in Chrome from within WebStorm.

Uploaded by

Anonymous 1BuyZjZ
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

CS 105: Introduction to Computer Programming

Creating a JavaScript program


using WebStorm
Instructor: Joel Castellanos
e-mail: [email protected]

Web: http://cs.unm.edu/~joel/
Office: Electrical and Computer
Engineering (ECE)
Room 233

3/7/2017

Khan Window Complete Program


The Khan Academy videos let you edit the JavaScript code
to create your own cool images, animations and more.
However, the code in the Khan Academy window is NOT a
full program: it only works inside Khan Academy's window.
For your homework assignments, you need to turn in a
complete webpage that does not use the Khan Academy
window.
Khan Academy uses JavaScript together with a powerful
JavaScript library called "Processing".
In order for your code to work, you will need to have a copy
of p5.js in the same directory as your .html file.
2

1
WebStorm IDE

WebStorm an Integrated Development Environment


(IDE) for writing JavaScript and HTML programs.

Download, Install, Register


Download WebStorm:
https://www.jetbrains.com/webstorm/

The above is a Free 30-day trial. Students can get a free


multi-year version by using an e-mail ending in .edu:
https://www.jetbrains.com/shop/eform/students

2
Starting and Configuring WebStorm

Set { } Format

3
Creating a Webstorm Project
If WebStorm already has an open project, close it.

Create a Project Directory

Note the path.

Your project folder

If you are in a lab, select


your USB drive.
8

4
Add an HTML File to Your Project

Double-click on the
project folder to open.

Right-click on the
project folder to
open the menu.

Create a new HTML file


in the project directory.
9

View of WebStorm With New .html File

HomePage.html where it
belongs: inside the
MyFirstProject folder.

Drive and folder path to


your project folder.
10

5
Creating a .zip Archive for Turn-in

Right-click on file or folder.

Select:
Send to Compressed (zipped) folder

You can also zip a whole


project folder. Do this when
your project contains many
source, image and/or sound
files.
11

& &
If chrome is your system's
default browser, you can run a
.html file in chrome from
WebStorm, by right-clicking the
file and selecting

However, if you do NOT want


chrome as your system's
default browser, you can still
tell WebStorm to use
chrome...... (see next slide)
12

6
Setting Webstorm's Default Browser
You only need to do this if chrome is NOT your
system's default browser.
Expand "Tools". Then Select "Web Browsers"

Drag Chrome to the


top of the list.

Change "System
default" to "First listed"

13

You might also like