前端之JavaScript基础(一)

一. 简介

JavaScript概念

JavaScript 是一种轻量级的编程语言,可插入 HTML 页面中,代码传输到浏览器中执行。

JavaScript作用:

1. 填写或者修改HTML中的内容
2. 修改HTML内容的样式
3. 响应web浏览器发生的事件

JavaScript的引用

JavaScript的代码如果出现在HTML文档中,则必须写在 <script> 与 </script> 标签之间

<script>
  // 在这里写你的JS代码
</script>

也可以独立写成js文件,再有HTML文档中引用

<script src="myscript.js"></script>

二. JavaScript语法基础

结果输出

1. 使用 window.alert() 弹出警告框。
2. 使用 document.write() 方法将内容写到 HTML 文档中。
3. 使用 innerHTML 写入到 HTML （标签）元素中。
4. 使用 console.log() 写入到浏览器的控制台。

window.alert()
弹出警告框显示内容

<script>
window.alert(5 + 6);
</script>

document.write()

<script>
document.write(Date());
</script>

innerHTML

<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素;
innerHTML = “段落已修改。” 是用于修改元素的 HTML 元素内容

console.log()

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

语言规范

注释
JavaScript 不会执行注释。
我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

单行注释以 // 开头
多行注释以 /* 开始，以 */ 结尾

分句
JavaScript中的语句要以分号（;）为结束符。

变量声明

var 关键词来声明变量,也可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var lastname="Doe", age=30, job="carpenter";

变量命名规范:

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
• 变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）

注意在JavaScript中声明了但没有赋值的变量,其变量值通通都是"undefined"

数据类型

JavaScript同python一样都动态语言,变量可以随时修改其值的类型.

数值

JavaScript不区分整型和浮点型，就只有一种数字类型。

字符串

字符串用引号表示,建议使用双引号.

常用方法

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, …)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

可以将方法名紧跟字符串,如

"panks".length

也可以将字符串赋值给变量,方法名紧跟变量后,如

var name="panks"
name.length

为了方便验证方法,直接开启浏览器开发者窗口的console进行编辑
concat拼接字符串

注意
string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者,直接显示空
如果start小于0，则切割从字符串末尾往前数的第(start)个的字符开始(包括该位置的字符),且stop只能表示为末尾往前数第(start)个后的字符
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)且start只能表示为末尾往前数第(st)个前的字符

布尔值

区别于Python，true和false都是小写。
var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都表示false

数组

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, …)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

遍历数组中的元素，可以使用下面的方式：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(a[i]);
}

对象

对象由花括号表示,在括号内部对象的属性以键值对的形式 (name : value) 来定义,每个属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];
#也可以将字符串赋值给变量,变量在[]中无需引号

运算符

算数运算符

+ - * / % ++ --

比较运算符

> >= < <= != == === !==

注意:
1 == “1” // true
1 === “1” // false

逻辑运算符

&& || !

赋值运算符

= += -= *= /=

流程控制

单层判断if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

多层判断if-else if-else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

多层判断switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

for循环

for (var i=0;i<10;i++) {
  console.log(i);
}

while循环

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b

函数

函数定义

JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数
(function(a, b){
  return a + b;
})(1, 2);

全局变量和局部变量

局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，该变量就会被删除。

全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它,网页关闭后,带变量才会被删除

注意
函数执行时首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。