devbox
Guff_9hys
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

网站建设学习（九）——JavaScript基础语法（上）_emcajavascript语法学习

作者：Guff_9hys | 2024-07-16 23:53:42

赞

踩

emcajavascript语法学习

 

       html作为骨架，css作为装饰，网页页面可以进行建设，但是当网站与用户交互时，就需要一种脚本语言进行沟通，既提升了用户体验，同时也减少了服务器端压力，接下来介绍的第三门语言为JavaScript，一种脚本语言，作为语言方法及操作众多，文章会分为几部分进行介绍，同时也会在文章末给出js的参考链接。在执行本篇代码前，依旧需要在html同文件夹下建立一个js基础语法.js文件。

html：

  1. <html>
  2. <!--  标签html：内部包含整个HTML页面，所有的设计均在当前的html标签内部进行-->
  3.     <head>
  4.     <!--整个文件的头部，里面包括一些属性供浏览器识别解析，对用户不可见-->
  5.  
  6.         <title>标题</title>
  7.         <!--标签title，说明整个页面的标题，最终显示在浏览器加载页面的标签页-->
  8.  
  9.         <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  10.         <!--告诉浏览器以utf-8的码表进行解码，防止中文乱码，meta标签是无标签体标签，结束在开始标签后加反斜杠，即空标签-->
  11.  
  12.         <meta name="keywords" content="html,展示"/>
  13.         <!--展示此网页的关键词，供搜索引擎使用，以“,”分开，其中关键词个数为权重，越多权重越低，一般为3到5个-->
  14.  
  15.         <meta name="description" content="html编程学习"/>
  16.         <!--网页描述，展示在搜索引擎的网页的索引页面-->
  17.  
  18.         <script src="js基础语言.js"></script>
  19.         <!--引入js文件-->
  20.  
  21.     </head>
  22.  
  23.  
  24.     <body>
  25.     <!--整个文件的体，设计元素在这个部分中，最终展示给用户-->
  26.  
  27.     </body>
  28. </html>

js基础语法.js：

  1. //js，即javascript，前部分介绍了html与css语言，html作为总架构，css作为装饰
  2. //JavaScript则作为与用户交互语言，在服务器端进行一些操作
  3. //js语法体系分为EMCA基础语法（已统一），BOM与DOM编程（未完全统一）
  4.  
  5. /*
  6.     常用函数：alert("")//提示框效果
  7.              document.write("")//向html页面中输出内容
  9.     js引用方式有两种，第一种使用<script type="text/javascript"></script>标签引用，
  10.     第二种是外部调用，使用<script src="js文件路径"></script>导入js文件
  11. */
  12.  
  13. var a = 10;
  14. var b = 3.14;
  15. var c = false;
  16. var d = 'a';
  17. var e = "10";
  18. var f = new Object();
  19.  
  20. document.write(a+"；类型："+typeof(a)+"<br/>");
  21. document.write(b+"；类型："+typeof(b)+"<br/>");
  22. document.write(c+"；类型："+typeof(c)+"<br/>");
  23. document.write(d+"；类型："+typeof(d)+"<br/>");
  24. document.write(e+"；类型："+typeof(e)+"<br/>");
  25. document.write(f+"；类型："+typeof(f)+"<br/>");
  26.  
  27. /*js有四种数据类型：number boolean string object 但都用var定义 */
  28.  
  29. //类型转换函数 字符串到整数：parseInt();
  30. //            字符串到小数：parseFloat();//表单接收的都是string类型，比较时number与string可以自动转换
  31. //运算符与流程控制与java语法相同，这里不予以介绍
  32. /*
  33. swtich(){
  34.     case 选项:
  35.         执行;
  36.         break;
  37.     case 选项:
  38.         执行;
  39.         break;
  40.     case 选项:
  41.         执行;
  42.         break;
  43.     default:
  44.         执行;
  45.         break;
  46. }//选项可以为变量或者为表达式，但是java中不支持
  47. */
  48. /*
  49. for-in语句使用
  50. for(var i in arr){}//可以遍历数组或者对象
  51. */
  52. /*
  53. with语句可以方便函数的调用，java里没有
  54. with(document){
  55.     write();
  56.     write();
  57. }
  58. */
  59. //函数定义：function 函数（形参）{语句；}
  60. //函数调用：函数（实参）；
  61. function add(a , b){
  62.     var result = a+b;
  63.     document.write(result+"<br/>");
  64. }
  65. add(10,20);//函数不可以重载，后定义的方法会覆盖之前的方法
  66. //函数中的形参和实参的数量不一致也可以调用，多于NaN，少于后面实参丢弃，因为参数以arguments数组传递，从左到右依次赋值
  67.  
  68. //内置对象介绍
  69. //Array对象
  70. arr1 = new Array();//定义数组
  71. arr2 = new Array(5);//定义数组个数
  72. arr3 = new Array(1,2,3,4,5);//定义数组内容
  73.  
  74. document.write(arr1.constructor+"<br/>");//返回数组的属性名称
  75. document.write(arr1.length+"<br/>");//返回数组长度，定义未给值的长度为0
  76.  
  77. document.write(arr3.concat(arr3)+"<br/>");//连接两个数组并返回结果
  78. arr1[0] = 1;
  79. arr1[1] = 2;
  80. arr1[2] = 3;
  81. document.write(arr1.join()+"<br/>");//将数组所有元素放入一个字符串
  82. document.write(arr3.pop()+"<br/>");//删除并返回最后一个元素
  83. document.write(arr3.push(6)+"<br/>");//向末尾添加元素并返回长度
  84. document.write(arr3.reverse()+"<br/>");//颠倒整个数组
  85. document.write(arr3.shift()+"<br/>");//删除并返回第一个元素
  86. document.write(arr3.unshift(7)+"<br/>");//向开头添加元素并返回长度
  87.  
  88. document.write(arr3.slice(1)+"<br/>");//第一个数字为起始，第二个为结束，负数表示倒数
  89. document.write(arr3.sort()+"<br/>");//对数组进行排列，顺序以括号内属性为准
  90. document.write(arr3.splice(0,1,8)+"<br/>");//第一个参数删除的位置，第二个参数删除的个数，第三个表示增加的参数
  91. document.write(arr3.toString()+"<br/>");//将数组转化为字符串返回结果
  92. document.write(arr3.valueOf()+"<br/>");//返回数组原始值
  93.  
  94.  
  95. //Boolean对象
  96. var a = new Boolean(true);
  97.  
  98. document.write(a.toString()+"<br/>");//返回对象字符串
  99. document.write(a.valueOf()+"<br/>");//返回对象原始值
  100.  
  101.  
  102. //Date对象
  103. var myDate = new Date();
  104. document.write(myDate+"<br/>");//返回日期
  105. document.write(myDate.getDate()+"<br/>");//返回日
  106. document.write(myDate.getDay()+"<br/>");//返回星期
  107. //还可以返回小时，分钟，毫秒等等，文末会给出方法参考链接
  108.  
  109. document.write(Date.parse(myDate)+"<br/>");//返回1970.1.1午夜至今的毫秒数
  110.  
  111. document.write(myDate.setDate(2)+"<br/>");//设置时间的某一天，以毫秒显示
  112. //对应get方法有相应的set方法，用以设置时间，文末会有参考链接
  113.  
  114. document.write(myDate.toString()+"<br/>");//将date转化为字符串
  115. document.write(myDate.toDateString()+"<br/>");//根据date类型将日期部分转化为字符串
  116. document.write(myDate.toTimeString()+"<br/>");//根据date类型将时间部分转化为字符串
  117. document.write(myDate.toUTCString()+"<br/>");//根据世界时间转化为字符串
  118. document.write(myDate.toLocaleString()+"<br/>");//根据本地时间格式转化为字符串
  119. //还有其他转化字符串的形式方法，文末会给出参考链接
  120.  
  121.  
  122. //Math对象
  123. document.write(Math.PI+"<br/>");//返回π
  124. document.write(Math.E+"<br/>");//返回e
  125. document.write(Math.LN2+"<br/>");//返回2的自然对数
  126. document.write(Math.LN10+"<br/>");//返回10的自然对数
  127. document.write(Math.LOG2E+"<br/>");//返回以e为底的对数
  128. document.write(Math.LOG10E+"<br/>");//返回以e为底的对数
  129. document.write(Math.SQRT1_2+"<br/>");//返回根号二的倒数
  130. document.write(Math.SQRT2+"<br/>");//返回根号二
  131.  
  132. var number = 10;
  133. document.write(Math.abs(number)+"<br/>");//返回绝对值
  134. document.write(Math.acos(number-9)+"<br/>");//返回反余弦值
  135. document.write(Math.sin(number)+"<br/>");//返回正弦值
  136. document.write(Math.sqrt(number)+"<br/>");//返回平方值
  137. document.write(Math.exp(number)+"<br/>");//返回e的指数
  138. document.write(Math.log(number)+"<br/>");//返回自然对数
  139.  
  140. var a = 3;
  141. var b = 6;
  142. document.write(Math.max(a,b)+"<br/>");//返回最大值
  143. document.write(Math.pow(a,b)+"<br/>");//返回a的b次幂
  144. document.write(Math.random(10)+"<br/>");//返回随机数
  145. //其余Math方法会在文末链接给出
  146.  
  147.  
  148. //Number对象
  149. document.write(Number.MAX_VALUE+"<br/>");//可表示的最大值
  150. document.write(Number.MIN_VALUE+"<br/>");//可表示的最小值
  151. document.write(Number.NaN+"<br/>");//表示非数字值
  152. document.write(Number.NEGATIVE_INFINITY+"<br/>");//表示负无穷大
  153. document.write(Number.POSITIVE_INFINITY+"<br/>");//表示正无穷大
  154.  
  155. var a = new Number(1234.567);
  156. document.write(a.toString()+"<br/>");//转化为字符串
  157. document.write(a.toLocaleString()+"<br/>");//转化为本地字符串
  158. document.write(a.toFixed(2)+"<br/>");//转化为小数点后指定位数的字符串
  159. document.write(a.toExponential()+"<br/>");//转化为指数计数法
  160. document.write(a.toPrecision(4)+"<br/>");//转化为指定长度
  161.  
  162.  
  163. //String对象
  164. var str = "abcdef";
  165.  
  166. document.write(str.big()+"<br/>");//大字体显示
  167. document.write(str.blink()+"<br/>");//闪烁显示
  168. document.write(str.bold()+"<br/>");//粗体显示
  169. document.write(str.fixed()+"<br/>");//打字机文体显示
  170. document.write(str.fontcolor("#f00000")+"<br/>");//指定颜色显示
  171. document.write(str.italics()+"<br/>");//斜体显示
  172. document.write(str.link("https://www.baidu.com")+"<br/>");//链接
  173. document.write(str.small()+"<br/>");//小字体显示
  174. document.write(str.sup()+"<br/>");//上标显示
  175. document.write(str.strike()+"<br/>");//删除线显示
  176.  
  177. document.write(str.charAt(2)+"<br/>");//返回指定字符
  178. document.write(str.charCodeAt(2)+"<br/>");//返回指定字符编码
  179. document.write(str.split('c')+"<br/>");//以指定字符分割
  180. document.write(str.toUpperCase()+"<br/>");//以大写返回
  181.  
  182. document.write(str.match('c')+"<br/>");//返回正则匹配
  183. document.write(str.replace('c','C')+"<br/>");//替换正则匹配
  184. document.write(str.search('C')+"<br/>");//判断是否匹配成功

JavaScript参考手册链接：JavaScript参考手册

       这其中有不合适或者不正确的地方欢迎指正，我的QQ号码：2867221444（乔金明），谢谢，也可以相互交流下，备注信息随意，只要能看得出是开发者或者学习者即可。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/836842
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号