JavaScript

1主要内容

1.1简介

js是面向对象，解释型的语言。基于对象与事件驱动并具安全性的客户端脚本语言。主要目的：验证发往服务端的数据，增加web互动，增加用户体验度等

js组成（ECMAScript，DOM，BOM）：

ECMAScript:核心语法。

DOM（文档对象类型）：描述处理网页内容的方法与接口

BOM（浏览器对象类型）：描述与浏览器进行交互的方法与类型

1.2基本用法

与css使用类似（行内，内部【script】，外部【script src】）（当script中有src的时候就不能在后面再写相关js了，写了没用）

script在head与body都行，建议在body后，方便绑定事件。

HTML内容：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><button onclick="alert('hello World');">按钮</button><!-- 行内 --><script type="text/javascript">//alert("这是一个按钮")</script><!-- 内部 --><script src="js/text.js" type="text/javascript" charset="UTF-8"></script><!-- 外部 --></body>
</html>

text文件内容：

alert("这是引入外部js文件")

呈现效果：

2基本语法

语句一般一行一句，代码从上往下执行，一次运行一行，可以没有分号，但一行多语句时要加。

注释：

HTML型：

js型：//单行，/* */多行

标识符：由字母、数字、_、$组成（不以数字开头，也不能是关键字保留字，区分大小写）

规范：见名知意，驼峰命名或下划线规则

3变量（带名字的用来存储数据的内存空间，可存，可取）

3.1变量的声明

由于javascript是弱类型语言，因此不用指明数据类型，直接用var修饰符声明

变量声明和赋值

//先声明再赋值
var a ;
a = 10
//声明同时赋值
var b=10;

3.2变量的注意点

1 若只声明不赋值，变量值undefined（只提醒，代码继续运行）

var box;
console.log(box);

2 若没定义直接使用（报错，停止执行）

console.log(box);

3 可用var同时声明多个变量 var a，b，c=10；（a，b值为undefined，c为10）

var a,b,c=10;

4 用var重新声明已存在变量是无效的

var box=10;
var box;

5 用var重新声明已存在变量并赋值会覆盖原有值

var box=10;
var box=25;

6 js是动态、弱类型语言，类型不用定义

var box="hello world";
box=10;

总体呈现：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><script type="text/javascript">var a;a = 1;console.log(a);var b=2;console.log(b);var c;console.log(c);var aa,bb,cc=10;console.log(aa);console.log(bb);console.log(cc);var a;console.log(a);var a=10;console.log(a);var str="hello world"var bool=true;var f="true"console.log(str);console.log(bool);console.log(f);</script></body>
</html>

变量名提升（js引擎运行时会先把变量提升到头部，再一行行运行）

声明变量也可不用var，但不推荐用，声明的变量只能用于之后的语句，之前的不能用

4数据类型

js虽说是弱类型语言，变量没有类型，但数据本身还是有类型的，不同类型，不同操作

类型：undefined（未定义，不存在），null，布尔，数值，字符串，对象object（复杂，对象{name：“a”}数组【1，2，3】函数）

4.1undefined

出现undefined的情况

1声明变量但无值

var b;
console.log(b);//出现返回值为undefined

2调用函数，有形参但无实参

function noData(str){console.log(str);
}
noData();//返回值为undefined

3函数无返回值，默认undefined

function noData(){console.log("hello");
}
var b=noData();//返回值为undefined,且b为undefined

4.2null

null类型只是一个值的数据类型，即特殊值null，表示空值。

注意点：

（1）使用typeof操作符测试null返回object字符串

（2）undefined派生自null，它们等值比较为真，未初始化的变量与赋值为null的变量相等

4.3布尔类型（true，false，常用来做判断或循环条件）

4.4数值型

包含整型与浮点型（都是以64位浮点数存储，浮点数最高精度17位，不推荐用浮点数判断）

小数点后为0，自动变为整型

4.5字符串

用单引号或双引号引起来的数据类型，可用“+”拼接两个字符串

4.6对象（数组，对象，函数）

数组 var 数组名 = [ ]

对象 var 对象名= {}

函数 function 方法名（）{

}

5类型转换

5.1自动类型转换

1转字符串：直接加双引号

2转数字：能转的转，不能转的NaN，“”（空字符串）为0

3转布尔：有值是true，没值是false

5.2函数转换（parseInt与parseFloat，都会从第0个位置找有效数字，直到找到无效数字位置）

parseInt：“123abc”->123,"abc123"->NaN,"123.4abc"->123

parseFloat(多读一个小数点）:123.4.5->123.4

5.3显示转换

1 toString（转字符串），toFixed（指定位数，四舍五入）

注意：

两个值不能为null，

变量.toString：11-“11”，

变量.toFixed( 保留位数）：var a = 10；a.toFixed（2）->10.00。

2构造方法（Number()，String()，Boolean()，可以转换null）

Number（1.2.2）为NaN，能转的转，不能转的NaN，Number（”123abc“）是NaN，

Boolean（）有值且不为0时为true，

String：值为null也可·转换成“null”，用toString会报错并且程序会停止。

第五次网页前端培训（JavaScript）相关推荐

梅科尔工作室-第五次网页前端培训（JS，JavaScript）
js学习包括:(*为重点) 基础语法:语句与注释,标识符与关键字,*变量,数据类型,类型转换,运算符,控制语句,*数组,*函数,内置对象,*对象事件:*事件类型,事件流和事件模型,事件处理程序 BO ...
第五次网页前端培训笔记（js1）
1.js的基本使用 JavaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多 ...
第八次网页前端培训(JavaScript)
1.视频链接 [优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 2. 教程链接 JavaScript 表单 | 菜 ...
第五次网页前端培训（JS）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibilin 1.安装编译器 HBuilder X:HBuil ...
第五次网页前端培训（JS基础）
1:JS基本用法行内JS:写在标签内部的js代码:内部JS:定义在script标签内部的js代码,script标签可以放在head中或body中(建议放在body标签最后):外部JS:单独的js文件 ...
第五次网页前端培训笔记（JS）
学习网址:视频网址资料网址框架内容 JavaScript是一种具有面向对象能力的,解释型的程序设计语言. 核心语法ECMAScript -―描述 ...
第五次网页前端培训笔记（JS变量、数据类型、类型转换）
一.JS变量变量必须以字母开头变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做) 变量名称对大小写敏感(y 和 Y 是不同的变量) 注:JavaScript 语句和 JavaScript 变 ...
网页前端培训（HTML）
1.安装编译器网址:HBuilderX-高效极客技巧选择windows标准版 2. HTML基础学习网址: 1.HTML 基础 | 菜鸟教程 2.[优极限] HTML+CSS+JavaScrip ...
网页前端培训笔记（HTML标签）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili HTML 教程 | 菜鸟教程 (runoob.com) ...

第五次网页前端培训（JavaScript）