Blogger Information
Blog 14
fans 2
comment 2
visits 6653
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
初识JS主要实例场景使用演示
西门瑶雪
Original
413 people have browsed it

1. 实例演示变量,常量的声明与初始化,使用方法

1.1、变量与常量的声明方式

1.1.1、变量用let声明,声明内容可以为空,后续可以更新,具备作用域功能;
1.1.2、【var】此前版本使用,后续统一为let吗,,var无作用域功能,容易引起代码数据混乱;
1.1.3、常量用const声明,常量后续不可更新,必须声明内容;
1.1.4、代码中的成员主要数据和操作;
1.1.5、console是控制台用于查看数据,log方法是打印内容显示

console.log(object);object是自变量,字符串;引号是字符串的定界符(内容的开始—结束边界)

1.1.6、变量使用前,必须要声明;

变量是数据的临时存放容器;
变量是自变量的数据复用
操作要书写到{}里面;

图片示例展示

代码实例演示

  1. <script>
  2. //变量的声明方式
  3. //初始化为第一次赋值,后续为更新;同一个变量,不能重复被声明;
  4. //let a;
  5. //a=10;
  6. let a = 10;
  7. console.log(a);
  8. //常量的声明方式
  9. const a=9999;
  10. console.log(a);//输出9999
  11. //操作都需要写到大括号内
  12. {
  13. let ya = "你好中国网!"+"你好,世界网!"
  14. console.log(ya);
  15. console.log(a+d);
  16. console.log(a*d);//输出1990
  17. console.log(a+"99"); //输出1099
  18. console.log(a+ya); //10你好中国网!+你好,世界网!
  19. }
  20. //函数演示,有开发者自定义数值
  21. function sum(t,d) {
  22. // let c = t+d;
  23. // return c;
  24. return t+d;
  25. }
  26. console.log(sum(80,100));
  27. console.log(sum(180,1010));
  28. console.log(sum(8880,10990));
  29. </script>

2. 实例演示作用域的类型与查看方式

  1. //全局作用域与私有作用域演示
  2. //优先级顺序:先返回函数内赋值,若无则调用全局的赋值;
  3. let js=998;
  4. function g(){
  5. //let js=888;【未注释则返回888,注释返回998】
  6. return js;
  7. }
  8. console.log(g(js));

3. 写出合法标识符的基本规则,并实例演示

合法标识符:字母,数字,$,_均可使用,但是数字不能用于开头
默认变量不能使用,如let,var,class,function

  1. //变量合法标识符:字母,数字,$,_均可使用,但是数字不能用于开头
  2. //默认变量和特殊字符不能用作变量,如let,var,class,function
  3. //不合法变量标识演示
  4. let let=999;
  5. let var=999;
  6. let class=999;
  7. let function=999;
  8. let a$#=999;
  9. let 99let=999;

  1. //变量合法标识符:字母,数字,$,_均可使用,但是数字不能用于开头
  2. //默认变量和特殊字符不能用作变量,如let,var,class,function
  3. //正确使用变量标识演示
  4. let $=17;
  5. console.log($);
  6. let d_d=179;
  7. console.log(d_d);
  8. let dd_=1007;
  9. console.log(dd_);
  10. let _$ss=188997;
  11. console.log(_$ss);
  12. let _=9999888997;
  13. console.log(_);

4. 实例演示最常用的三种函数类型

  1. //有名函数
  2. let a = 100;
  3. function f(){
  4. console.log(123);
  5. //没有加 return,则先返回123,后续必反回undefined;若该函数内直接打印数据,则因数据混乱无限报错;
  6. }
  7. console.log(f());
  1. //匿名函数
  2. let aValue = function (uName) {
  3. return uName+"php中文网!";
  4. };
  5. console.log(aValue("梦想开始的地方——"));
  1. //箭头函数:用来简化匿名函数,如果只有一个形参可以去掉括号,如果没有参数和有多个参数必须加括号
  2. aStee = (yuPee)=>{
  3. return "php中文网"+yuPee+"专业教学,您值得信赖!"
  4. }
  5. console.log(aStee(20));
  1. //完整演示代码
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>JS代码实例效果演示</title>
  9. </head>
  10. <body>
  11. <script>
  12. //初始化为第一次赋值,后续为更新;同一个变量,不能重复被声明;
  13. // let a;
  14. // a=10;
  15. let a = 10;
  16. console.log(a);
  17. console.log(a+a);
  18. console.log(a*5);
  19. console.log(a*a);
  20. console.log(a-a);
  21. const B = 9999;
  22. console.log(B);
  23. let d = 199;
  24. //操作都需要写到大括号内
  25. {
  26. let ya = "你好中国网!"+"你好,世界网!"
  27. console.log(ya);
  28. console.log(a+d);
  29. console.log(a*d);//输出1990
  30. console.log(a+"99"); //输出1099
  31. console.log(a+ya); //10你好中国网!+你好,世界网!
  32. }
  33. //函数演示,有开发者自定义数值
  34. function sum(t,d) {
  35. // let c = t+d;
  36. // return c;
  37. return t+d;
  38. }
  39. console.log(sum(80,100));
  40. console.log(sum(180,1010));
  41. console.log(sum(8880,10990));
  42. //函数演示,有开发者自定义数值
  43. function sum(a,b) {
  44. // let c = t+d;
  45. // return c;
  46. return a+b;
  47. }
  48. console.log(sum(8,10));
  49. //有名函数
  50. //匿名函数
  51. function f(){
  52. console.log(123);
  53. }
  54. console.log(f());
  55. //变量合法标识符:字母,数字,$,_均可使用,但是数字不能用于开头
  56. //默认变量和特殊字符不能用作变量,如let,var,class,function
  57. //let let=999;
  58. //let var=999;
  59. //let class=999;
  60. //let function=999;
  61. //let a$#=999;
  62. //let 99let=999;
  63. let $=17;
  64. console.log($);
  65. let d_d=179;
  66. console.log(d_d);
  67. let dd_=1007;
  68. console.log(dd_);
  69. let _$ss=188997;
  70. console.log(_$ss);
  71. let _=9999888997;
  72. console.log(_);
  73. //全局作用域与私有作用域演示
  74. let js=189989565;
  75. function g(js){
  76. //let js=888;
  77. return js;
  78. }
  79. console.log(g(js));
  80. //函数作用域,p,q是形式参数,参数列表;
  81. function si(p,q){
  82. //let ki=p+q;
  83. //return ki;
  84. let kii=p*q;
  85. return kii;
  86. }
  87. console.log(si(15,20));
  88. let tel=18800009999
  89. //console.log(tel);
  90. {
  91. // let tel=10020003000
  92. console.log(tel);
  93. }
  94. // 1. 全局变量:代码区块,函数外部的变量,可以在代码区块,函数里使用
  95. let userInfo = "name + age + sex";
  96. function getUserInfo() {
  97. // let userInfo="朱老师"+"19岁"+男;
  98. return userInfo;
  99. }
  100. console.log(getUserInfo());
  101. // 查看变量类型
  102. console.log(typeof getUserInfo());
  103. // 2. 局部变量:代码区块,函数内部的变量,不能在代码区块,函数以外使用
  104. function dropBeat() {
  105. let beat = "Still Dre";
  106. return beat;
  107. }
  108. console.log(dropBeat()) ;
  109. function dropBeat(a,b) {
  110. let beat = a*b;
  111. let ets = a+b;
  112. return beat;
  113. return ets;
  114. }
  115. console.log(dropBeat(100,200)) ;
  116. let aValue = function (uName) {
  117. return uName+"php中文网!";
  118. };
  119. console.log(aValue("梦想开始的地方——"));
  120. //箭头函数
  121. aStee = (yuPee)=>{
  122. return "php中文网"+yuPee+"专业教学,您值得信赖!"
  123. }
  124. console.log(aStee("20年"));
  125. </script>
  126. </body>
  127. </html>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
kiraseo 2022-07-20 23:10:55
写的好完整啊,赞
1 floor
Author's latest blog post