前端分为三层：

• 结构层(HTML) 定义网页的内容
• 表现层(CSS) 定义元素如何显示 描述网页的布局
• 行为层(JavaScript) 定义网页的行为

是由布兰登·艾奇(Brendan Eich)创作的
1995诞生，Netscape(网景) Navigatror 和 Sun 合作 Java
LiveScript
1997 将Javascript1.1作为蓝本提交给欧洲计算机制造商协会(ECMA)
ECMAScript(核心语法)

宿主：在哪里运行
浏览器 node Adobe Flash

JavaScript分为三部分
1.ECMAScript(js核心语法部分)
2.DOM(文档对象模型) Document Object Model
3.BOM(浏览器对象模型) Browser Object Model

01 JavaScript的引入方式

• 行内嵌入JavaScript代码(不推荐使用)

  <button onclick="javascript:alert('行内嵌入js')">按钮</button>
  

• 内部js代码(学习时使用)

  <script type="text/javascript">
    console.log("内部js代码")  
  </script>
  

• 外部js文件(开发时使用)

• <script src="js文件路径" type="text/javascript"></script>

02 JavaScript的注释

这个是单行注释的方法
// 注释的内容

这是多行注释的方法
/*
注释的内容
注释的内容
注释的内容
*/

03 JavaScript的语法

变量
变量的声明：
var a;

变量的赋值：
a=10;
声明方法 func方法名
function func(){
执行的代码
}
数据类型
操作符
js语句
关键字
函数
....等

04 JavaScript

JavaScript的输出方式有三种（先记住有*的）

 1.文档输出  document
*document.write("这是通过document.write输出的内容")
 document.getElementById("text").innerText="这是innerText输出的文本"
 document.getElementById("box").innerHTML="<h2>这是innerHTML输出的文本</h2>"

 2.控制台输出  console
*console.log("这是控制台输出的日志");
 console.info("这是控制台输出的信息");
 console.warn("警告","这是控制台输出的警告");
 console.error("错误","这是控制台输出的错误");

 3.窗口输出  window
*window.alert("这是警告框");
 window.confirm("这是确认框");
 window.prompt("这是提示框");

05 JavaScript的入口函数

当文档（包含图片,音视频等资源）加载完成
当我们写在haed里时可以加以下代码：
window.οnlοad=function(){
执行的代码
console.log();
document.write("在文档中输出");
}

  （推荐使用）在body后面添加js代码。是因为代码从上而下加载   防止文档没有加载结束就调用了js代码

06 JavaScript的变量

字面量 固定的值 1 2 3 4 5

 变量  可变的量  容器
 变量的声明 var 或let  
var a;声明变量 变量名为a
console.log(a);
变量赋值用  = 
a=10;
console.log(a);使用a变量
 可以重新给a赋值
 a=20;
console.log(a);

 同时声明并赋值
var b=100;
console.log(b);

 同时声明多个变量
var x=10,y=20,z=30;
console.log(x,y,z);


常量  不可改变的量  const
const web21=10000;
（这是错误的） × web21=100000; 不可以赋第二个值
console.log(web21)

07 JavaScript变量的命名规则

1.不可以使用关键字或保留字命名,不能超过255个字符
var break=10;// Unexpected token 'break'
2.不能使用纯数字命名
var 2000=10000;//Unexpected number
3.变量以字母,$,_ 为开头
4.命名尽量语义化
5.驼峰命名 headerWrap
6.以数据类型为开头 sText nPrice oHeader
7.区分大小写

var a=10;
var A=20;
console.log(a);
console.log(A);（这两个不冲突）

javascript的关键字有：
abstract else instanceof super
boolean enum int switch
break export interface synchronized
byte extends let this
case false long throw
catch final native throws
char finally new transient
class float null true
const for package try
continue function private typeof
debugger goto protected var
default if public void
delete implements return volatile
do import short while
double in static with

08 JavaScript变量的声明提升

var 有声明提升  提升到所有的代码前面
先声明  后使用
console.log(a);// undefined  先使用 后生声明
var a=10;

console.log(c);// c is not defined  未声明 直接使用
 var b;
console.log("b:",b);
！注意：这里只是声明提升，赋值并不会一起提升，所以会显示undefined 

09 JavaScript的数据类型

值类型
Number:数字
var num=10;
String:字符串
var str1="hello wrold";
var str2='hello China';
var str3=hello Nanjing;// 反引号 ES6新增的 模板字符串
Boolean:布尔值
var bool1=true;
var bool2=false;
Undefined:未定义
var un;
Null:空
var kong=null;
Symbol:ES6中新增的原始数据类型，表示独一无二的值
var web21=Symbol("这是web21班");

 引用数据类型
 Object 对象
var obj={
    name:"张三",
    age:18
}
 Array 数组
var arr=[1,2,"a",{}];
 Function 函数/方法
function func(){
     方法执行的代码
}

10 JavaScript的数据类型判断

可以使用typeof和instanceof 来判断数据类型
！注意instanceof只能用于判断 引用数据类型
例：值类型
Number:数字
var num=10;
console.log(typeof(num));// number
console.log(typeof num);// number
String:字符串
var str1="hello wrold";
var str2='hello China';
var str3=`hello China`;// 反引号 ES6新增的 模板字符串
console.log(typeof(str1));// string
console.log(typeof(str2));// string
console.log(typeof(str3));// string
Boolean:布尔值
var bool1=true;
var bool2=false;
console.log(typeof(bool1));// boolean
console.log(typeof(bool2));// boolean
Undefined:未定义
var un;
console.log(typeof(un));// undefined
Null:空值 用来清空变量 var a=10; a=null;
var kong=null;
console.log(typeof(kong));// object
Symbol:ES6中新增的原始数据类型，表示独一无二的值
var web21=Symbol("这是web21班");
console.log(typeof(web21));// symbol

 引用数据类型
 Object 对象
var obj={
    name:"张三",
    age:18
}
console.log(typeof(obj));// object
 Array 数组
var arr=[1,2,"a",{}];
console.log(typeof(arr));// object
 Function 函数/方法
function func(){
    方法执行的代码
}
console.log(typeof(func));// function

console.log(arr instanceof Array);// true
console.log(obj instanceof Array);// false 
console.log(arr instanceof Object);// true

11 JavaScript数据类型的转换

11JavaScript数据类型的转换
var num=10;
var str="hello";
var str2="10000";
var bool1=true;
var bool2=false;
var un;
var nu=null;
var obj={};
var arr=[];
Number(变量) 将变量转换为数字类型 被转换的值为非数字，返回NaN(Not a Number)不是一个数字
console.log(Number(str));// NaN
console.log(Number(str2));// 10000
console.log(str2);
console.log(typeof Number(str2));// number
console.log(typeof str2);// string
console.log(typeof Number(str));// number
String(变量) 将变量转换为字符串类型
console.log(String(num));
console.log(typeof String(num));// string
console.log(typeof String(bool1));
console.log(String(arr));//
console.log(typeof String(arr));// string
Boolean(变量) 将变量转换为布尔值类型 除 0 "" '' null undefined NaN 之外都返回true
console.log(Boolean(num));// true
console.log(Boolean(str));// true
console.log(Boolean(obj));// true
console.log(Boolean(arr));// true
console.log(Boolean(0));// false
console.log(Boolean(''));// false
console.log(Boolean(""));// false
console.log(Boolean(nu));// false
console.log(Boolean(un));// false
console.log(Boolean(NaN));// false

 parseFloat(变量)  将变量转换为浮点类型(小数)
console.log(parseFloat("100.111"));
console.log(parseFloat("a100.111"));// NaN
console.log(parseFloat("100a.111"));// NaN
console.log(typeof parseFloat("100.111"));

 parseInt(变量)  将变量转换为整数类型
console.log(parseInt("100.911"));
console.log(parseInt("a100.111"));// NaN
console.log(parseInt("100a.111"));// NaN
console.log(typeof parseInt("100.111"));

第一天总结：经过第一天的学习，让我对js有了一定的了解。现在学习的内容大部分还是可以接受的，希望我能继续保持好状态，学习今后的内容。