打开控制台的方法

  • ctrl + shift + j 快速打开chrome控制台
  • 右键 检查

image.png

javascript 是什么， 可以用来做什么

1、是什么

a high-level object-oriented, multi-paradigm programming language
高级面向对象 多范式编程语言
what is javascript.jpg

2、可以做什么

web开发的三大核心
the role of javascript in web development.jpg
动态效果实例
example of dynamic effects.gif

3、简介

万能的javascript.jpg

ES ECMAScript
欧洲电脑制造商协会（European Computer Manufactures Association，ECMA国际的前身）
image.png

1、添加JavaScript到文件中

新建JavaScript文件
image.png
关联HTML和JavaScript
一般在 body 标签后添加
注意js文件的路径

  1. <body>
  2.   <h1>JavaScript Fundamentals – Part 1</h1>
  4.   <script src="script.js"></script>
  5. </body>

2、 values/ varibles/ types 值/变量/数据类型

驼峰命名
下划线命名

JavaScript里面所有的值都是一个对象

number floating point numbers decimals and integers
string sequence of characters text
boolean true/false taking decisions
undefined value taken by a varible that is
not define(“empty value”)
null 空值
symbol value that is unique and cannot
be changed
big int large integers than the number type can hold

特性：
dynamic typing 动态类型
image.png
undefined/null
image.png
注释

  1. // 这是一个注释
  3. /*
  4. 这是多行注释
  5. 这是多行注释
  6. 这是多行注释
  7. */

3、let/const/var

区别和什么情况下使用

let 声明变量，值可变
const 常量
var 旧的定义变量方式 
  1. let age = 20;
  2. age = 21;
  1. const bitthYear = 1990;
  2. /*
  3. 错误示范
  4. 1、声明结束后值不能改变
  5. birthYear = 1991;
  6. 2、声明变量后需要初始化
  7. const job
  8. */

4、basic operators 常见的操作符

transform values
combine values

5、strings and template literals 字符串和模板文字

  1. const firstName = 'jonas'
  2. const job = 'teacher';
  3. const birthYear = 1991;
  4. const year = 2040;
  5. const jonas = "I'm " + firstName + ', a ' + (year - birthYear) + ' year old ' + job + '!';
  6. console.log(jonas);
  9. const jonasNew = `I'm ${firstName}, a ${year - birthYear} year old ${job}!`;
  10. console.log(jonasNew);

image.png
模板字符串 不是单引号‘ ‘ 是反引号

模板字符串换行会很方便，不用写很多 /n/

  1. console.log('string with \n\
  2. multiple \n\
  3. lines');
  5. console.log(`string with
  6. multiple
  7. lines`);

image.png

  1. if(判断条件){
  2.   语句1;
  3. } else{
  4.   语句2;
  5. }

6、type conversion and corecion 类型转换/类型强制转换

type conversion

image.png
实际的值并没有改变
image.png

在使用的时候转换
image.png

not a number
image.png
白色的表示字符串 紫色的是数字
image.png

type corecion

加号 触发了对字符串的强制转换
这里将数字强制转换为了字符串
image.png
减号触发了强制转换
字符串 ===》 数字
image.png
数字===》字符串
image.png
image.png

7、True / False Values

5 false values
0, ‘ ‘, undefined, null, NaN
image.png
把整数 0 强制转换为了Boolean 类型
image.png
undefined 强制转换为了false
image.png

8、等号操作符 == vs===

strick
loose 有强制类型转化
image.png
只有一行语句时候，可以把花括号去掉，语句和判断语句写在一行里面
image.png

9、boolean logic: AND OR NOT

&&
||
！

10、switch statement 开关

可以两个case 写在一起表示执行现同的语句
image.png

11、 statement and expression 语句 和 表达式

an expression is a piece of code that produce a value

  1. 3 + 4; //表达式，并且产生一个值
  2. 1991; //本身是一个值，也是一个表达式
  3. true && false && !false;    //产生一个booean值


a statement is like a bigger piece of code that is excuted and which does not produce a value on itself
类比语言
表达式： 单词，这是构成句子的单词
语句：句子，描述我们行动的句子

12、conditional operator 条件运算符

(判断条件) ? (语句1) : (语句2)
image.png

image.png

13、JavaScript的版本

a brief history of javascript.jpg
backward compatibility.jpg