一·认识JavaScript
- JavaScript 是脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。(简称:JS)
- JS是脚本语言。换句话说,能够用来编程的并且直接执行源代码的语言,就是脚本语言。
- JavaScript是因特网上最流行的脚本语言,它存在于全世界所有的Web浏览器中,能够增强用户与Web站点和Web应用程序之间的交互。
- Javascript是基于对象的,是一种基于对象和事件的驱动的编程语言,因而它本身提供了非常丰富的内部对象设计人员使用。(几乎所有的浏览器都支持javascript,如:Internet Explorer浏览器、 firefox火狐浏览器、Opera浏览器等等)
- JS也是解释性的语言。何为解释性语言?是在运行的时候将程序直接翻译成机器语言。
1.1·JavaScript的特点
1.是一种解释性脚本语言:
(非脚本语言编写的通常是需要经过编写---编译---链接---运行这四个步骤,而脚本语言javascript只需经过编写--运行着两个步骤)。
2.2、跨平台特性:
由于javascript程序的运行依赖于浏览器,只要操作系统中安装有支持javascript的浏览器即可,因此javascript和平台(操作系统)无关,可以在多种平台下运行(如Windows操作系统、Linux操作系统、Mac操作系统、Android操作系统、iOS操作系统等)。
3.3、基于对象和事件驱动:
Javascript把html页面中的每个元素都当作一个对象来处理,并且这些对象都具有层次关系,像一棵倒立的树,这种关系被称为“文档对象模型DOM”。在编写javascript代码是会接触到大量对象及对象的方法和属性。可以说学习javascript的过程,就是了解javascript对象及其方法和属性的过程。因为基于事件驱动,所以javascript可以捕捉到用户在浏览器中操作,可以将原来静态的html页面变成和用户交互的动态页面。
4.尽管javascript分为服务器端和客户端,但目前应用最多的还是客户端。
二·JavaScript基本使用
2.1 JS嵌入方式
在 HTML 中使用 JS 可以用以下几种方式实现:
行内式
内嵌式
外部引用 js 文件
行内式,可以在 html 元素中直接用使用 js 语句,但是一般都是调用函数或简短的语句。
<input type="button" value="Click Me!" onclick="alert('Hellow World')">
内嵌式,一般用于实现比较小的功能,代码不长的情况
<script> alert('Hello World'); </script>
外部JS文件,最常见的方式
<script src="my.js"></script>
2.2 JS 注释
// 单行注释 /* 多行注释 */
2.3 JS 输入输出语句
- alter/prompt/confirm来源于window对象
alert(msg) // 浏览器弹出框 console.log(msg) // 浏览器控制台打印输出信息 prompt(info) // 浏览器弹出输入框,用户可以输入 confirm()
2.4 JS事件
- 标签的事件属性
<button onclick = "alert('123')">点我</button> <button onclick = "a();">点我</button> a()====>函数 function a(){ }
2.5 查找 HTML DOM 元素
HTML DOM 能够通过 JavaScript 进行访问(也可以通过其他编程语言)。在 DOM 中,所有 HTML 元素都被定义为对象。我们可以通过 Javascript 对这些对象操作,改变 HTML 元素的内容。
getElementById()
因为 id 元素是唯一的,就是为了在 js 中通过元素 id 来查找元素,document 是页面文档对象,getElementById 是 document 的方法,通过传递的参数(id字符串),是一个标签的id值。可以返回的该元素对象
<div id="new">This is new Element</div> <script> // 页面文档从上往下加载,需要将 script 代码写在下边 var dom = document.getElementById('new'); // 显示id为new的对象中内容 console.log(dom); // 可以打印我们返回的元素对象,更好的查看里边的属性和方法 console.dir(dom); </script>
三·变量
3.1.1 定义
变量是程序在内存中申请的一块用来存放数据的空间。通过变量名称我们可以使用或修改保存在系统中的对应的数据。
3.1.2 声明变量
Js 是一种弱类型或者说动态语言,不用提前声明变量的类型,变量的类型会自动判断。即使赋值之后,变量的类型根据重新赋值的数据类型同样进行改变。
var age; // 声明一个名称为age的变量 age = 12; // 给age这个变量赋值为12
通常声明与赋值一起使用:
var age = 12;
3.1.3 初始化变量
var age = 12 var name = 'Tom' name = 'OO' // 再次给相同变量赋值则不用 var 进行初始化 var a = 10, b = 20, c = 30; // 可以同时声明多个变量
3.1.4 输入存储变量
1. var name = prompt('请输入你的名字') 2. alert(name)
3.1.5 变量的命名规范
- 由字母、数字、下划线、$符号组成,不能以数字开头
- 不能是关键字和保留字,例如:for,while,this,name
- 区分大小写
- 变量名必须有意义
- 小驼峰命名法,如:
myName
- 建议不要用$作为变量名
3.1.6 查看变量
alert(变量名) // 弹出框显示 console.log(变量名) // 控制台显示 document.write(变量名) // HTML 页面上显示
3.2 数据类型
3.2.1 数字型[number]
3 // 十进制 010 // 八进制 0xa // 十六进制 3.14 // 小数 NaN // 非数字 Not a Number
数字型范围:
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308 console.log(Number.MIN_VALUE); // 5e-324
3.2.2 字符串型[string]
var str1 = '这是个字符串';
字符串转义符:
\n // 换行 \r // 回车 \\ \' \" \t \b // 空格 \xnn // 16进制字符,如 \x41 代表 'A' \unnn // 16进制 unicode 字符, 如 \u03a3 代表∑
字符串长度:
用 变量.length
可以得到字符串长度,如:
var str1 = 'hello world' console.log(str1); // 输出结果:11
字符串拼接:
var str = str1 + str2; var str = '字符串' + 123; // 输出字符串123,字符串拼接其他类型会自动转换为字符串 var str = 'My age is' + age + 'years old'; // 字符串+变量拼接
只要与字符串做加法运算都会被转换成字符串
字符串中的双引号和单引号:
var str = "他是'程序猿'";
3.2.3 布尔型
布尔型 Boolean 只有两个值,一个是 true, 一个是 false
console.log(1 + true); // 在运算中,true代表1 console.log(1+ false); // false 代表0 console.log('t' + true); // 在字符串拼接,会直接以字符串形式拼接 ttrue
3.2.4 null 空值
console.log(null+ 'pp'); // 会拼接字符串 nullpp console.log(null + true); // 会输出 1
null表示"没有对象",即该处不应该有值。
- 作为函数的参数,表示该函数的参数不是对象。
- 作为对象原型链的终点。
3.2.5 undefined 未定义
一个声明后没有被赋值的变量会有一个默认值 undefined
console.log(undefined + 'pp'); // 会拼接字符串 undefinedpp console.log(undefined + true); // 会输出 NaN console.log(undefined + 1); // 会输出 NaN
- 变量被声明了,但没有赋值时,就等于undefined。
- 调用函数时,应该提供的参数没有提供,该参数等于undefined。
- 对象没有赋值的属性,该属性的值为undefined。
- 函数没有返回值时,默认返回undefined。
undefined 和 null 的区别
只设置了null作为表示"无"的值。根据C语言的传统,null被设计成可以自动转为0。JavaScript的最初版本是这样区分的:null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。
- undefined和null在if语句中,都会被自动转为false
3.2.6 其他类型
- 数组
- 对象
3.2.7 数据类型转换
3.2.7.1 typeof() 查看数据类型
var num = 1; console.log(typeof num); console.log(typeof(num)); // 也可以使用参数的形式查看
null 返回的是 object
3.2.7.2 转换为字符串
var num = 1; alert(num.toString()); // 无法用 .toString() 方法转换 undefined 和 null alert(String(num)); // 可以转换 undefined 和 null alert(num + '');
3.2.7.3 转换为数字型
// 转换为整型 parseInt(num); parseInt('3.14'); // 取整为3 parseInt('90px'); // 去掉单位(只取int遇到字符串自动中断) parseInt('rem120px') // 字符串转换后变为 NaN parseInt(undefined) // undefined 转换后变为 NaN parseInt(null) // 转换后为0 parseInt(true) // 布尔型转换后变为 1 或 0
// 转换为浮点型 parseFloat(num); parseFloat(3); // 还是输出3,不会自带小数点,3.0也是一样
// 强制转换 Number(num); // 隐式转换,可以用 - * / (加号正能用作正负值将字符串转为数字型,如果用在变量后边则变为拼接字符串) console.log(+'100') console.log('123' - 120); console.log('t' - 120); // 输出 NaN
3.2.7.4 转换为布尔型
代表空、否定的值都会被转换为 false,如:0,'',NaN,null,undefined 其余值都会被转换为 true
Boolen('abc'); // 返回 True Boolean(0); // 返回 False
3.3 运算符
表达式:任何能代表值的式子
var a = 10, b=20; var c = a + b; // a + b 就是表达式
3.3.1 算数运算符
+ - * / %
浮点数运算精度问题,尽量避免用浮点数直接进行运算
console.log(0.1 + 0.2); // 0.30000000000000004 console.log(0.07 * 100); // 7.000000000000001 var num = 0.1 + 0.2; console.log(num == 0.3); // false
3.3.2 递增递减运算符
++i; // 前置递增(先自加后返回) --i; // 前置递减 var i = 1; console.log(++i + 10); // 11 (先自加,然后参与运算) i++; // 后置递增(先返回值,后自增) i--; // 后置递减 var i = 1; console.log(i++ + 10); // 20 (先运算,后自加) console.log(i); // 2
前置后置递增进阶:
var e = 10; var f = e++ + ++e; consolo.log(f); // 22(e++ 返回 10,然后e自增为11,++e 返回12)