JAVAEE笔记——前端基础之JS基础

1. JavaScript简介

什么是JavaScript

  • JavaScript 是⼀种客户端脚本语⾔(脚本语⾔是⼀种轻量级的编程语⾔)。

  • JavaScript 通常被直接嵌⼊ HTML ⻚⾯,由浏览器解释执⾏

  • JavaScript 是⼀种解释性语⾔(就是说,代码执⾏不进⾏预编译)。

  • 特点:弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征)

  • JavaScript语⾔中包含三个核⼼:ECMAScript基本语法、DOM、BOM

JAVAEE笔记——前端基础之JS基础

前端Web技术的组成:HTMLCSSJavaScript

  • HTML是⼀种标记语⾔,⽤来结构化我们的⽹⻚内容并赋予内容含义,例如定义段落、标题和数据表,或在页⾯中嵌⼊图⽚和视频。

  • CSS 是⼀种样式规则语⾔,可将样式应⽤于 HTML 内容, 例如设置背景颜⾊和字体,在多个列中布局内容。

  • JavaScript 是⼀种脚本语⾔,可以⽤来创建动态更新的内容,控制多媒体,制作图像动画,还有很多。(虽然它不是万能的,但可以通过简短的代码来实现神奇的功能。)

2. JavaScript使⽤⽅法

可以像添加CSS那样将 JavaScript 添加到 HTML ⻚⾯中。CSS 使⽤ <link> 元素链接外部样式表,使⽤ <style> 元素向 HTML 嵌⼊内部样式表,JavaScript 这⾥只需⼀个元素 <script> 。

HTML中如何使⽤JavaScript(三种)

  1. 内部JavaScript: 使⽤ <script> ... </script> 标签

  • 属性:

    • charset(可选)字符集设置、

    • defer(可选执⾏顺序)值:defer、

    • language(已废除)、

    • src(可选)使⽤外部的js脚本⽂件

    • type(必选)类型:值:text/javascript

<script type="text/javascript">
<!--
javaScript语⾔
//-->
</script>

 

  1. 外部 JavaScript:

    • 使⽤外部导⼊js会使代码更加有序,更易于复⽤,且没有了脚本的混合,HTML也会更加易读。

<script type="text/javascript" src="my.js"></script>
  1. 内联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

常见类型转换

JAVAEE笔记——前端基础之JS基础

6.运算符

运算符的优先级

优先级从⾼到底

  1. 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 返回值;]
}

JAVAEE笔记——前端基础之JS基础

 //4.函数自调用定义
//函数⾃调⽤
(function () {
    console.log("Hello demo4!");
})();

函数的参数

  • 少传或多传参数程序都不会报错,但是运行的结果可能会不正确。

  • arguments 对象(作用:获取所有参数)

    • 在函数代码中,使⽤特殊对象 arguments,开发者⽆需明确指出参数名,就能访问它们。

    • arguments是⼀个对象,是⼀个伪数组,arguments[索引]---->实参的值也可以访问这个值,即第⼀个参数的值(第⼀个参数位于位置 0,第⼆个参数位于位置 1,依此类推)。

    • arguments.length--->是实参的个数

函数的返回值

  • 如果⼀个函数中有return ,那么这个函数就有返回值

  • 如果⼀个函数中没有return,那么这个函数就没有返回值

  • 如果⼀个函数中没有明确的返回值,那么调⽤的时候接收了,结果就是undefifined

  • (没有明确返回值:函数中没有return或函数中有return,但是return后⾯没有任何内容)

  • 函数内容执⾏遇到return,则⽴刻执⾏返回,且下⾯的代码是不会被执⾏的

函数的变量作用域

  • 由于函数的出现导致了变量的定义分为函数内定义和函数外定义,即全局和局部变量

  • 全局变量:在函数外使⽤var声明的变量就是全局变量,全局变量可以在⻚⾯的任何位置使⽤

  • 全局变量,如果⻚⾯不关闭,那么就不会释放,就会占空间,消耗内存。

    • 局部变量:在函数内使⽤var关键字定义的变量是局部变量,即出了函数外边⽆法获取。

  • 隐式全局变量:没有使⽤var声明的变量,就叫隐式全局变量,在函数内外可以获取到。

    JAVAEE笔记——前端基础之JS基础

    JAVAEE笔记——前端基础之JS基础

    在函数内用var声明的变量为局部变量,在函数外调用会报错。

    JAVAEE笔记——前端基础之JS基础

    JAVAEE笔记——前端基础之JS基础

     

    在函数内不使用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>