前端分为三层:
- 结构层(HTML) 定义网页的内容
- 表现层(CSS) 描述网页的布局 定义元素如何显示
- 行为层(Javascript) 定义网页的行为 JavaScript作者:布兰登·艾奇 1995年诞生 Netscape(网景公司) LiveScript 与Sun合作 JavaScript 1997年 将JavaScript1.1作为蓝本提交欧洲计算机制造商协会(ECMA) ECMAScript(核心语法)
JavaScript:分为三部分
- ECMAScript (js核心语法)
- DOM (文档对象模型) Document Object Model
- BOM(浏览器对象模型) Browser Object Model
Javascript引入方式
--行内嵌入JavaScript代码
<button onclick="javascript:alert('执行js代码')">点击一下</button>
--内部嵌入JavaScript代码
<body>
<script type="text/javascript"> console.log('内部js代码');
</script>
</body>
--外部嵌入JavaScript代码
<script src="index.js"></script>
JavaScript注释
<script>
// 单行注释
//console.log('a');
//多行注释
/*console.log('a');
console.log('b');
console.log('c');*/
</script>
JavaScript的基本语法 变量的声明 变量的赋值 关键字 ...
** JavaScript的输出方式**
1.文档输出:document
document.write('你好js');
2.控制台输出:console
console.log('你好js');
3.窗口输出:window
window.alert('你好世界');
window.prompt('这是输入框');
window.confirm('这是确认框');
JavaScript入口函数
JavaScript的入口函数 代码从上往下加载,防止文档没有加载结束就调用了js代码
<script>
window.oload{
console.log(document.getElementbyId("text"))
}
</script>
<body>
<h2 id="text">这是h2标签</h2>
</body>
JavaScript变量
1.字面量 固定的值
2.变量 可变的量
3.常量 不可改变的量
变量的声明 赋值 使用
变量的命名规范
变量的声明提升
函数及变量的声明都将被提升到函数的最顶部。
//先使用,后声明
x=10; console.log(x);
var x;
//先声明,后使用
var z; z = 10;
console.log(z);
JavaScript命名规则
1.不可以使用关键字命名,不能超过255个
2.不能以纯数字命名
3.以字母,$,_数字命名
4.命名尽量语义化
5.驼峰命名
6.以数据类型为开头
7.区分大小写
JavaScript声明提升
先声明,后执行 var有声明提升,提升到所有代码前面.
JavaScript数据类型
1.基本数据类型 Number,String,Boolean,undefined,null 混合数据类型 Object
2.值类型 Number--数字类型, String--字符串, Boolean--布尔值, undefined--未定义, null--空, symbol ES6新增的原始数据类型,表示独一无二的。 引用数据类型 Object --对象, Array --数组, Function--函数
JavaScript判断数据类型
数据类型
Number-- number
String-- string
Boolean-- boolean
Undefined--undefined
null-- object
Object --object
Array--object
Function--function
var num=10;
console.log(typeof num);
null 数据类型是 object; typeof操作符:用于获取一个变量或表达式的数据类型 typeof(变量或表达式) instanceof操作符:用于判断一个引用类型属于哪种类型
// 引用数据类型
// 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
a instanceof b a是否为b的引用
JavaScript数据类型的转换
--强制转换 Number(变量) 将变量转换为数字类型 被转换的变量为非数字,返回NaN (Not a Number)
var a='12345';
console.log(Number(a));
console.log(typeof a);
console.log( typeof Number(a));
String(变量) 将变量转换为字符串类型
var a=456780;
console.log(String(a));
console.log(typeof a);
console.log( typeof String(a));
Boolean(变量) 将变量转换为布尔值类型 除 0 "" '' undefined NaN 之外都返回true
var a=true;
console.log(Boolean(a));
console.log(typeof a);
console.log( typeof Boolean(a));
parseFloat(变量);将变量解析为小数用于字符串
var em = "168";
em =parseFloat(em);
console.log(em,typeof(em));
parseInt(变量);将变量解析为整数类型
var em = "168.77";
em =parseInt(em);
console.log(em,typeof(em));
变量的开头为非数字时,返回NaN
--隐式转换