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));//false9.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=29.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);//false9.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分支结构
根据不同的条件，执行不同路径的代码（代码多选一&
最低0.47元/天 解锁文章
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
