JavaScript基础
1.JavaScript简介
1.1 什么是JavaScript？
- JavaScript是一种客户端脚本语言（脚本语言是一种轻量级的编程语言）。
- JavaScript通常被之前嵌入HTML页面，有浏览器执行。
- JavaScript是一种解释性语言（就是说，代码执行不进行预编译）。
- 特点：弱类型和基于对象（因为面向对象需要具有封装、继承、多态的特征）。
- JavaScript语言包括三个核心：ECMAScript基本语法、DOM、BOM.
1.2 前端web页面是由HTML、CSS、JavaScript这三种语言组成。
- html是一种标记语言，用来结构化我们的网页内容并赋予内容含义。
- CSS是一种层叠样式表，可将样式应用于HTML内容。
- JavaScript是一种脚本语言，可以用来创建动态更新内容，控制多媒体，制作动画等等。
2 JavaScript的使用方法
2.1 在HTML中如何使用JavaScript（三种）
2.1.1 内部导入
在<script>标签中编写JavaScript代码
<script type="text/javascript">
//内部JavaScript使用
var str = "Hello JavaScript！";
console.log(str);
</script>2.1.2 外部导入
使⽤外部导⼊js会使代码更加有序，更易于复⽤，且没有了脚本的混合，HTML也会更加易读。
scr参数值为js文件的相对路径
<script type="text/javascript" src="./my.js"></script>2.1.3 内联导入
就是将js代码写⼊html代码中，如在html标签的事件中或超级链接⾥。
<button onclick="alert('Hello JavaScript！');">点击我</button>3 JavaScript的基本语法
3.1 JavaScript的输出
JavaScript的输出主要有三种：
- window.alert() 弹出警告【偶尔使用】
- document.write()方法将内容到网页中【偶尔使用】
- document.getElemenntById().innerHTML更改获取标签里面的内容。【经常使用】
- console.log()写到浏览器的控制台【经常使用】
<script>
// 先进行网页提示再加载页面信息
window.alert('你好呀！');
// 控制台输出
console.log('锄禾日当午,汗滴禾下土!');
// 文档输出
document.write('谁知盘中餐，粒粒皆辛苦!');
</script><script>
// 通过写⼊HTML标签中，完成⻚⾯中的输出
document.getElementById('did').innerHTML="bbbbbb";
</script>如果一个<script>中的代码出错，那么出错位置下面的代码可能会不执行。JavaScript代码与HTML代码不同，HTML代码出错时，页面的样式不显示，不会报错。
3.2 变量
格式：var 变量名 = 变量值；
可以同时声明多个变量
在javascript中可以一次赋值相同值的多个变量：var a = b = c = 20;
在javascript中可以一次赋值不相同的值的多个变量：var a=10,b=20,c=30;
使用单引号或者双引号都可以定义字符串
3.3 变量命名规范
规则 （ 必须遵守的，不遵守会报错）
- 由字⺟、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字，例如：for、 if、while。
- 区分⼤⼩写
规范 （建议遵守的，不遵守不会报错）
- 变量名必须有意义
- 遵守驼峰命名法。⾸字⺟⼩写，后⾯单词的⾸字⺟需要⼤写。例如：userName、userPassword
3.4 语句和注释
语句使用要用分号（；）结尾。虽然语句写完换行也可以实现语句结束，但是不建议使用。
注释分为两种：单行注释 // 多行注释 /**/
4 JavaScript数据类型
4.1 JavaScript中的数据类型：
- 值类型：
字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
【注意：Symbol 是 ES6 引⼊了⼀种新的原始数据类型，表示独⼀⽆⼆的值。】 - 引用数据类型：
对象(Object)、数组(Array)、函数(Function)。
利用instanceof()方法来判断变量是否是数组。
进制转换
- 十进制转化为二进制（toString(进制类型（2，8，16）)方法）
- 其他进制转化为十进制（parseInt(“其他进制数”，进制类型)）;
不同类型的赋值形式：
- 值类型理解：变量之间的互相赋值，是指开辟⼀块新的内存空间，将变量值赋给新变量保存到新开辟的内存⾥⾯；之后两个变量的值变动互不影响。
- 引⽤类型理解：变量之间的互相赋值，只是指针的交换，⽽并⾮将对象（普通对象，函数对象，数组对象）复制⼀份给新的变量，对象依然还是只有⼀个，只是多了⼀个指引。
类型转换
JavaScript变量可以转换为新变量或者其他数据类型
- 通过JavaScript函数
- 通过JavaScript自身自动转换
<script>
console.log(typeof Number("2345")); //字符串转化为数字
console.log(Boolean(0)); // 数值转化为boolean
console.log(String([10,23,65])); // 数组类型转化为字符串
console.log(parseInt("234abc")); // 将字符串强行转换成数值类型 前提:必须是数字开头
console.log(parseFloat("36.6abc")); // 将字符串强行转换成浮点型
console.log(parseInt("ad1293")); // NaN错误
console.log("----------JavaScript自身自动转换------------")
console.log(true+1); // true会自动转换为1,进行计算
console.log("12"+100); // 100自动转化为字符类型
</script>5 JavaScript运算符
1. 按照操作元数的个数不同分为：⼀元运算符、⼆元运算符和三元运算符
2. 按照种类划分⼜分为如下运算符
- 算数运算符
（+ ，-， *， /， %， ++， --）
注意：其中加号有两种意思，字符串连接和数值求和【加号”+“两侧都是数值则求和，否则做字串连接】 - 赋值运算符
（=，+= ，-=，*=，/=，%=） - 比较运算符
- 逻辑运算符
- 位运算【了解即可】
- 位运算符处理 32 位数
- 该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。
⽆符号位移（>>>）和有符号位移（>>）的区别是
有符号位移运算时如果数字为正数时位移后在前⾯补0，为负数时则在位移后在前⾯补1
- 条件运算符
语法：
variablename = (condition) ? value1:value2 - 逗号运算符
⽤逗号运算符可以在⼀条语句中执⾏多个运算。
var iNum1=1, iNum2=2, iNum3=3; - 类型运算符
instanceof 运算符与 typeof 运算符相似，⽤于识别正在处理的对象的类型。
与 typeof ⽅法不同的是，instanceof ⽅法要求开发者明确地确认对象为某特定类型。
3 运算符的优先级
6 JavaScript流程控制
JavaScript流程控制值和Java流程控制大致相同。就不一一进行解释了。
- 顺序结构
- 程序会按照⾃上⽽下的顺序执⾏
6.1 分⽀结构（选择结构）
- 单分支语句 if(条件语句){语句块} 【条件不符合，可以不执行语句块】
- 双分支语句 if(条件语句){语句块1}else{语句块2}【必定执行一个语句块】
- 多分支语句if(条件1){语句块1}-else if(条件2){语句块2}-else if(条件3){语句块3}
- 条件分支语句 switch...case- 循环结构
- for循环代码块⼀定的次数
- for/in - 循环遍历对象的属性
这里的（for/in）类似于foreach就是格式有点差别；
示例：
var ob = {"name":"张三","age":22,"sex":"男"};
//遍历对象ob中的每个属性
for(key in ob){
//输出属性和对应的属性值
console.log(key+":"+ob[key]);
}- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
- 循环中的 break break 和 continue continue 语句
- break语句用于跳出循环
- continue用于跳出循环中的一个迭代。
7 JavaScript函数
在 JavaScript中有两种函数：自定义函数和系统函数
- 格式：
function 函数名（）{
函数体
返回值…
} - JavaScript函数定义方式
//函数的定义方式：
//1.标准式
function demo1(){
console.log("Hello Demo1");
}
demo1();
//2.使用Function()构造函数定义
var demo2 = new Function('console.log("Hello Demo2");');
demo2();
//3.使用表达式方式定义（匿名）
var demo3 = function(){
console.log("Hello Demo3");
}
demo3();
</script>- 函数使用：
通过函数名直接调用函数
函数名（参数1，参数2）
//4. 函数自调用定义
(function(){
console.log("Hello Demo4");
})();系统函数
系统中常用的内置函数
escape() //字串编码
unescape() //字串反编码
*eval（) //将参数字符串作为脚本代码来执⾏。
*isNaN() // is not a number (不是⼀个数值)
*parseInt()
*parseFloat()
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
