JavaScript
JavaScript是一种运行在浏览器的脚本语言
发明人:布兰登·艾奇 1995 宿主:浏览器 node Adobe Flash
JavaScript分为三部分 1.ECMAScript(核心语法部分) 2.DOM(文档对象模型)Document Object Model 3.BOM(浏览器对象模型)Browser Object Model
JavaScript引入方式
行内嵌入js代码(不推荐使用) 按钮
内部js代码(练习时推荐使用)
外部js文件(实际开发时使用)
JavaScript的语法
//单行
/*多行
注释*/
变量的声明 var a:
变量的赋值 a=10
声明方法 func方法名
function func(){
}
关键字
js语句
函数
...
JavaScript的输出方式
1.文档的输出: document
document.write("内容")
2.控制台使出: console
consol.log("内容")
3.窗口输出: window
window.alert/confirm/prompt("警告框/确认框/提示框")
JavaScript的入口函数
<script>
// 当文档(包含图片,音视频等资源)加载完成
window.onload=function(){
// 执行的代码
// console.log(document.getElementById("text"));//打印 h2
// document.write("在文档中输出");
}
</script>
代码从上而下加载 防止文档没有加载结束就调用了js代码
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)
// 打印h2
var header2=document.getElementById("text");
console.log(header2);
header2.innerText="这是修改后的h2标签内容"
07JavaScript变量的命名规则
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);
var str="hello world";
console.log(str);
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
08JavaScript变量的声明提升
var 有声明提升 提升到所有的代码前面
先声明 后使用
console.log(a); undefined 先使用 后生声明
var a=10;
console.log(c); c is not defined 未声明 直接使用
var b;
console.log("b:",b);
JavaScript的数据类型
1.基本数据类型(Number,String,Boolean,Undefined,Null)
混合数据类型(Object)
2.值类型(Number,String,Boolean,Undefined,Null,Symbol)
引用数据类型(Object,Arry,Function)
值类型
Number:数字
var num=10;
tring:字符串
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(){
//方法执行的代码
}
JavaScript的数据类型判断
值类型
// 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 Nanjing`;// 反引号 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
JavaScript的数据类型转换
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"));
12JavaScript数据类型的栈和堆
var obj={};
var arr=[];
// Boolean(变量) 将变量转换为布尔值类型 除 0 "" '' null undefined NaN 之外都返回true
console.log(Boolean(obj));// true
console.log(Boolean(arr));// true
console.log(Boolean(0));// false
console.log(Boolean(''));// false
console.log(Boolean(""));// false