javascript 学习指南--语法

最新推荐文章于 2023-11-28 11:27:00 发布

孤旅青山迷情人

最新推荐文章于 2023-11-28 11:27:00 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zyqblog/article/details/54670215

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

写在前面

本文是对 javascript 的部分说明和提点，不展开特别全面的论述，所以需要参考文档（点击这儿下载）的帮助

本文主要讲述javascript的语法与HMTL结合的方法 , 第二篇讲述javascript对象（包含javascript基本对象、bom对象和dom对象）、第三篇幅附上 javascript案例（包括与HMTL表单的验证案例、动态时间案例、下拉列表左右选择、鼠标点击效果、省市联动等）[链接点不动，说明文章还没有写]

javascript不同于java等语言，出现错误也很少提示，所以应该书写认真。

一、javascript（js）是什么

是基于对象和事件驱动的语言，
- 基于对象：提供很对对象，直接拿来用，像String对象，可以直接拿来使用其中的一些方法，如字符串分割等
- 事件驱动：网页动态效果
- 客户端：浏览器中

javascript和java没有任何关系，就像雷锋和雷峰塔，只是名字一样而已。

javascript 的组成：
- ECMAScript : ECMA 组织机构规定的 js语法
- BOM : （broswer object model ）浏览器对象模型
- DOM : （document object model）文档对象模型

二、javascript 与 HTML 的结合

第一种方法：

在HTML网页中用 <script></script> 直接编写js代码

<html >
   <head></head>
   <body>
        HTML 代码
   </body>
   <script type="text/javascript"> 
        js代码        
   </script>
</html>

第二种方法：

在外部创建一个.js 的文件，里面直接编写js 代码。 HTML网页直接用<script></script> 将 .js文件引进来

<html >
   <head></head>
   <body>
        HTML 代码
   </body>
   <script type="text/javascript" src="此处是 .js 文件的路径">     
   </script>
</html>

NOTE : <script></script> 可以放在HTML 中的任意位置，如放在<head> 中， <body> 中，但是最好放在 </body> 的后面，因为HMTL是从上向下解析，如果 js 代码放在前面，可能某些需求会变的难以实现。
另外，<script></script> 中的type="text/javascript" 属性对于现代浏览器来说可以省略。

三、javascript 语法简单说明

该语法详细部分请参考 W3S 手册

文中该语法部分在W3CSchool 参考文档中的正文标题javascript—–课程表——javascript——–js教程部分

（一）、原始类型和声明变量

无论声明何种类型，全部都用关键字 var
五种原始类型;
- String ： var str = " abc " ;
- number ：var n = 123.25 / 123 / 123e5 ;
- boolean ：var flag = true / false
- null ： var a = null ;
- undifined ：var aa ;

可以用 new 对象来声明变量，如：var n = new Num() ; 、var date = new Date () ;

（二）、三大语句

以下语句在javascript中同样适用：

if...else..
if ...else if ...else...
for (){...........}    
while(){.........}
do{.......}while()
switch(a) {       //a可以是字符串，区别于java，不过java中jdk1.7 开始支持了
                case 1:
                    break;
                case 1:
                    break;
                default:
                ......
 }

（三）、运算符

不做太多详述，查 W3S 手册，这里只做几点不同的说明：
- javascript中不区分整数和小数，比如： 123 / 1000 的结果是0.123，而不是0 。
- 字符串在相加时，是做字符串的链接；相减时是做运算。比如： var str =" 123 " , str+1 的结果是 1231 , 而 str-1的结果是 122 。
- == 比较的是值，===比较的是值和类型

（四）、数组

数组的定义：
- var arr = [1,"hello",true] 、 var arr = [1,"hello",true]
- 使用Array对象（后面详述） var arr1 = new Array(5); arr1[0] = "1";
- 使用Array对象（后面详述） var arr2 = new Array(3,4,5);

需要说明的是数组可以存放不同类型的数据

（五）、函数

关键字 function :
- function 方法名（参数值） { 方法体 }
- 匿名函数fuction (参数值) { 方法体 }（通常只用一次，不希望再被调用，有些大型项目，给方法起名字确实是个头疼活）
- 动态函数（用的很少） var add = new Function("参数列表","方法体和返回值");

javascript中的函数通常是作为HMTL的事件驱动函数，在HTML网页中定义一个按钮，触发的函数就写在javascript中：　比较典型的用法：

<html>
   <head></head>
   <body>
   //定义一个按钮
       <button onclick="myFunction()" >
       点击这里
       </buttion>
   </body>
   <script type="text/javascript">
   //定义事件函数
      function myFunction(){
         alert("Hello World");//弹出对话框
      }
   </script>
</html>

NOTE: javascript中没有函数重载，如果有多个函数重载了，那么只执行最后一个函数。其他不执行的重载函数的参数值在传递过程中保存到arguments 数组中。如果有必要，可以直接对 arguments数组进行长度（参数个数）判断，定位是那个重载函数，然后进行取数组值等操作。

（六）、注释

同java ；单行用 //; 多行用 /*.....*/

（七）全局变量和局部变量

全局变量：在<script></script>内定义的变量，在什么地方都可以使用，甚至在另一个<script></script>中也可以使用
局部变量：只能在局部使用，如：方法函数中定义的变量，只能在函数体中使用。

在IE8以上版本中，按F12 , 能看到关于变量作用域的提示的错误，算是一个调试工具吧。
如：提示如下错误

-SCRIPT5009:  “aa”未定义  

15-js的局部变量.html, 行20 字符3

（八）、几个全局函数说明

这儿有几个函数，由于不属于任何的一个对象（开始说过，js是基于对象的，依托对象，js会用很多丰富的函数使用），这些函数直接写名字，不需要写成对象名.函数名（）的形式。（关于其他重要丰富函数，将会在javascript对象中说明）

eval ( ) : 执行js代码

var str="alert('aaaa') ;
eval (str);   // 弹出框，内容是aaaa。 而非 alert( 'aaaa' );

encodeURI() ：对字符进行编码 ; decodeURI() ：对字符进行解码

//编码
var str1 = "中文aaa46";
var encode = encodeURI(str1);
document.write(encode); //输出 %E4%B8%AD%E6%96%87aaa46
//解码
var decode1 = decodeURI(encode);
document.write(decode1);  //输出 中文aaa46

isNaN() ：判断当前字符串是否是数字

如果是数字，返回false ；如果不是数字，返回true
parseInt()：类型转换，转换成int类型

孤旅青山迷情人

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript 学习指南--语法

写在前面本文是对 javascript 的部分说明和提点，不展开特别全面的论述，所以需要参考文档（点击这儿下载）的帮助本文主要讲述javascript的语法与HMTL结合的方法 , 第二篇讲述javascript对象（包含javascript基本对象、bom对象和dom对象）、第三篇幅附上 javascript案例（包括与HMTL表单的验证案例、动态时间案例、下拉列表左右选择、鼠标点击效果、
复制链接

扫一扫