JavaScript的基础

javascript简介

1、JavaScript简称js，最初由网景（现在的Mozilla）公司创建，由于商标冲突原因，其标准版本命名为ECMAScript，

JavaScript与java没有任何关系，此外js（JavaScript）和jsp（java servlet pages）也没有关系。　　

2、js的工作分为两部分，一部分属于js语言本身的特性，而另一部需要依靠宿主环境（web浏览器）才能完成。

JS的组成部分

JavaScript由

ECMAScript(js核心语法部分)

DOM(文档对象模型) Document Object Model

BOM(浏览器对象模型) Browser Object Model

JavaScript的引入方式

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

按钮

内部js代码(推荐练习时使用)

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

JavaScript的注释

// console.log("单行注释")

// 多行注释

/*

var a=10;

var b=20;

声明两个变量

*/

JavaScript的语法

变量

变量的声明var a;

变量的赋值a=10;

声明方法 func方法名

function func(){

执行的代码

}

数据类型

操作符

js语句

关键字

函数...

JavaScript的输出方式

文档输出 document

document.write("这是通过document.write输出的内容")

// document.getElementById("text").innerText="这是innerText输出的文本"

// document.getElementById("box").innerHTML="

这是innerHTML输出的文本

"

控制台输出 console

console.log("这是控制台输出的日志");

// console.info("这是控制台输出的信息");

// console.warn("警告","这是控制台输出的警告");

// console.error("错误","这是控制台输出的错误");

窗口输出 window

window.alert("这是警告框");

// window.confirm("这是确认框");

// window.prompt("这是提示框");

JavaScript的变量

变量 可变的量 容器

变量的声明 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);

常量 不可改变的量 const

const web21=10000;

web21=100000;

console.log(web21)

打印h2

var header2（代替名）=document.getElementById("text（id名）");

console.log(header2);

header2.innerText="这是修改后的h2标签内容"

JavaScript变量的命名规则

不可以使用关键字或保留字命名,不能超过255个字符

var break=10;// Unexpected token 'break'

不能使用纯数字命名

var 2000=10000;//Unexpected number

变量以字母,$,_ 为开头

命名尽量语义化

驼峰命名 headerWrap

以数据类型为开头 sText nPrice oHeader

区分大小写

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

JavaScript变量的声明提升

var 有声明提升 提升到所有的代码前面

先声明 后使用

console.log(a); ：undefined 先使用 后声明

var a=10;

console.log(c); ：c is not defined 未声明 直接使用

var b;

console.log("b:",b);

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(){

方法执行的代码

}

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

1. Undefined:未定义

var un;

console.log(typeof(un));// undefined

1. Null:空值 用来清空变量 var a=10; a=null;

var kong=null;

console.log(typeof(kong));// object

1. Symbol:ES6中新增的原始数据类型，表示独一无二的值

var web21=Symbol("这是web21班");

console.log(typeof(web21));// symbol

1. 引用数据类型

1. Object 对象

var obj={

name:"张三",

age:18

}

console.log(typeof(obj));// object

1. Array 数组

var arr=[1,2,"a",{}];

console.log(typeof(arr));// object

1. 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

1. JavaScript的入口函数

代码从上而下加载 防止文档没有加载结束就调用了js代码

1. 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=[];

1. // 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

1. // 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

1. // parseFloat(变量) 将变量转换为浮点类型(小数)

console.log(parseFloat("100.111"));

console.log(parseFloat("a100.111"));// NaN

console.log(parseFloat("100a.111"));// NaN

console.log(typeof parseFloat("100.111"));

1. // parseInt(变量) 将变量转换为整数类型

console.log(parseInt("100.911"));

console.log(parseInt("a100.111"));// NaN

console.log(parseInt("100a.111"));// NaN

console.log(typeof parseInt("100.111"));

1. JavaScript数据类型的栈和堆

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