JavaScript 学习了解

Introduction

技多不压身。。。。。。

想要让网页多样化,还是离不开前端常用的 JS

Getting Started

实现网页复杂非静态效果必不可少的编程语言,可为网页添加交互功能

js 代码嵌入 html 时,将 <script> 放在 html 文件的底部会是很好的选择;因为浏览器会按照代码在 html 文件中的顺序加载 html,如果预先加载的 JavaScript 期望修改下方的 html,可能会由于 html 尚未被加载而失效

1. 变量

每一种编程语言,都离不开变量的定义,python 中的变量并不需要额外定义,直接进行赋值即可;但是 JS 则需要在赋值前对其进行定义;

1
2
3
let var1;
// or
var var2;

要声明一个变量,需要键入关键字 letvar;后接合适的变量名;需要注意的是其对大小写敏感。

那么 let 与 var 两者有什么区别呢?

  • var 支持初始化一个变量后用其对其进行声明,仍然可以正常运行;但 let 不行
  • var 可以多次声明相同名称的变量,但 let 不行
  • 需要注意的是:以上 var 的特性并不是一件好事,因为这种操作只会让代码看起来更加混乱,难以理解;所以推荐使用 let 来声明变量

命名规则

  • [0-9]
  • [a-z]
  • [A-Z]
  • [_]
  • 变量名不以下划线开头
  • 不以数字开头
  • 小写驼峰命名法:用来将多单词组合一起,小写整个命名的第一个字母,大写其余单词的首字母
  • 变量名直观,最好是能代表你声明该变量的用途
  • 变量名大小写敏感
  • 避免使用 Javascript 的保留字给变量命名,诸如:varletfunction

1.1 变量类型

JavaScript 是一种 “动态类型语言”,所以不需要指定变量将包含什么数据类型

  • Number
1
let myAge = 24;
  • String
1
let myString = 'hello world';
  • Boolean
1
2
3
let iAmAlive = true;
// or
let test = 6 < 3; // false
  • Array
1
2
3
4
5
6
let myNameArray = ['Chris', 'Bob', 'Jim'];
let myNumberArray = [10,15,40];

// 访问数组
myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40
  • Object
1
2
3
let dog = { name : 'Spot', breed : 'Dalmatian' };
// 检索存储在对象中的信息
dog.name

1.2 注释

  • 多行注释
1
2
3
4
5
/*
line1;
line2;
......
*/
  • 单行注释
1
// 这是一条注释。。。

1.3 运算符

运算符 解释 符号
数字相加 / 字符串拼接 +
减、乘、除 与基础算术一致 -、*、/
赋值运算符 变量赋值 =
等于 变量判断,返回布尔值(true/false) ===
不等于 变量判断,返回布尔值 !==
取非 返回逻辑相反的值,比如当前值为真,则返回 false

2. 条件语句

if ... else ...

References

[1] https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics

[2] https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Variables

[3] https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools

[4] https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators

[5] https://js1k.com/