1.javascript简介
JavaScript 最初由网景公司开发的一种脚本语言,被大量地应用于网页中,用以实现网页和浏览者的动态交互。目前几乎所有的浏览器都可以很好地支持 JavaScript。由于 JavaScript 可以及时响应浏览者的操作,控制页面的行为表现,提高用户体验,因而已经成为前端开发人员必须掌握的语言之一。
JavaScript 是为满足制作动态网页的需要而诞生的一种编程语言,在 HTML 基础上,使用 JavaScript 可以开发交互式(网页)Web。JavaScript 的出现使得网页和用户之间实现了实时、动态和交互的关系。
2.JavaScript的组成部分
标准化后的 JavaScript 包含了 3 个组成部分:
1.ECMAScript
脚本语言的核心内容,定义了脚本语言的基本语法和基本对象。现在每种浏览器都有对ECMAScript标准的实现。
2.DOM(Document Object Model)
文档对象模型,浏览器中的DOM把整个网页规划成由节点层级构成的树状结构的文档,用DOM API可以轻松地删除、添加和替换文档树结构中的节点。
3.BOM(Browser Object Model)
浏览器对象模型,描述了对浏览器窗口进行访问和操作的方法和接口。
3.JavaScript的特点
JavaScript 是一种运行在浏览器中的主要用于增强网页的动态效果、提高与用户的交互性的编程语言。相比于其他编程语言,它具有许多特点,主要包括以下几方面。
1) 解释性
JavaScript 不同于一些编译性的程序语言,它是一种解释性的程序语言,它的源代码不需要经过编译,直接在浏览器中运行时进行解释。
2) 动态性
JavaScript 是一种基于事件驱动的脚本语言,它不需要经过 Web 服务器就可以对用户的输入直接做出响应。
3) 跨平台性
JavaScript 依赖于浏览器本身,与操作环境无关。任何浏览器,只要具有JavaScript脚本引擎,就可以执行JavaScript。目前,几乎所有用户使用的浏览器都内置了JavaScript脚本引擎。
4) 安全性
JavaScript 是一种安全性语言,它不允许访问本地的硬盘,同时不能将数据存到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。这样可有效地防止数据丢失。
5) 基于对象
JavaScript 是一种基于对象的语言,同时也可以被看作是一种面向对象的语言。这意味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
4.JavaScript的使用方式
1.行内式( 直接将js代码写在标签的内部)
<a href="javascript:alert('hello javascript');">点一下试试</a>
<button type="button" onclick="javascript:alert('hello javascript');">点一下</button>
2.内嵌式(将js代码写在script标签中)
推荐
<head>
<script type="text/javascript">
alert('hello javascript');
</script>
</head>
script标签可以放在body中,也可以放在head中(推荐
)
3.外链式(将js代码写在外部独立的文件中)
<script type="text/javascript" src="../js/my.js"> </script>
5.JavaScript中的输入和输出方式
5.1输入方式
使用window对象提供的prompt对象可以实现用户数据的输入
window.prompt('请输入数据');
5.2输出方式
使用警告窗口实现数据的输出
window.alert('hello javascript');
输出数据到控制台
console.log('hello javascript');
输出数据到页面
document.write('hello javascript');
6.JavaScript注释
JavaScript的注释分为两种类型:
1.单行注释
//单行注释
2.多行注释
/* 多行注释*/
7.JavaScript变量
1.什么是变量
通俗的讲,变量类似与一个存放东西的容器,从计算机的角度讲,变量指代的是计算机内存中的一段内存空间,用于存数据
2.JavaScript中如何定义一个变量
1.使用var关键字声明变量
var age ;//程序执行到这一步时,会在内存中开辟一段内存空间
age=18; //将数字18放入刚刚开辟的空间中
var age=18; //定义变量的同时,赋值
2.变量命名规则
1.变量可以由数字,字母、英文下划线,美元$组成
2.不能以数字开头 a1 1a
3.不能使用关键字或者保留字 var for while ......
4.严格区分大小写 age Age 是不同的变量
5.变量名字要见名知意
6.使用驼峰命名法 (首字母小写,后面单词的首字母大写 myName)
8.JavaScript数据类型
JavaScript中数据的类型大体可以分为两种,简单类型和复杂类型
简单类型
数值型 | number |
---|---|
字符型 | string |
布尔型 | boolean |
未初始化 | undefined |
空值 | null |
复杂类型包含数组和对象等
js中的变量是一种动态数据类型,也就是变量本身是没有数据类型的,只有赋值以后才有了类型
。
var a="张三";
a=25;
a=true;
如何判定数据的类型?
在js中判断一个变量的数据类型可以使用 typeof 运算符
var num = 20;
console.log(typeof num); //number
var name="张三";
console.log(typeof name); //string
var blen = true;
console.log(typeof blen); //boolean
var age;
console.log(typeof age) //undefined
var n = null;
console.log(typeof n) //object
数据类型的转换
1.其他类型转化成字符串类型
//数字类型转换成字符串
var num =10;
var temp = num.toString();
console.log(typeof temp);
console.log(String(num));
//使用 + 实现隐式转换
console.log(num+'');
//布尔类型转换成字符串
var b = true;
var temp =b.toString();
console.log(typeof temp);
2.其他类型转化成数字类型
//字符型转化为数字型
var age = prompt('请输入您的年龄');
console.log( typeof age);
age = parseInt(age);
console.log( typeof age);
var p = '20px';
console.log(parseInt(p));
var price =prompt('请输入单价');
console.log( typeof price);
price = parseInt(price);//取整 不会四舍五入
console.log(price);
//小数的转换
price = parseFloat(price);
console.log(price);
//使用 Number(变量名)转换
var p = '120';
p = Number(p);
console.log(p);
console.log( typeof p);
//使用 - * / 实现隐式转换
var num = '10';
num = num -0;
console.log( num);
console.log( typeof num);
3.其他类型转换为布尔类型
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
9.JavaScript 运算符
9.1JavaScript 算数运算符
算数运算符用于对数字执行算数运算:
运算符 | 描述 |
---|---|
+ | 加法 |
- | 减法 |
* | 乘法 |
/ | 除法 |
% | 系数(取余) |
++ | 递加 |
-- | 递减 |
//加法
var x = 7;
var y = 8;
var z = x + y;
console.log(z);
//除法
x = 3;
y = 2;
console.log(3/2);
console.log(3%2);
/* ++ --
1:后置++ 是将自身的值赋给变量,之后自身再加1;
2:前置++ 是将自身+1 后的值赋给变量,同时自身加1;
*/
var a = 1;
b = a ++;
console.log('a=' + a + ' ' +'b='+ b); // a = 2 , b = 1
var a = 1 ;
b = ++a ;
console.log('a=' + a + ' ' +'b='+ b)//a = 2 b=2
9.2JavaScript 赋值运算符
赋值运算符向 JavaScript 变量赋值
运算符 | 例子 | 等同于 |
---|---|---|
= | x = y | x = y |
+= | x += y | x = x + y |
-= | x -= y | x = x - y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x %= y | x = x % y |
var x=2;
var y=3;
x+=2;
y-=1;
console.log(x);
console.log(y);
9.3JavaScript 比较运算符
运算符 | 描述 |
---|---|
== | 等于 |
=== | 等值等型 |
!= | 不相等 |
!== | 不等值或不等型 |
> | 大于 |
< | 小于 |
>= | 大于或等于 |
<= | 小于或等于 |
? | 三元运算符 |
var a=1;
var b=2;
console.log(a==b);
var a=1;
var b='1';
console.log(a==b); //true
console.log(a===b); //false
console.log(a!=b); //false
console.log(a!==b); //true
// 三元运算符
var a=1;
var b=2;
var str = a>b ? "a大于b":"a小于b"; //当条件为真时 执行前面的表达式 否则执行后面的表达式
console.log(str);
9.4JavaScript 逻辑运算符
运算符 | 描述 |
---|---|
&& | 逻辑与 |
|| | 逻辑或 |
! | 逻辑非 |
var b = true;
var c= false;
console.log(b&&c); //false
console.log(b||c);
console.log(!b);//false
9.5JavaScript 类型运算符
运算符 | 描述 |
---|---|
typeof | 返回变量的类型。 |
instanceof | 返回 true,如果对象是对象类型的实例。 |
9.6JavaScript 位运算符
位运算符处理 32 位数。
该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数值。
运算符 | 描述 | 例子 | 等同于 | 结果 | 十进制 |
---|---|---|---|---|---|
& | 与 | 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | 或 | 5 | 1 | 0101 | 0001 | 0101 | 5 |
~ | 非 | ~ 5 | ~0101 | 1010 | 10 |
^ | 异或 | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
10.JavaScript 流程控制
10.1分支结构
根据不同的条件,执行不同路径的代码(代码多选一&