JavaScript的基本语法(一)

1.1 JavaScript的编写方式

2.1.1 在HTML页面在<Script>标签内部进行编写

  • 单行注释://
  • 多行注释: /**/
  • JavaScript常用的两个函数:
  1. alert("数据")           =>弹出框
  2. document.write("数据")            =>向页面输出数据 ,相当于java中的输出语句System.out.println();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        alert("这里是JavaScript弹出框...");
        document.write("我爱java,java爱我!")
    </script>
</head>
<body>

</body>
</html>
  • 优点:结构简单。
  • 缺点:
  1. 代码耦合度高,js代码与HTML代码混合在一起。
  2. 复用性差。

 2.1.2 引入外部到js文件

<script type="text/javascript" src="js/a.js"></script>
  • 注意:
  1. <Script>标签用于引入js文件的时候, 一定需要写上<Script>标签的结束标签。
  2. 一个<Script>标签一旦用于引入了js文件,那么标签体不能够再编写js代码了。如果想在HTML页面在<Script>标签内部进行编写,可以再写一个<script  type="text/javascript"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <!--<script type="text/javascript">
        alert("这里是JavaScript弹出框...");
        document.write("我爱java,java爱我!")
    </script>-->
    <!--当前这个标签的作用是用于导入一个js文件。-->
    <script type="text/javascript" src="js/a.js"></script>
</head>
<body>

</body>
</html>

2.2 JavaScript的注释

语言 注释语法
HTML <!--注释-->
CSS //单行注释
javaScript /*多行注释*/

2.3 变量

2.3.1 定义变量的格式

  • var 变量名= 数据

 2.3.2 定义变量的特点

  1. var关键字可以省略,建议加上。
  2. 变量可以重复定义:var a=5; var a="abc";重复定义之后,后定义同名变量会直接覆盖前面的同名变量。
  3. 在java中大括号变量有作用范围,在js中不受这个限制。
  4. 一个变量存储的数据可以随时发生变化。
  5. 一个变量的数据类型是取决于当前存储的数据。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        var age = 18;
        var name = "陈奕迅";
        document.write("年龄是:"+age+"</br>");
        document.write("姓名是:"+name+"</br>");
    </script>
</head>
<body>

</body>
</html>

2.4 数据类型

  • 在JavaScript中可以使用typeof关键字查看变量的数据类型,格式:typeof   变量名

 2.4.1 五种原始数据类型

关键字 说明
number 数值型:包括整数和浮点数
boolean 布尔类型:true/false
String 字符串:包含字符和字符串。可以使用双引号和单引号
undefined 未初始化,未知类型
null 表示该变量是一个引用类型变量

 

  • JavaScript中的数据类型总结:
  1. number 小数与整数
  2. boolean 布尔
  3. String  字符串类型包含了字符与字符串
  4. null  null类型,null.
  5. undefined  代表了当前变量没有存储任何的数据

2.4.2 引用类型

  • Object  对象类型:js内置对象或自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        var a = 10;
        var b = 3.14;
        var c = true;
        var d = 'a';
        var e = "hello";
        var f = null;
        var g;
        var person ={id:10,name:"陈奕迅"};

        document.write("a="+a+"的数据类型是:"+(typeof a)+"</br>");
        document.write("b="+b+"的数据类型是:"+(typeof b)+"</br>");
        document.write("c="+c+"的数据类型是:"+(typeof c)+"</br>");
        document.write("d="+d+"的数据类型是:"+(typeof d)+"</br>");
        document.write("e="+e+"的数据类型是:"+(typeof e)+"</br>");
        document.write("f="+f+"的数据类型是:"+(typeof f)+"</br>");
        document.write("g="+g+"的数据类型是:"+(typeof g)+"</br>");
        document.write("person="+person+"的数据类型是:"+(typeof person)+"</br>");
    </script>
</head>
<body>

</body>
</html>

 2.5 字符串转换成数字类型

2.5.1 类型转换的目的

  • 以后我们从网页中获取到的所有数据都是String类型,但是有时候数据是需要转换成number类型才能够比较的,所以我们需要学习类型转换。JavaScript内置了三个函数关于类型转换的。
转换函数 作用
parseInt(变量) 将一个字符串类型的数组转成整数类型,如果转换失败,返回NaN=Not a Number 不是一个数字,将数字开头可以转一部分
parseFloat(变量) 将一个字符串类型的数字转成浮点数,如果转换失败,返回NaN
isNaN(变量)

非数字返回true,数字返回false。isNaN = is not a number

如:“abc”返回true,“123abc”返回true,“123”返回false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        /*
            数据类型转换相关的方法:
            1.parseInt(变量)将一个字符串类型的数字转换为整数类型,转换的时候会从首字母先检查是不是数字字符,
            一直往后取数字字符,一旦发现不是数字字符的时候,马上停止获取,把前面的数字字符转换为number类型。
            2.parseFloat(变量)将一个字符串类型的数字转成浮点数,转换的时候会从首字母先检查是不是数字字符,
            一直往后取数字字符,一旦发现不是数字字符的时候,马上停止获取,把前面的数字字符转换为number类型。
            3.isNaN(变量) 非数字返回true,数字返回false。isNaN=is not a number
            如"abc" 返回true,”123abc"返回true,“123“返回false
         */
        var age = "101a10";
        //需求:把age转换为number类型
        age=parseInt(age);
        document.write("年龄为:"+age+"<br/>");

        //身高:1.75
        var height = 1.75;
        height = parseFloat(height);
        document.write("身高为:"+height+"<br/>");

        var a="12a";
        document.write("不是数字字符构成的吗?"+(isNaN(a)));
    </script>
</head>
<body>

</body>
</html>

2.6 在浏览器调试js:

IE、Chrome、FireFox中调试的快捷键:F12

  • 方式一:直接查看后台的错误信息(网页没有任何内容输出的时候即出现了错误)

 

  •  方式二:如果输出的内容与你预期的不吻合(debug调试)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript">
        //需求:在网页上输出5句helloWorld
        for(var i=0;i<=5;i++){
            document.write("helloWorld"+"<br/>");
        }
    </script>
</head>
<body>

</body>
</html>

展开阅读全文

没有更多推荐了,返回首页