JavaScript(es5)初级

最新推荐文章于 2022-08-09 11:04:40 发布

南初️

最新推荐文章于 2022-08-09 11:04:40 发布

阅读量264

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_45806781/article/details/110327090

版权

JavaScript 专栏收录该内容

51 篇文章 6 订阅

订阅专栏

目录

一、JavaScript的作用
二、JavaScript编程语言如何嵌入到网页
1. 内嵌写法
2.外部引入

三、标签注释
1. 多行注释
2. 单行注释

四、es5的数据类型（6种）
1. 数据类型分类
2.数据类型的强制转化（什么是装箱什么是拆箱）

五、JavaScript声明变量
1.变量
2.声明变量的关键字
(1) 声明一个变量
(2) 声明多个变量

3.JavaScript声明变量的语法规则
4. 输出代码到控制台检测
5.变量的命名
6.变量声明提前

六、函数（方法）
1.函数的关键字
2. 函数的主要功能
3. 如何声明函数
4.常规函数的两种形式
5. 函数的执行
6. 函数声明提前
7. 函数根据带没带参数可分为带参函数和不带参函数
有参函数
无参函数

8.函数返回值
带返回值的函数
不带返回值的函数

七、变量的作用域
1.局部变量
2.全局变量
3.闭包

八、检测数据类型
1. typeof----------检测数据类型
2. instanceof -----判断引用类型
3. 对象原型链判断
4. constructor

九、this指针
1. 常规的函数this指针指向的全是window。
2. 对象里面的函数，this指针指向的是当前对象。

十、垃圾回收机制
十一、JavaScript里面的运算符、结构语句
1. 算数运算符
2. 自增自减运算符
3. 赋值运算符
4. 逻辑运算符
5. 比较运算符
6. 逻辑结构 (条件)
7. 三元运算符
8. 选择结构
9. 循环语句
(1) for 循环
(2)while循环
(3)do while循环

10. 输出9*9乘法表
11. 字符串拼接
12. 打印三角形
(1)打印直角三角形
(2)打印等腰三角形

13. 打印菱形
14. 打印正方形
15. 打印平行四边形

一、JavaScript的作用

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
js使用场景:web项目（网站、web系统）、移动端（html5移动端、html5app、html5网站）、服务端（nodejs服务器–纯js编程）
前端html页面的交互，可以实现效果（动画，操作效果）、数据展示、数据验证、访问数据（小游戏开发、api接口访问实现（天气预报地图api ））等等。

二、JavaScript编程语言如何嵌入到网页

嵌入方式类似css嵌入方式

1. 内嵌写法

head或者body里面以script标签的方式去写入
在script标签内部写入可执行代码

<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <script type="application/javascript">
       /*
        *  代码区域
        * */
   </script>
</head>
<body>
<script type="application/javascript">
   /*
    * 代码区域
    * */
</script>
</body>

2.外部引入

head或者body内部进行引入script标签

<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <script type="application/javascript" src="js/index.js"></script>
</head>
<body>
<script type="application/javascript" src="js/index.js"></script>
</body>

三、标签注释

1. 多行注释

ctrl+shift+/

2. 单行注释

ctrl+/

四、es5的数据类型（6种）

1. 数据类型分类

值类型：Number、Boolean、Null、undefined、String（占用的空间大小固定不变，保存在栈中）
引用类型：Object、Function、Array (占用的空间位置大小可变，存放在堆中，指针引用)–如果没有变量引用，系统垃圾回收机制才会默认回收。

2.数据类型的强制转化（什么是装箱什么是拆箱）

装箱：值类型转化引用类型。
拆箱：引用类型转化值类型。
引用类型：占用空间不固定，保存在堆中。
值类型：占用空间固定，保存在栈中。
数字类型和字符串类型的转化
var s = "1234.1234";
console.log(parseInt(s));      //取整数部分
console.log(parseFloat(s));    //取整个数字
** 也可以使用parseInt，parseFloat去符号**
var money = "9999.999￥";
console.log(parseFloat(money));
但是符号必须在数字后面。
var money = "￥9999.999";
console.log(parseFloat(money));
NaN----------not a number 不是个数字
值类型转化为引用类型
var name = 123;
console.log(name.toString());
toFixed()：把数字转化为字符串，结果的小数点后有指定位数的数字。

五、JavaScript声明变量

变量声明之后，在使用之前必须初始化否则会报错。***is not defined

1.变量

变量：可变的量叫变量
常量：只能读取不能修改
变量：可读可写
js中变量没有做区分

2.声明变量的关键字

var（所有的变量都用var来声明，但注意要严格区分大小写）

(1) 声明一个变量

var A="赵**";
var is=true;
var name=null;
var user={};

(2) 声明多个变量

同名变量，虽然有就近原则（但是如果就近变量没有初始化，值还是上面的值）
var a, b,c=10;

3.JavaScript声明变量的语法规则

var 变量名称是否初始化（是否给值）
var a;        //声明但未初始化
var b = 10;   //声明+初始化

4. 输出代码到控制台检测

console.log(a);
console.log(window);------输出整个浏览器对象

5.变量的命名

驼峰命名： UserName
帕斯卡命名： userName
带符号_ ： user_name
可以编号，但不能纯数字。

6.变量声明提前

变量提升：声明变量可以提升，没有声明的变量不能提升
声明变量可以不带var
声明的变量为全局变量，不存在变量提升。
注：变量的声明提前在声明之前可以使用变量
js里面定义的所有全局变量全部是window对象的属性。
	
   console.log(price);//undefined
   var price=100;
   console.log(price);//100
   console.log(window.price);//100

六、函数（方法）

函数是有事件驱动或者主动执行的代码块。
在JavaScript中，主动的行为叫方法，被动的行为叫事件，都是调用函数。

1.函数的关键字

function

2. 函数的主要功能

代码的封装

3. 如何声明函数

function 函数名称(){}
常规函数
function method(函数的参数列表){
   /*
    * 代码区域
   * */
}

4.常规函数的两种形式

具名函数
function method(){
   /*
    * 代码区域
   * */
}
不具名函数（匿名函数）
var fun = function(){
   /*
    * 代码区域
   * */
}
自执行函数（匿名函数的一种）
(function(){
   /*
    * 代码区域
   * */
})()

5. 函数的执行

具名函数的执行：函数名称();

function method(){
   console.log("我在执行");
}
method();

匿名函数的执行

var fun = function(){
   console.log("匿名函数执行");
}
fun();

//自执行函数
(function(){
   console.log("匿名函数执行");
})()

6. 函数声明提前

在函数里面，基本函数存在声明提前；匿名函数不存在提前声明。
Date();
function Date(){
  console.log("日期函数");
}
fun1();
var fun1 = function(){
   console.log("匿名函数");
}
会报错—fun1 is not a function

7. 函数根据带没带参数可分为带参函数和不带参函数

前端是没有函数重载的。
函数的参数列表可以根据自己的需求来设定。

有参函数

有参函数形参的个数和类型跟代码块内部的业务逻辑需求有关。
function user(a,b,c){
   console.log(a,b,c);
}
user(1,true,false);
var fun2=function (a,b,c){
   console.log(a,b,c);
}
fun2(1,2,3);
(function(a,b){
   console.log(a,b);
})(1,2)

无参函数
var fun3=function (){
   console.log(arguments);
}
fun3(1,2,3);
在函数的参数列表对象上
arguments 是个集合类型
length属性代表参数列表的长度
key：value 键值
(function(){
   console.log(arguments);
})(1,2)

8.函数返回值

带返回值的函数
函数代码执行完成之后，可以返回 return值（任意类型）

	function method1(){
       console.log("函数执行");//函数执行
       return true;
   }
   console.log(method1());//true

var fun4 = function(){
    return true;
}
console.log(fun4());
//或者
var val = fun4();
console.log(val);

在这里插入图片描述

不带返回值的函数

   function method2(){
       console.log("函数执行");//函数执行
   }
   console.log(method2());//undefined

七、变量的作用域

var local = "window";
function method(){
  var local = "host";
  console.log(local);
}
method();
变量声明提前，所以输出的是undefined。
var local = "window";
function method(){
  console.log(local);
  var local = "host";
}
method();
为什么会出现这种情况呢？
主要是因为变量声明提前以及作用域的问题。

1.局部变量

作用于当前的代码块区域，定义的局部变量不会出现在window

2.全局变量

作用于整个作用域，定义的全局变量默认属于window
var name = "张三";
function method(){
  var sex = "男";
  console.log(name, sex);
}
method();
var name = "张三";
function method(){
  var sex = "男";
}
method();
console.log(name, sex);
//或者
function method2(){
  console.log(name, sex);
}
method2();
这两种情况都会报错，sex is not defined

3.闭包

把函数的局部变量作为私有变量在外部访问
具体见https://editor.csdn.net/md/?articleId=110288184

八、检测数据类型

1. typeof----------检测数据类型

null是特殊情况，null是引用空间的一处内存，引用什么不知道，所以typeof检测的是Object。
var a = 1;
var b = "abc";
var c = true;
var d = null;
var e = {};
var f = undefined;
var g = function(){};
var h = [];
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);
console.log(typeof f);
console.log(typeof g);
console.log(typeof h);

2. instanceof -----判断引用类型

只有引用类型可以用instanceof检测，值类型是没有类的，所以不能检测。

var a = 1;
var b = "abc";
var c = true;
var d = null;
var e = {};
var f = undefined;
var g = function(){};
var h = [];
console.log(a instanceof Number);
console.log(b instanceof String);
console.log(c instanceof Boolean);
console.log(d instanceof Object);
console.log(e instanceof Object);
console.log(f instanceof Object);
console.log(g instanceof Function);
console.log(h instanceof Object);

在这里插入图片描述

3. 对象原型链判断

Object.prototype.toString.call()
返回的是数据类型。

4. constructor

跟instanceof相似，但是constructor还可以检测值类型，不仅仅是引用类型（null和undefined没有constructor)。

九、this指针

1. 常规的函数this指针指向的全是window。

2. 对象里面的函数，this指针指向的是当前对象。

对象内部的this指向当前对象。
js中函数内部的this指向当前的window对象。

var name = "The window";
var object ={
  name:"my object",
  getNameFunc:function(){
     return function(){
     	//js中函数内部的this指向当前的window对象。
         return this.name;
     };
  }
};
console.log(object.getNameFunc()());

在这里插入图片描述

var name = "The window";
var object ={
  name:"my object",
  getNameFunc:function(){
  	//对象内部的this指向当前对象
     var name = this.name;
     return function(){
         return name;
     };
  }
};
console.log(object.getNameFunc()());

在这里插入图片描述

   function method(){
       console.log(this);
   }
   method();
   var fun = function(){
       console.log(this);
   }
   fun();
   (function(){
       console.log(this);
   })()

在这里插入图片描述

	var stu={
        goschool:function(){
            console.log(this);
        }
    };
    stu.goschool();//{goschool: ƒ}

十、垃圾回收机制

指的是方法内部的局部变量在使用完成之后自动回收，下次调用函数的时候会重置
垃圾回收机制是管理内存的
自动回收：检测程序里面的变量或者对象的引用，当这些不再引用的时候，会默认回收释放内存（因为在创建变量、函数等情况下会自动消耗内存）
手动回收：变量=null;
如果通过闭包，没有自动回收，要进行手动回收

十一、JavaScript里面的运算符、结构语句

1. 算数运算符

% + - * /

2. 自增自减运算符

++自增+1 --自减-1
前置是先自增或自减再运算
后置是先运算再自增自减
var c = 10;
var d = 20;
var m=++c-d;
console.log(m);
var c = 10;
var d = 20;
var h = (c++) + d;
console.log(h, c, d);

3. 赋值运算符

= += -= *= /= %=

4. 逻辑运算符

&&---------两者都
||-----------两个满足其一
!------------取反面
数字字符里面 0为false，非0为true
console.log(1 && 2);
console.log(0 && 2);
console.log(50 && 100);
console.log(true && true);
console.log(false || true);
console.log(!false);
&&是运算表达式，可以理解为当&&前面的值为真时，执行&&后面的表达式，&&前面的表达式为假时，返回false， | | 或运算表达式，可以理解为当| | 前面的值为假时，执行 | | 后面的表达式，当 | | 前面的表达式为真时，直接返回前面的表达式。

5. 比较运算符

< > >= <= != !== == ===
== 判断两边值相等，但不限定类型
=== 恒等，判断两边值一致并且数据类型一致
var a = 10;
var b = "10";
console.log(a == b);//true
console.log(a === b);//false

6. 逻辑结构 (条件)

if(){}
if(){}else{}
if(){}else if(){}else{}
根据运算符条件、表达式条件、值是否存在进行

   var cell = 1;
   var number = 10;
   var price = 99;
   var way = "";
   if (way == "微信支付") {
       cell = 0.85;
   }
   else if (way == "支付宝支付") {
       cell = 0.8;
   }
   else {
       cell = 1;
   }
   console.log(number * price * cell);

在这里插入图片描述

   var bell = true;
   if (bell) {
       console.log("我今天有事，不陪你！");
   }
   else {
       console.log("我今天没事，陪你！");
   }
   if(true){
   }

在这里插入图片描述

条件语句的嵌套

   var eat='';
   var w = '';
   if(eat=="吃饭"){
       if(w=="米饭")
       {
           console.log("炒菜");
       }
       else{
           console.log("面");
       }
   }
   else
   {
       console.log("不吃了");
   }

在这里插入图片描述

7. 三元运算符

简写版的逻辑结构：可以使用到方法内部
格式：条件？true：false
	var a=2;
    var b=3;
    console.log(b - a < 0 ? '<0' : '>0');//>0 

8. 选择结构

switch(属性){
   case: break;
   case: break;
   case: break;
   default: break;
 }

switch-----选择结构
break------跳出当前循环

   var num=10;
   switch (num){
       case 0:
           console.log("打麻将");
           break;
       case 1:
           console.log("打扑克");
           break;
       case 2:
           console.log("打乒乓球");
           break;
       case 3:
           console.log("踢足球");
           break;
       default :
           console.log("待着吧！");
           break;
   }

在这里插入图片描述

9. 循环语句

(1) for 循环

for(变量;条件;变量自增或自减){       
}

	function fun(n){
        n+=2;
        return n;
    }
    for(var i=0;i<10;i++){
        i=fun(i);
        console.log(i);//2 5 8 11
    }

   for(var i=10,b=0;i-b>0&&b+5<i;b++)
   {
       console.log(b);
   }

在这里插入图片描述

for（;;）{} 死循环–最简单的for循环
for循环嵌套使用

	for(var i=1;i<2;i++)
    {
        for(var k=1;k<2;k++)
        {
            console.log(i * k);//1
        }
    }

(2)while循环

while(){} 先判断后执行
var n=0;
while(n<10){
  n++;
  console.log(n);
}

(3)do while循环

无论如何都会执行一次
   var m=10;
   do{
       m--;
       console.log(m);
   }
   while(m>10);

10. 输出9*9乘法表

	for(var i=1;i<10;i++)
    {
        var s="";
        for(var k=1;k<=i;k++)
        {
            s+=k+"*"+i+"="+(i*k)+((i*k)<10?'  ':' ');
        }
        console.log(s);
    }

在这里插入图片描述

11. 字符串拼接

   var str="abcdef";
   var mon="ghjkl";
   console.log(str+10+mon);
   console.log("a"+5+"bcde"+0+"fgh"+8);
   console.log('abc'+10+'defg');
   console.log("abcd'11111'efg");
   console.log('abc"1211212"defg');

在这里插入图片描述

12. 打印三角形

(1)打印直角三角形

   for(var i=0;i<4;i++)
   {
       var s="";
       for(var k=0;k<2*i+1;k++)
       {
           s+="*";
       }
       console.log(s);
   }

在这里插入图片描述

(2)打印等腰三角形

   var h=4;
   for(var i=0;i<h;i++)
   {
       var s="";
       //打空格
       for(var j=0;j<h-i-1;j++)
       {
           s+=" ";
       }
       //打*
       for(var k=0;k<2*i+1;k++)
       {
           s+="*";
       }
       console.log(s);
   }

在这里插入图片描述

13. 打印菱形

   var h = 4;
   for(var i = 0;i<h;i++)
   {
       var s = "";
       for(var j = 0;j<h-i-1;j++)
       {
           s+=" ";
       }
       for(var j = 0;j<2*i+1;j++)
       {
           s+="*";
       }
       console.log(s);
   }
   for(var i = 0;i<h-1;i++)
   {
       s = "";
       for(var j = 0;j<=i;j++)
       {
           s += " ";
       }
       for(j = 0;j<2*(h-1-i)-1;j++)
       {
           s+="*";
       }
       console.log(s);
   }

在这里插入图片描述

14. 打印正方形

	var s="";
    for(var i=0;i<4;i++)
    {
        for(var k=0;k<4;k++)
        {
            s+="*";
        }
        s+="\n";
    }
    console.log(s);

在这里插入图片描述

15. 打印平行四边形

    for(var i=0;i<4;i++)
    {
        var s="";
        for(var j=0;j<=i;j++)
        {
            s+=" ";

        }
        for(var k=0;k<5;k++)
        {
            s+="*";
        }
        s+="\n";
        console.log(s);
    }

在这里插入图片描述

南初️

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
JavaScript(es5)初级

一、JavaScript的作用前端html页面的交互，可以实现效果（动画，操作效果）、数据展示、数据验证、访问数据（小游戏开发、api接口访问实现（天气预报地图api ））等等。二、JavaScript编程语言如何嵌入到网页1. 内嵌写法head或者body里面以script标签的方式去写入在script标签内部写入可执行代码<head lang="en"> <meta charset="UTF-8"> <title>&.
复制链接

扫一扫