JAVAEE笔记——前端基础之JS基础
1. JavaScript简介
什么是JavaScript?
-
JavaScript 是⼀种客户端脚本语⾔(脚本语⾔是⼀种轻量级的编程语⾔)。
-
JavaScript 通常被直接嵌⼊ HTML ⻚⾯,由浏览器解释执⾏
-
JavaScript 是⼀种解释性语⾔(就是说,代码执⾏不进⾏预编译)。
-
特点:弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征)
-
JavaScript语⾔中包含三个核⼼:ECMAScript基本语法、DOM、BOM
前端Web技术的组成:HTML、CSS、JavaScript
-
HTML是⼀种标记语⾔,⽤来结构化我们的⽹⻚内容并赋予内容含义,例如定义段落、标题和数据表,或在页⾯中嵌⼊图⽚和视频。
-
CSS 是⼀种样式规则语⾔,可将样式应⽤于 HTML 内容, 例如设置背景颜⾊和字体,在多个列中布局内容。
-
JavaScript 是⼀种脚本语⾔,可以⽤来创建动态更新的内容,控制多媒体,制作图像动画,还有很多。(虽然它不是万能的,但可以通过简短的代码来实现神奇的功能。)
2. JavaScript使⽤⽅法
可以像添加CSS那样将 JavaScript 添加到 HTML ⻚⾯中。CSS 使⽤ <link> 元素链接外部样式表,使⽤ <style> 元素向 HTML 嵌⼊内部样式表,JavaScript 这⾥只需⼀个元素 <script> 。
在HTML中如何使⽤JavaScript(三种)
-
内部JavaScript: 使⽤ <script> ... </script> 标签
-
属性:
-
charset(可选)字符集设置、
-
defer(可选执⾏顺序)值:defer、
-
language(已废除)、
-
src(可选)使⽤外部的js脚本⽂件
-
type(必选)类型:值:text/javascript
-
<script type="text/javascript"> <!-- javaScript语⾔ //--> </script>
-
外部 JavaScript:
-
使⽤外部导⼊js会使代码更加有序,更易于复⽤,且没有了脚本的混合,HTML也会更加易读。
-
<script type="text/javascript" src="my.js"></script>
-
内联JavaScript处理器:
-
就是将js代码写⼊html代码中,如在html标签的事件中或超级链接⾥
-
<button οnclick="javaScript语⾔"></button> <a href="javascript:alert('aa');alert('bb')">点击</a>
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //此处为javascript语言 const str = "Hello World!"; console.log(str);//输出到控制台 </script> </head> <body> <h1>JavaScript语言的使用</h1> <button οnclick="alert('Hello World')">点击我</button> </body> <script src="my.js"></script> </html>
3.JavaScript语言的基础语法
3.1 JavaScript的输出
-
JavaScript 没有任何直接打印或者输出的函数。
-
若有显示数据可以通过下⾯不同的⽅式来输出:
-
window.alert() 弹出警告框
-
document.write() ⽅法将内容写到 HTML ⽂档中
-
innerHTML 写⼊到 HTML 元素
-
console.log() 写⼊到浏览器的控制台
-
-
参考示例:
//window.alert("Hello World");//浏览器弹框 document.write("Hello JS!"); //输出到浏览器页面中 console.log("Hello ....");//输出到浏览器调试模式下的控制台 document.write("Hello HTML!") //获取页面中id属性值为did的标签(元素),并将元素中的内容更改 document.getElementById("did").innerHTML="bbbbbbbbbbb";
3.2 变量
-
什么是变量
变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据
-
为什么要使⽤变量
使⽤变量可以⽅便的获取或者修改内存中的数据
-
如何使⽤变量
使⽤var声明变量(可以不写或者用其他名称)
3.3 语句与注释
-
语句:
-
⼀般程序中的语句是由表达式加分号构成 ; 组成。(js中的每条语句之间的分割符可以是回车换⾏也可以是";"分号(推荐))
-
⽽表达式的种类很多:
-
如:算术表达式、赋值表达式、关系表达式、逻辑表达式等等...
-
也可以是⼀个函数、⽅法的调⽤
-
-
-
脚本注释: // 单⾏注释 和 /* 多⾏注释 */
-
单⾏注释
-
单⾏注释以 // 开头。
-
任何位于 // 与⾏末之间的⽂本都会被 JavaScript 忽略(不会执⾏)。
-
-
多⾏注释
-
多⾏注释以 /* 开头,以 */ 结尾。
-
任何位于 /* 和 */ 之间的⽂本都会被 JavaScript 忽略。
-
-
注释的⽬的:
-
为程序添加辅助说明,便于阅读理解。
-
注释掉临时不需要执⾏的代码、便于调试、排错。
-
-
4. JavaScript数据类型
JavaScript中数据类型:
-
值类型(基本类型):
字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefifined)、Symbol。
注意:Symbol 是 ES6 引⼊了⼀种新的原始数据类型,表示独⼀⽆⼆的值。
-
引⽤数据类型: 对象(Object)、数组(Array)、函数(Function)。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //数值类型 console.log(typeof a); //undefined 没有定义的变量 var a = 10; //整数 console.log(typeof a); //number a = 3.14; //浮点数 console.log(typeof a); //number //布尔类型:boolean: 值:true false a = true; console.log(typeof a); //boolean //字符串:使用单引号或双引号都可以定义子符串 a = "Hello ..."; console.log(typeof a); //string a = null; console.log(typeof a); //object //引用类型 var b = [10,20,30]; //数组的定义 console.log(typeof b); //数组对象object console.log(b instanceof Array); //true 检查对象b是否是来源于Array console.log(a instanceof Array); //false 检查对象a是否是来源于Array var ob = new Object(); console.log(typeof ob); //object var fn = function(){} //声明一个空函数 console.log(typeof fn); //function </script> </head> <body> <h1>JavaScript语言的数据类型</h1> </body> </html>
-
undefifined 和 null 的区别
-
null 和 undefifined 的值相等,但类型不等
-
typeof undefined // undefined typeof null // object null === undefined // false ===判断的是类型是否相同 null == undefined // true ==判断的是布尔值是否相同
-
object引⽤类型 引⽤类型通常叫做类(class),也就是说,遇到引⽤值,所处理的就是对象。Object 对象⾃身⽤处不⼤,不过在了解其他类之前,还是应该了解它。 因为 ECMAScript 中的Object 对象与 Java 中的 java.lang.Object 相似, ECMAScript 中的所有对象都由这个对象继承⽽来,Object 对象中的所有属性 和⽅法都会出现在其他对象中,所以理解了Object 对象,就可以更好地理解其他对象。
-
值类型理解:变量之间的互相赋值,是指开辟⼀块新的内存空间,将变量值赋给新变量保存到新开辟的内存⾥⾯;之后两个变量的值变动互不影响,例如
var a = 10; //开辟⼀块内存空间保存变量a的值“10”; var b = a; //给变量 b 开辟⼀块新的内存空间,将 a 的值 “10” 赋值⼀份保存到新的内存⾥; //a 和 b 的值以后⽆论如何变化,都不会影响到对⽅的值;
-
引⽤类型理解:变量之间的互相赋值,只是指针的交换,⽽并⾮将对象(普通对象,函数对象,数组对象)复制⼀份给新的变量,对象依然还是只有⼀个,只是多了⼀个指引。
//需要开辟内存空间保存对象,变量 a 的值是⼀个地址,这个地址指向保存对象的空间; var a = { x: 1, y: 2 }; var b = a; // 将a 的指引地址赋值给 b,⽽并⾮复制⼀给对象且新开⼀块内存空间来保存; // 这个时候通过 a 来修改对象的属性,则通过 b 来查看属性时对象属性已经发⽣改变;
5.数据类型转换
-
JavaScript 变量可以转换为新变量或其他数据类型:
-
通过使⽤ JavaScript 函数
-
通过 JavaScript ⾃身⾃动转换
-
ECMAScript 中可⽤的 3 种强制类型转换如下: Boolean(value) - 把给定的值转换成 Boolean 型; Number(value) - 把给定的值转换成数字(可以是整数或浮点数); String(value) - 把给定的值转换成字符串; 使⽤:Number()、parseInt() 和parseFloat() 做类型转换 Number()强转⼀个数值(包含整数和浮点数)。 *parseInt()强转整数, *parseFloat()强转浮点数 函数isNaN()检测参数是否不是⼀个数字。 is not a number
参考示例
//转换字串类型 String(100 + 23) // 返回 "123" String(true) // 返回 "true" String(new Date())// 返回 "Tue May 14 2019 11:06:28 GMT+0800 (中国标准时间)" String([10,20]) // 返回 "10,20" String(null) // 返回 "null" //转换数值类型 Number("3.14") // 返回 3.14 Number("3.14abc") // 返回 NaN parseFloat("3.14")//返回 3.14 parseFloat("3.14abc")//返回 3.14 parseFloat("b3.14abc")//返回 NaN parseInt("3.14") //返回 3 parseInt("3.14abc")//返回 3 parseInt("b3.14abc")//返回 NaN
常见类型转换
6.运算符
运算符的优先级
优先级从⾼到底
-
1. () 优先级最⾼ 2. ⼀元运算符 ++ -- ! 3. 算数运算符 先 * / % 后 + - 4. 关系运算符 > >= < <= 5. 相等运算符 == != === !== 6. 逻辑运算符 先 && 后|| 7. 赋值运算符 = += -= *= /= %=
常用运算符示例
console.log("=========算术运算符=========="); console.log("10"+20); //1020字符串做加计算是拼接操作 console.log("10"+20+30); //102030 console.log(10+"20"+30);//102030 console.log(10+20+"30");//3030 console.log(true+"30");//ture30 console.log(true+30);//31 var a=10; var b=20 + a++;//先取出变量a的值与20求和后赋给变量b,之后a自增1. console.log(b);//30 console.log(a);//11 console.log("============"); console.log(10=='10');//true 值比较 console.log(10 === '10');//false 值比较相同,类型比较不同。 感觉相当于equals console.log(10 !== "20");//true 值和类型有一个相同时为假,否则为真 console.log("======类型运算符=====") function Aoo() {} function Foo() {} Foo.prototype = new Aoo() ;//JavaScript 原型继承 var foo = new Foo(); console.log(foo instanceof Foo) //true console.log(foo instanceof Aoo) //true console.log("=====delete=====运算符"); var stu = {name:'zhangsan',sex:'man',age:20} console.log(stu); delete stu.sex;//删除stu对象中的sex属性 console.log(stu);
7.流程控制
for...in 循环遍历对象
for(属性变量 in 被遍历对象){
被执⾏的代码块
}
var ob = {"name":"张三","age":22,"sex":"男"}; //遍历对象ob中的每个属性 for(key in ob){ //输出属性和对应的属性值 console.log(key+":"+ob[key]); } /* //输出结果: name:张三 age:22 sex:男 */
循环中的break 和 continue continue 语句
-
break 语句⽤于跳出循环。
-
continue ⽤于跳过循环中的⼀个迭代。
-
break语句
-
我们已经在本教程稍早的章节中⻅到过 break 语句。它⽤于跳出 switch() 语句。
-
break 语句可⽤于跳出循环。
-
break 语句跳出循环后,会继续执⾏该循环之后的代码(如果有的话):
-
-
continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下⼀个迭代。
8.JavaScript函数
格式:
function 函数名([参数列表..]){ 函数体。。。 [return 返回值;] }
//4.函数自调用定义 //函数⾃调⽤ (function () { console.log("Hello demo4!"); })();
函数的参数
-
少传或多传参数程序都不会报错,但是运行的结果可能会不正确。
-
arguments 对象(作用:获取所有参数)
-
在函数代码中,使⽤特殊对象 arguments,开发者⽆需明确指出参数名,就能访问它们。
-
arguments是⼀个对象,是⼀个伪数组,arguments[索引]---->实参的值也可以访问这个值,即第⼀个参数的值(第⼀个参数位于位置 0,第⼆个参数位于位置 1,依此类推)。
-
arguments.length--->是实参的个数
-
函数的返回值
-
如果⼀个函数中有return ,那么这个函数就有返回值
-
如果⼀个函数中没有return,那么这个函数就没有返回值
-
如果⼀个函数中没有明确的返回值,那么调⽤的时候接收了,结果就是undefifined
-
(没有明确返回值:函数中没有return或函数中有return,但是return后⾯没有任何内容)
-
函数内容执⾏遇到return,则⽴刻执⾏返回,且下⾯的代码是不会被执⾏的
函数的变量作用域
-
由于函数的出现导致了变量的定义分为函数内定义和函数外定义,即全局和局部变量
-
全局变量:在函数外使⽤var声明的变量就是全局变量,全局变量可以在⻚⾯的任何位置使⽤
-
全局变量,如果⻚⾯不关闭,那么就不会释放,就会占空间,消耗内存。
-
局部变量:在函数内使⽤var关键字定义的变量是局部变量,即出了函数外边⽆法获取。
-
-
隐式全局变量:没有使⽤var声明的变量,就叫隐式全局变量,在函数内外可以获取到。
在函数内用var声明的变量为局部变量,在函数外调用会报错。
在函数内不使用var声明的变量,为全局变量,在函数外调用不会报错。
-
全局变量是不能被删除的,隐式全局变量是可以被删除的(使⽤delete)
-
定义变量使⽤var是不会被删除的,没有var是可以删除的
-
-
函数外⾯定义的变量是全局变量,函数内可以直接使⽤。
-
在函数内部没有使⽤var定义的=变量则为全局变量。
常用内置函数
escape() //字串编码 unescape() //字串反编码 *eval() //将参数字符串作为脚本代码来执⾏。 *isNaN() // is not a number (不是⼀个数值) *parseInt() *parseFloat()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //内置函数: /*escape() //字串编码 unescape() //字串反编码 *eval() //将参数字符串作为脚本代码来执⾏。 *isNaN() // is not a number (不是⼀个数值) *parseInt() *parseFloat()*/ var url = "http://www.***.com/a.html?name=张三&age=20"; console.log(url); url2 = escape(url); console.log(url2); console.log(unescape(url2)); console.log("----------------"); var str = "var uname = '张三',age=20;"; eval(str); console.log(uname); console.log(isNaN("10s")); console.log(parseInt("34asdfg")); </script> </head> <body> </body> </html>