Sandbox::https://github.com/cfarm/intro-to-javascript/blob/gh-pages/class1.html

Repository navigation

History

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

737

738

739

740

741

742

743

744

745

746

747

748

749

750

751

752

753

754

755

756

757

758

759

760

761

762

763

764

765

766

767

768

769

770

771

772

773

774

775

776

777

778

779

780

781

782

783

784

785

786

787

788

789

790

791

792

793

794

795

796

797

798

799

800

801

802

803

804

805

806

807

808

809

810

811

812

813

814

815

816

817

818

819

820

821

822

823

824

825

826

827

828

829

830

831

832

833

834

835

836

837

838

839

840

841

842

843

844

845

846

847

848

849

850

851

852

853

854

855

856

857

858

859

860

861

862

863

864

865

866

867

868

869

870

871

872

873

874

875

876

877

878

879

880

881

882

883

884

885

886

887

888

889

890

891

892

893

894

895

896

897

898

899

900

901

902

903

904

905

906

907

908

909

910

911

912

913

914

915

916

917

918

919

920

921

922

923

924

925

926

927

928

929

930

931

932

933

934

935

936

937

938

939

940

941

942

943

944

945

946

947

948

949

950

951

952

953

954

955

956

957

958

959

960

961

962

963

964

965

966

967

968

969

970

971

972

973

974

975

976

977

978

979

980

981

982

983

984

985

986

987

988

989

990

991

992

993

994

995

996

997

998

999

1000

<!doctype html>

<head>

<title>Class 1 ~ Intro to JavaScript</title>

<link rel="stylesheet" href="reveal/lib/css/light.css">

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h3>JavaScript for Beginners</h3>

<h4>Class 1</h4>

<p><a href="js101-downloads.zip">Download class files</a></p>

</section>

<h3>Table of contents</h3>

<ul>

<li><a href="#/variables">Variables</a></li>

<li><a href="#/data-types">Data types</a></li>

<li><a href="#/functions">Functions</a></li>

<li><a href="#/boolean">Boolean variables</a></li>

<li><a href="#/conditionals">Conditionals (if/then statements)</a></li>

<li><a href="#/arrays">Arrays</a></li>

<li><a href="#/loops">Loops</a></li>

</ul>

</section>

<h3>Welcome!</h3>

<p>Philly Tech Sistas is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p>

<p class ="green">Some "rules"</p>

<ul>

<li>Every question is important.</li>

<li>Help each other.</li>

</ul>

</div>

</section>

<h3>Welcome!</h3>

<p class = "blue">Tell us about yourself.</p>

<ul>

<li>What do you hope to get out of the class?</li>

<li>What do you like about summer?</li>

</ul>

</div>

</section>

<h3>What is JavaScript?</h3>

<ul>

<li>JavaScript interfaces with HTML and CSS.</li>

<li>JavaScript lets you build dynamic webpages that respond to input from users.

<ul>

<li><a href="https://www.google.com/">Google</a></li>

<li><a href="http://www.consumerfinance.gov/owning-a-home/explore-rates/">Explore interest rates</a></li>

</ul>

</li>

</ul>

</section>

<h3>JavaScript is a client-side language</h3>

<p>JavaScript is a client-side processing language. A browser reads the code and runs it directly.</p>

<p class="credit">Photo credits: <a href="http://www.flickr.com/photos/papalars/5210226441/" target="_blank">Andrew E. Larson</a> and <a href="http://www.flickr.com/photos/johnseb/3425464/" target="_blank">John Seb Barber</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>

</section>

<h3>What is JavaScript?</h3>

<ul>

<li>JavaScript is standardized by the <a href="https://tc39.github.io/ecma262/">"ECMAScript" specifications</a>.</li>

<li>With JavaScript, you can write code once and use it everywhere. Pro tip: you want DRY code (<a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">Don't Repeat Yourself</a>).</li>

</ul>

</section>

<h3>Let's Develop It</h3>

<p>Let's write your first JavaScript program. Open your js101-downloads folder and find the <code>practice.html</code> file. Place this code inside, before the closing body tag:</p>

alert('Hello World!');

</script>

</code></pre>

<p>Open <code>practice.html</code> in a web browser to see your code in action.</p>

</section>

<h3>Script Tags</h3>

<p>You can mix JavaScript and HTML. The script tag tells your browser the stuff inside is JavaScript, not HTML.</p>

CODE GOES HERE

</script>

</code></pre>

</section>

<h3>JavaScript Files</h3>

<p>Just like with CSS, you can keep your JavaScript separate in its own file, and load it from your HTML file.</p>

</code></pre>

</section>

<h3>JavaScript statements</h3>

<p>After each individual statement, you must add a semicolon.</p>

console.log('Hello World!');

console.log('I am glad to meet you');

console.log('I am fuzzy');

</script>

</code></pre>

</section>

<h3>Comments</h3>

<p class="left-align">You can leave comments in your code—notes that people can read and computers will ignore.</p>

/*I can wrap long comments

with multiple lines

like this*/

console.log('Hello World!'); //Or mark short comments like this

</script>

</code></pre>

<p class="left-align"><span class="blue">Tip:</span> You can select text or a line in Sublime Text and comment it out easily with the keyboard:</p>

<li>Control + / (Windows)</li>

<li>Command(⌘) + / (Mac)</li>

</ul>

</section>

<h3>Getting results onto your screen</h3>

<p>Open a popup box.</p>

<pre><code>alert('Hello World!');

</code></pre>

<p>Display a message in your console.</p>

<pre><code>console.log('Hello World!');

</code></pre>

<p>Add something to the page.</p>

<pre><code>document.write('Hello World!');

document.getElementById('headline').innerHTML = 'Hello World!';

</code></pre>

</section>

<h3>Let's Develop It</h3>

<ul>

<li>Open practice.html. Add a comment to the code.</li>

<li>Try different ways of printing your message.</li>

<li>Create a new file called mycode.js. Move your JavaScript code to this file and link it to your page. </li>

<li>

<span class="blue">Hint:</span> remove any <script> open and close tags from your new JavaScript file, since these are HTML tags and only work in .html files.</li>

</ul>

</section>

<h3>Variables</h3>

<ul>

<li>A variable is a place to store values.</li>

<li>The value of a variable can change over time.</li>

</ul>

</section>

<h3>Variable Values</h3>

<p>When you first create a variable, it can be undefined (it has no value) or you can give it a value.</p>

<pre><code>var numberOfKittens; // undefined

var numberOfKittens = 5; // value is the number 5

</code></pre>

</section>

<h3>Declaring a Variable</h3>

<p>To declare (create) a variable, just type the word "var" and the variable name.</p>

<pre><code>var numberOfKittens;

</code></pre>

<p>It is a good idea to give your variable a starting value. This is called initializing the variable.</p>

<pre><code>var numberOfKittens = 5;

</code></pre>

</section>

<h3>Variable value types</h3>

<p>Variables can hold different types of information, like words, numbers, and collections of data.</p>

<pre><code>var numberOfKittens = 10; // a number

var numberOfKittens = 'ten'; // a word

var numberOfKittens = [0, 10, 15, 2]; // a list of numbers

</code></pre>

</section>

<h3>Naming Variables</h3>

<ul>

<li>The variable name is case-sensitive.</li>

<li>A new variable needs to have a unique name.</li>

<li>Variable names need to start with a letter, $, or _.</li>

<li>Variable names can only be made of letters, numbers, $, or _.</li>

</ul>

</section>

<h3>Using a Variable</h3>

<p>Once you have created a variable, you can use it in your code. Just type the name of the variable.</p>

<pre><code>var numberOfKittens = 5;

console.log(numberOfKittens);

</code></pre>

</section>

<h3>Let's Develop It</h3>

<p>In your JS file, create a variable and give it a valid name and a value. Then, display the value.</p>

<pre><code>var numberOfKittens = 5;

console.log(numberOfKittens);

document.getElementById('headline').innerHTML = numberOfKittens;

</code></pre>

<p>Refresh your page to see where the variable value appears.

</section>

<h3>Numbers</h3>

<p>Variable can be numbers, either integers or floats (decimals).</p>

<pre><code>var numberOfKittens = 5;

var cutenessRating = 9.6;

</code></pre>

</section>

<h3>Arithmetic Operators</h3>

<p>Once you have numbers, you can do math with them!</p>

<pre><code>var numberOfKittens = 5;

var numberOfPuppies = 4;

var numberOfAnimals = numberOfKittens + numberOfPuppies;

</code></pre>

</section>

<h3>Arithmetic Operators</h3>

<table>

<thead>

<tr>

<th>Example</th>

<th>Result</th>

</tr>

</thead>

<tbody>

<tr>

<td>Negation</td>

<td>Opposite of a.</td>

</tr>

<tr>

<td>Addition</td>

</tr>

<tr>

<td>Subtraction</td>

<td>Difference of a and b.</td>

</tr>

<tr>

<td>Multiplication</td>

<td>Product of a and b.</td>

</tr>

<tr>

<td>Division</td>

<td>Quotient of a and b.</td>

</tr>

<tr>

<td>Modulus</td>

<td>Remainder of a divided by b.</td>

</tr>

</tbody>

</table>

</section>

<h3>Let's Develop It</h3>

<p>Create two variables and try some arithmetic operators. Don't forget to display your results!</p>

<pre><code>var numberOfKittens = 5;

var numberOfPuppies = 4;

var numberOfAnimals = numberOfKittens + numberOfPuppies;

document.getElementById('headline').innerHTML = numberOfAnimals;

</code></pre>

</section>

<h3>Strings</h3>

<p>Variable can be strings, groups of characters. You put your string in quotes.</p>

<pre><code>var kittensName = 'Fluffy';

</code></pre>

<p>If you want to use a quote in your string, you'll need to "escape" it with a backslash.</p>

<pre><code>console.log('I\'d like to use an apostrophe');

</code></pre>

</section>

<h3>String Operators</h3>

<p>You can put strings together with a +, the concatenation operator.</p>

<pre><code>var kittensName = 'Fluffy ';

var fullName = kittensName + ' McDougle';

console.log(fullName); //Outputs 'Fluffy McDougle'

</code></pre>

</section>

<h3>String Operators</h3>

<p>You can also use += to add things to the end of a string.</p>

<pre><code>var kittensName = 'Admiral ';

kittensName += ' Snuggles';

console.log(kittensName); //Outputs 'Admiral Snuggles'

</code></pre>

</section>

<h3>Let's Develop It</h3>

<p>Create two variables, a first name and a last name, and then put them together to make a full name. Don't forget to display your results!</p>

</section>

<h3>Let's Develop It: The Fortune Teller</h3>

<p class="left-align">Why pay a fortune teller when you can just program your fortune yourself?</p>

<li>

Store the following into variables: city or place, job title, home, and hobby.</li>

<li>Output your fortune to the screen like so: "You will be a _job_ living in a _home_ in _city or place_. For fun you will _hobby_."</li>

</ul>

<br>

<p class="left-align"><span class="blue">Need help?</span> <a href="https://github.com/cfarm/intro-to-javascript/blob/gh-pages/solutions/fortune-teller.js">See one possible solution on Github.</a></p>

</section>

<h3>Functions</h3>

<p>Functions are separable, reusable pieces of code.

</section>

<h3>Using Functions</h3>

<p>First, declare the function.</p>

<pre><code>function turtleFact() {

console.log('A turtle\'s lower shell is called a plastron.');

}

</code></pre>

<p>Then, use it as many times as you want!</p>

<pre><code>turtleFact();

turtleFact();

</code></pre>

</section>

<h3>Let's Develop It</h3>

<p>Turn the code you wrote to output someone's full name into a function, then use it to output the name to the <code>practice.html</code> page.</p>

<pre><code>function sayMyName() {

var firstName = 'Kelly ';

var lastName = 'Rowland';

var fullName = firstName + lastName;

document.getElementById('headline').innerHTML = fullName;

}

sayMyName(); // don't forget to call it!

</code></pre>

<p>Bonus: Make your function automatically add a space between the names.</p>

</section>

<h3>Arguments</h3>

<p>Functions can accept input values, called arguments.</p>

<pre><code>function callKitten(kittenName) {

console.log('Come here, ' + kittenName + '!');

}

callKitten('Fluffy'); //outputs 'Come here, Fluffy!'

callKitten('Pumpkin'); //outputs 'Come here, Pumpkin!'

</code></pre>

</section>

<h3>Let's Develop It</h3>

<p>Update your full name function to take multiple arguments as inputs, so that it outputs different names to the page depending on how you call it:</p>

<pre><code>sayMyName('Destiny\'s', 'Child'); // should output "Destiny's Child"

sayMyName('Kelly', 'Rowland'); // should output "Kelly Rowland"

sayMyName('Michelle', 'Williams');

sayMyName('Beyoncé', 'Knowles');

</code></pre>

</section>

<h3>Arguments</h3>

<p>Argument values can be numbers, which means we can make Javascript do math for us over and over.</p>

<pre><code>function addNumbers(a, b) {

console.log(a + b);

}

addNumbers(5,7); //outputs 12

addNumbers(9,12); //outputs 21

</code></pre>

</section>

<h3>Arguments</h3>

<p>You can also pass variables into functions. <span class="blue">Note:</span> These variables <strong>do not</strong> have the same name as the function arguments.</p>

<pre><code>function addOne(inputNumber){

var newNumber = inputNumber + 1;

console.log('You now have ' + newNumber);

}

//Declare variables

var numberOfKittens = 5;

var numberOfPuppies = 4;

//Use them in functions

addOne(numberOfKittens);

addOne(numberOfPuppies);

</code></pre>

</section>

<h3>Returning Values</h3>

<p>You can have a function give you back a value, to use later.</p>

<pre><code>function square(num) {

return num * num;

}

console.log(square(4)); // outputs '16'.

</code></pre>

<p>Return will immediately end a function.</p>

</section>

<h3>Returning Values</h3>

<p>You can use variables to save the return value from a function.</p>

<pre><code>function square(num) {

return num * num;

}

var squareOfFive = square(5); // will make squareOfFive equal 25.

</code></pre>

</section>

<h3>Let's Develop It</h3>

<p>Add a return statement to your name function. Use that function to set the value of a variable.</p>

<pre><code>function sayMyName(first, last) {

// this also adds a space between the 2 arguments

return first + ' ' + last;

}

var name1 = sayMyName('Kelly', 'Rowland');

var name2 = sayMyName('Michelle', 'Williams');

alert(name1);

document.getElementById('headline').innerHTML = name2;

</code></pre>

</section>

<h3>Let's Develop It: The Calculator</a></h3>

<p class="left-align">Write a function called <code>squareNumber</code> that will take one argument (a number), square that number, and return the result. It should also log a string like "The result of squaring the number 3 is 9."</p>

<p class="left-align"><a href="https://github.com/cfarm/intro-to-javascript/blob/gh-pages/solutions/calculator-squareNumber.js">See one possible solution on Github.</a>

</section>

<h3>Let's Develop It: The Calculator</a></h3>

<p class="left-align">Write a function called <code>halfNumber</code> that will take one argument (a number), divide it by 2, and return the result. It should also log a string like "Half of 5 is 2.5.".</p>

<p class="left-align"><a href="https://github.com/cfarm/intro-to-javascript/blob/gh-pages/solutions/calculator-halfNumber.js">See one possible solution on Github.</a>

</section>

<h3>Let's Develop It: The Calculator</a></h3>

<p class="left-align">Write a function called <code>percentOf</code> that will take two numbers, figure out what percent the first number represents of the second number, and return the result. It should also log a string like "2 is 50% of 4."</p>

<p class="left-align"><a href="https://github.com/cfarm/intro-to-javascript/blob/gh-pages/solutions/calculator-percentOf.js">See one possible solution on Github.</a>

</section>

<h3>Let's Develop It: The Calculator</a></h3>

Write a function called <code>areaOfCircle</code> that will take one argument (the radius), calculate the area based on that, and return the result. It should also log a string like "The area for a circle with radius 2 is 12.566370614359172."

<ul><li>Bonus: Round the result so there are only two digits after the decimal.</li></ul>

</p>

<p class="left-align"><a href="https://github.com/cfarm/intro-to-javascript/blob/gh-pages/solutions/calculator-areaOfCircle.js">See one possible solution on Github.</a>

</section>

<h3>Review</h3>

<p>In this code, spot the comments, variables, operator, function, argument, and return value.</p>

<pre><code>function calculateTip(total) {

var tipPercent = 0.15; //Can be changed

return (total * tipPercent);

}

var billPreTip = 10;

var billTip = calculateTip(billPreTip);

var receipt = 'Meal: ' + billPreTip + ' Tip: ' + billTip +

' Total: ' + (billPreTip + billTip);

console.log(receipt);

</code></pre>

</section>

<!-- <section>

<h3>Variable Scope</h3>

<p>The scope of a variable is how long the computer will remember it.</p>

</section>

<h3>Global Scope</h3>

<p>A variable declared outside a function has a <span class="yellow">global</span> scope and can be accessed anywhere, even in a function.</p>

<pre><code>var awesomeGroup = 'Philly Tech Sistas'; //Global scope

function whatIsAwesome() {

console.log (awesomeGroup + ' is pretty awesome.'); //Will work

}

whatIsAwesome();

</code></pre>

</section>

<h3>Local Scope</h3>

<p>A variable declared within a function has a <span class="yellow">local</span> scope and can only be accessed within that function.</p>

<pre><code>function whatIsAwesome() {

var awesomeGroup = 'Philly Tech Sistas'; //Local scope

console.log ('I made a variable called awesomeGroup with a value of ' + awesomeGroup); //Will work

}

whatIsAwesome();

console.log (awesomeGroup + ' is pretty awesome.'); //Won't work

</code></pre>

</section>

-->

<h3>Boolean Variables</h3>

<p>Boolean variables represent the logical values True and False</p>

<pre><code>var catsAreBest = true;

var dogsRule = false;

</code></pre>

</section>

<h3>The if statement</h3>

<p>Use if to decide which lines of code to execute, based on a condition.</p>

<pre><code>if (condition) {

// statements to execute

}

</code></pre>

<pre><code>var bananas = 5;

if (bananas > 0) {

console.log ('You have some bananas!');

}

</code></pre>

</section>

<h3>Comparison Operators</h3>

<thead>

<tr>

<th width="150px">Example</th>

<th>Result</th>

</tr>

</thead>

<tbody>

<tr>

<td>Equal</td>

<td><strong><code>TRUE</code></strong> if a is equal to b (can be different types).</td>

</tr>

<tr>

<td>Identical</td>

<td>

<strong><code>TRUE</code></strong> if a is equal to b, and the same type. </td>

</tr>

<tr>

<td>Not equal</td>

<td><strong><code>TRUE</code></strong> if a is not equal to b (can be different types).</td>

</tr>

<tr>

<td>Not identical</td>

<td>

<strong><code>TRUE</code></strong> if a is not equal to b, or they are not the same type.</td>

</tr>

<tr>

<td><strong><code>TRUE</code></strong> if a is strictly less than b.</td>

</tr>

<tr>

<td>Greater than</td>

<td><strong><code>TRUE</code></strong> if a is strictly greater than b.</td>

</tr>

<tr>

<td>Less than or equal to </td>

<td><strong><code>TRUE</code></strong> if a is less than or equal to b.</td>

</tr>

<tr>

<td>Greater than or equal to </td>

<td><strong><code>TRUE</code></strong> if a is greater than or equal to b.</td>

</tr>

</tbody>

</table>

</section>

<h3>Truthy and Falsy</h3>

<p>If you try to use a value other than "true" or "false" JavaScript will treat them as "truthy" or "falsy."</p>

<p>"Falsy" values:

<li>The number 0</li>

<li>the empty string <code>""</code></li>

<li>undefined</li>

<li>null are considered false</li>

</ul>

<p>Everything else is "truthy."</p>

</section>

<h3>Strict and loose equality</h3>

</section>

<h3>Watch out!</h3>

</section>

<h3>Let's Develop It</h3>

<p>Make a variable called "temperature." Write some code that tells you to put on a coat if it is below 50 degrees.</p>

</section>

<h3>The if/else statement</h3>

<p>Use else to provide an alternate set of instructions.</p>

<pre><code>var age = 28;

if (age >= 16) {

console.log ('Yay, you can drive!');

} else {

console.log ('Sorry, but you have ' + (16 - age) +

' years until you can drive.');

}

</code></pre>

</section>

<h3>The if/else if/else statement</h3>

<p>If you have multiple conditions, you can use else if.</p>

<pre><code>var age = 20;

if (age >= 35) {

console.log('You can vote AND hold any place in government!');

} else if (age >= 25) {

console.log('You can vote AND run for the Senate!');

} else if (age >= 18) {

console.log('You can vote!');

} else {

console.log('You can\'t vote, but you can

still write your representatives.');

}

</code></pre>

</section>

<h3>Let's Develop It</h3>

<p>Modify your "wear a coat" code for these conditions:</p>

<ol>

<li>If it is less than 50 degrees, wear a coat.</li>

<li>If it is less than 30 degrees, wear a coat and a hat.</li>

<li>If it is less than 0 degrees, stay inside.</li>

<li>Otherwise, wear whatever you want.</li>

</ol>

</section>

<h3>Logical Operators</h3>

<table>

<thead>

<tr>

<th width="200px">Example</th>

<th>Result</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<td><strong><code>TRUE</code></strong> if either a or b is <strong><code>TRUE</code></strong>.</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</section>

<h3>Using logical operators</h3>

<p>You can use these operators to combine conditions.</p>

<pre><code>var bananas = 5;

if (bananas >=2 && bananas <7) {

console.log('You have a reasonable number of bananas');

} else {

console.log('Check your banana supply');

}

</code></pre>

</section>

<h3>Let's Develop It</h3>

<p>Add a logical operator to your what to wear program.</p>

<pre><code>if (temperature > 60 && temperature < 70) {

document.getElementById('welcome-message').innerHTML =

'the weather is lovely, wear whatever you like';

} else if (temperature > 100 || temperature < 0) {

document.getElementById('welcome-message').innerHTML =

'stay inside, the weather is awful';

}

</code></pre>

</section>

<h3>Let's Develop It</h3>

<p><a href="https://cfarm.github.io/intro-to-javascript/puzzles.html#bigger">JavaScript Puzzle: What number is bigger?</a></p>

</section>

<h3>Arrays</h3>

<p>Arrays are ordered lists of values.</p>

<pre><code>var arrayName = [element0, element1, ...];

</code></pre>

<p>You can put different types of data into an array.</p>

<pre><code>var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green',

'Blue', 'Indigo', 'Violet'];

var lotteryNumbers = [33, 72, 64, 18, 17, 85];

var myFavoriteThings = ['Broccoli', 1024, 'Sherlock'];

</code></pre>

</section>

<h3>Array Length</h3>

<p>The length property tells you how many things are in an array</p>

<pre><code>var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green',

'Blue', 'Indigo', 'Violet'];

console.log(rainbowColors.length);

</code></pre>

</section>

<h3>Using Arrays</h3>

<p>You can access items with "bracket notation" by using the position of the object you want. Programmers start counting at zero.</p>

<pre><code>var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green',

'Blue', 'Indigo', 'Violet'];

var firstColor = rainbowColors[0];

var lastColor = rainbowColors[6];

</code></pre>

</section>

<h3>Let's Develop It</h3>

<p>Create an array of your favorite foods. Display a few values on your screen.</p>

<pre><code>var myFaveFoods = ['chocolate', 'pickles', 'avocados'];

console.log(myFaveFoods[0]);

console.log(myFaveFoods[1]);

console.log(myFaveFoods[2]);

</code></pre>

</section>

<h3>Changing arrays</h3>

<p>You can use bracket notation to change an item in an array</p>

<pre><code>var myFavoriteThings = ['Broccoli', 1024, 'Sherlock'];

myFavoriteThings[0] = 'Asparagus';

</code></pre>

</section>

<h3>Expanding arrays</h3>

<p>Arrays do not have a fixed length. You can use "push" to add something to an array.</p>

<pre><code>var myFavoriteThings = ['Broccoli', 1024, 'Sherlock'];

myFavoriteThings.push('Dancing');

</code></pre>

</section>

<h3>Let's Develop It</h3>

<p>Change the first and last items in your favorite foods array using bracket notation, and add new items using the "push" function. Then display your new values on the page.</p>

<pre><code>var myFaveFoods = ['chocolate', 'pickles', 'avocados', 'tofu scramble', 'pancakes', 'donuts'];

myFaveFoods[0] = 'chocolate cake to be more specfic';

myFaveFoods.push('lemons');

document.getElementById('foods').innerHTML = myFaveFoods;

</code></pre>

</section>

<h3>While loops</h3>

<p>While will repeat the same code over and over until some condition is met.</p>

<pre><code>var bottlesOfBeer = 99;

while (bottlesOfBeer >= 1) {

console.log (bottlesOfBeer + ' bottles of beer on the wall');

bottlesOfBeer = bottlesOfBeer - 9;

}

</code></pre>

</section>

<h3>Infinite Loops</h3>

<p>Make sure something changes in the loop, or your loop will go on forever...</p>

</section>

<h3>For loops</h3>

<p>For loops are very similar, but you declare a counter in the statement.</p>

<pre><code>//will count 1 to 10

for (var i = 1; i <= 10; i++) {

console.log (i);

}

</code></pre>

</section>

<h3>Iterating through arrays</h3>

<p>Use a for loop to easily process each item in an array.</p>

<pre><code>var rainbowColors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];

for (var i = 0; i < rainbowColors.length; i++) {

console.log(rainbowColors[i]);

}

</code></pre>

</section>

<h3>Let's Develop It</h3>

<p>Use a loop to make a list of all your favorite foods. For now, use <code>console.log</code> to view the list.</p>

<pre><code>var myFaveFoods = ['pancakes', 'avocados', 'donuts'];

for (var i = 0; i < myFaveFoods.length; i++) {

console.log(myFaveFoods[i]);

}</code></pre>

</section>

<h3>Let's Develop It</h3>

<p>Now update your loop so it can output the list of foods on your HTML page.</p>

<pre><code>var foodString = '';

for (var i = 0; i < myFaveFoods.length; i++) {

foodString += myFaveFoods[i] + ', ';

}

document.getElementById('foods').innerHTML = foodString;

</code></pre>

<p>Alternate solutions..</p>

<ul>

<li>Save `myFaveFoods[i]` as a variable to make it reusable for outputting in different ways.</li>

<li>Make each food an <code>li</code> element inside an unordered list (<code>ul</code>).</li>

</ul>

</section>

<h3>Loops and logic</h3>

<p>You can add other statements or logical operators inside the loops.</p>

<pre><code>//Count from 1 to 50

for (var i = 1; i <= 50; i++) {

console.log (i);

//Says 'Buzz' after multiples of three

if (i % 3 == 0) {

console.log (' Buzz');

}

//Says 'Bang' after multiples of five

if (i % 5 == 0) {

console.log (' Bang');

}

</code></pre>

</section>

<h3>Break</h3>

<p>To exit a loop, use the break statement.</p>

<pre><code>//Count from 100 to 200

for (var i = 100; i <= 200; i++) {

console.log('Testing ' + i);

//Stop at the first multiple of 7

if (i % 7 == 0) {

console.log('Found it! ' + i);

break;

}

</code></pre>

</section>

<h3>Group exercise: Fizz Buzz</h3>

<p>Write a program that prints the numbers from 1 to 100. </p>

<p>But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”.

<p>For numbers which are multiples of both three and five print “FizzBuzz”.</p>

<pre><code>//Count from 1 to 100

for (var i = 1; i <= 100; i++) {

}

</code></pre>

</section>

<h3>Let's Develop It</h3>

<p>

<a href="https://cfarm.github.io/intro-to-javascript/puzzles.html#evenodd">JavaScript Puzzle: Even/Odd Counter</a>

</p>

</section>

<h3>Let's Develop It</h3>

<p>Write a loop that gives you the 9's times table,<br /> from 9 x 1 = 9 to 9 x 12 = 108.</p>

<p>Finish early? Try using a loop inside a loop to write all the times tables, from 1 to 12.</p>

</section>

<h3>Resources</h3>

<ul>

<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">JavaScript Guide</a>, from the Mozilla Developers Network.</li>

<li><a href="http://www.codecademy.com/tracks/javascript" target="_blank">Code Academy</a>, with interactive JavaScript lessons to help you review.</li>

<li><a href="http://javascriptweekly.com/latest">JavaScript Weekly</a>, an email round-up of JavaScript news and articles.</li>

</ul>

</section>

<!-- <section>

<h3>Let's Develop It</h3>

<p><a href="http://goo.gl/forms/GuDEHhXEA1KaLGGO2">Class 1 Feedback Survey!!!!<br>

http://goo.gl/forms/GuDEHhXEA1KaLGGO2</a></p>

</section> -->

</div>

<div>

<a href="#/toc" style="display: block; position: absolute; bottom: 15px; left: 48%; font-size: 16px">Table of Contents</a>

</div>

Intro to JavaScript

</div>

</footer>

</div>

// Full list of configuration options available here:

View remainder of file in raw view

FilesExpand file tree

class1.html

Latest commit

History

class1.html

File metadata and controls