day47-HTML页面搭建及语法

目录

• 搭建页面的顺序
• JavaScript
  • 注释
  • 引入方式
  • 变量
    • 命名规范
  • 常量
  • 数据类型
    • 查看数据类型
    • 数值类型
    • 字符类型
      • 模板字符串
  • 布尔值
    • null和undefined
    • 数组
    • 类型查询
    • 算术运算符
    • 逻辑运算符
    • 赋值运算符
    • 流程控制
      • if-else
      • switch
      • for循环
      • while循环
      • 三元运算
  • 函数
    • 函数定义
      • arguments参数
  • 全局变量和局部变量
    • 局部变量
    • 全局变量
    • 变量生存周期
    • 自定义对象
    • Date对象
    • JSON对象
    • RegExp对象

搭建页面的顺序

1. 先将html的骨架全部写好
2. 再写css

JavaScript

前端的一门有逻辑的编程语言

node.js 支持前端js代码，跑在后端服务器上

Js和Java没有关系

当前使用较多的版本

1. 2011-ECMAScript5.1
2. 2015-ECMAScript6

注释

//单行注释

/*
多
行
注
释
*/

引入方式

1. script标签内部只写书写
2. 通过script标签src书写，引入外部js文件

变量

1. var 声明的是全局变量，在局部声明的是局部变量
2. let 可以只在局部有效（在全局声明则全局有效）ES6新语法
3. js代码默认是以分号作为结束符

命名规范

1. 数字、字母、下划线、$
2. 不能使用关键字命名
3. 推荐使用驼峰体

常量

const 定义真正的常量，不能被修改

数据类型

1. 数值类型 Number（int,float）
2. 字符类型string
3. 对象 object
   • 数组 []
   • 自定义对象 {}
4. 布尔值 Boolean true/false一定小写
5. undefined
6. symbol 表示独一无二的值

查看数据类型

typeof

数值类型

包含整型和浮点型

NaN（not a number）也是数值类型，但表示的意思是 不是一个数字

字符类型

字符串的拼接

1. python中不推荐使用加号（效率极低），推荐%s，format
2. js中推荐使用加号

模板字符串

ES中引入了模板字符串，用反引号(`)来标识

可以当作普通字符串使用，也可用来定义多行字符串，或者在字符串中嵌入变量

布尔值

true/false都是小写

null和undefined

• null表示值是空，一般需要指定或清空一个变量时才会使用，如name=null
• undefined表示当使命一个变量但未初始化时，该变量的默认值，即var name但是没有赋值，name的值是undefined；当函数没有明确的返回值时，返回的是undefined,

数组

类似于python数组

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

var arr1 = [11,22,33,44];
arr1.forEach(function(value, index, arr){
    console.log(value, index, arr)
})

/*
value必选，index和arr可不选
value遍历数组的每个值，index表示索引，arr表示value所属的数组对象
*/

//arr.splice(index, howmany, item1,...)
/*
index表示索引，howmany表示从index开始（包括index）往后删除几个元素，item表示插入的元素
*/

value遍历数组，index表示索引，arr表示value来自那个数组对象
产生新的数组，原数组不变

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

类型查询

typeof()

是一个一元运算符

如果变量是undefined\Boolean\Number\String类型的，就分别返回undefined\boolean\number\string;

如果变量是一种引用类型或Null类型的，则返回object

算术运算符

+、-、*、/、%、++、--

比较运算符

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

注意：
1 == '1' //true 弱等于
1 === ’1‘  //false 强等于

逻辑运算符

&&、||、!
与、或，非

赋值运算符

=、+=、-=、*=、/=

流程控制

if-else

if (condition){
    code
}else if (codition){
    code
}else {
    code
}

switch

switch(variable){
    case res_1:
    code;
    break;
    case res_2:
    code;
    break;
    case res_3:
    code;
    break;
}

如果不加break语句，则case条件成立后，后面的case都会执行

for循环

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

while循环

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

三元运算

ar a = 1;
var b = 2;
var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；

函数

函数定义

function f1() {  //无参函数
  console.log("Hello world!");
}

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

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


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


var f = v => v;  //使用 => 定义函数
/* 等同于
var f = function(v){
  return v;
}
*/

/*
传入过多的参数也不会报错，可以进行手动判断
*/

arguments参数

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

全局变量和局部变量

局部变量

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

全局变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

自定义对象

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

var person=new Object();  // 创建一个person对象
person.name="Alex";  // person对象的name属性
person.age=18;  // person对象的age属性

Date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

RegExp对象

// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')

/*第一个注意事项，正则表达式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/

// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();