JavaScript 基础总结

笔者论坛

于 2019-06-27 20:22:23 发布

阅读量152

点赞数 1

文章标签： javaScript基本语法

本文链接：https://blog.csdn.net/changjinfeng123/article/details/93907859

版权

JavaScript 基础总结

一、引入方式

首先说明一点：可以在文档中的任何地方，但一般放在头部和尾部。

1、使用script标签：使用script标签时可以在…里面定义，也可以在…里面定义。

	（1）在<head>...</head>里面定义：
<head>
    <meta charset="UTF-8">
    <title>JavaScript引入方式</title>
    
    <script>
        var name="胡歌";
        document.write("<h1>他是江左梅郎，一代英豪</h1>");
    </script>

</head>

	（2）在<body>...</body>里面定义：
<body>

<script>
    var name="江疏影";
    document.write("<h1>江疏影是我的偶像！</h1>");
    function play() {
        document.write("<h1>江疏影拍过《恋爱先生》这部电视剧，女神级别的人物</h1>");
    }
</script>

</body>

**注意：**虽然script标签时可以在…里面定义，也可以在…里面定义但建议在…里面的最后定义，这样以防Script标签里面的内容调用其他内容时还没有被加载就直接执行，导致达不到预期的结果。

2、使用外部js文件然后导入：

	JavaScript文件：
var name="刘亦菲";
var age=33;
document.write("<h1>刘亦菲好漂亮</h1>");
function called() {
    document.write("<h1>神仙姐姐</h1>");
}
	
	HTML文件：
<body>
<script src="../二、JavaScript引入包/export.js" type=""></script>
</body>

**注意：**这种外部导入js文件的方式易操作，后期也易维护和易修改，且不占用HTML文件的存储空间，所以推荐使用这种方式。

3、直接在HTML标签中定义：

<body>
<input type="button" value="弹出消息框" name="btn" onclick="javascript:alert('北京欢迎你');">
</body>

**注意：**虽然JavaScript语言可以在HTML文件中直接定义，但这种方式太过繁冗，况且引入JavaScript语言时无法写入过多的语句，所以不推荐使用。
**补充内容：**当在javascript语言中你想要写入的语句的外层已经被双引号括起来，若你想要写入的语句恰好也要被双引号括起来，那么你写入的语句就必须使用单引号括起来。

二、输出方式

1、（弹窗 (浏览器事件)——提示信息

<body>
<script>
	alert("Hello, World");
</script>
</body>

2、弹窗 (浏览器事件)——提示信息，默认信息/可选填信息

<body>
<script>
	 prompt("请输入你喜欢的偶像","赵丽颖");
</script>
</body>

3、输出在网页上 (html语言) (文档对象事件)

<body>
<script>
	//以正文文本的格式显示在网页上
	document.write("初学JavaScript"); 
    
    //以输入的格式显示在网页上，建议使用这种方式
    document.write("<h1>Hello , JavaScript</h1>");
</script>
</body>

4、控制台输出 (调试语法)

<body>
<script>
	 console.log("阳光下的一粒尘埃");
</script>
</body>

5、写在网页上

<body>
<script>
	document.getElementById("爱");
</script>
<div id="爱">I love You</div>
</body>

三、JavaScript基本语法之数据类型

1、基本数据类型

（1）number：整型或浮点型，将Java语言的整型和浮点型合并在一块的数据类型。

<body>

<script>

  var iNum=10;  //整数
  var size=3.141592653589793238462643;  //浮点数
 	
 	//Typeof运算符：检测变量的返回值，即检测变量的数据类型
 	document.write("<h1>"+typeof(iNum)+"</h1>"); //number
    document.write("<h1>"+iNum+"</h1>"); //10

    document.write("<h1>"+typeof(size)+"</h1>"); //number
    document.write("<h1>"+size+"</h1>"); //3.141592653589793
    
    </script>
    
</body>

（2）boolean：true和false，与Java语言的数据类型一样。

<body>

<script>
  var girlFrind=false;  //布尔值
 	
 	//Typeof运算符：检测变量的返回值，即检测变量的数据类型
 	document.write("<h1>"+typeof(girlFrind)+"</h1>"); // boolean
    document.write("<h1>"+girlFrind+"</h1>"); // false
    
    </script>
    
</body>

（3）undefined：当一个变量声明之后未定义任何内容，即其没有初始值，我们并不知道其具体类型，所以该变量的类型为undefined，该变量的值也为undefined。

（4）null：当一个变量声明之后手动将其内容定义为null，即其初始值为null，我们并不知道其具体类型，但该变量已有初始值，所以该变量的类型为Object，该变量的值为null。

undefined与null的区别：undefined指一个变量声明之后未定义任何内容，而null指一个变量声明之后，我们手动将其值定义为空值。

2、引用数据类型

（1）string：一组被引导（单引号或）双引号括起来的文本。

注意：在JavaScript语法中没有字符这一说，被单引号括起来的文本也被成为字符串，属于引用数据类型。

<body>

<script>
  var alphabetic='a';   //字符
  var name="中国好声音"; //字符串
 	
 	//Typeof运算符：检测变量的返回值，即检测变量的数据类型
 	document.write("<h1>"+typeof(alphabetic)+"</h1>"); //string
    document.write("<h1>"+alphabetic+"</h1>"); // a

    document.write("<h1>"+typeof(name)+"</h1>"); // string
    document.write("<h1>"+name+"</h1>"); // 中国好声音
    
    </script>
    
</body>

（2）数组：JavaScript语法中数组已经成为一个专属的类Array，其定义方式为：

<body>

<script>
  var arr = new Array(); //数组
 	
 	//Typeof运算符：检测变量的返回值，即检测变量的数据类型	
 	document.write("<h1>"+typeof(arr)+"</h1>"); // object
    document.write("<h1>"+arr+"</h1>"); //无显示
    
    </script>
    
</body>

（3）类：JavaScript语法中定义一个类其定义类型永远都是 var，这与Java语言有很大的不同之处。

<body>

<script>
  var date = new Date();    //类
  
 	//Typeof运算符：检测变量的返回值，即检测变量的数据类型	
 	document.write("<h1>"+typeof(date)+"</h1>"); //object
    document.write("<h1>"+date+"</h1>"); //Mon Jun 24 2019 21:04:42 GMT+0800 (中国标准时间)
    
    </script>
    
</body>

四、JavaScript基本语法之变量赋值

1、先声明变量再赋值

<body>

<script>
	//var：用于声明变量的关键字
	var name;    //字符串
    name="彭于晏";
    document.write("<h1>"+typeof(name)+"</h1>"); //string
    document.write("<h1>"+name+"</h1>"); //彭于晏
</script>

</body>

2、同时声明变量并赋值：这种方式简洁易懂，建议使用这种方法。

<body>

<script>
	//var：用于声明变量的关键字
	var age=37;    //整数
    
    document.write("<h1>"+typeof( age)+"</h1>"); //number
    document.write("<h1>"+age+"</h1>"); //37
</script>

</body>

3、不声明直接赋值：这种不声明变量直接赋值的方式可以使用，但这种方法很容易出错，也很难查找拍错，不推荐使用。

<body>

<script>
	//var：用于声明变量的关键字
	marriage=false; //布尔值
    
    document.write("<h1>"+typeof(marriage)+"</h1>"); //boolean
    document.write("<h1>"+marriage+"</h1>"); //false

</script>

</body>

4、一次可以定义多个同类型的变量

<body>

<script>
	//var：用于声明变量的关键字
    var width,height=1.82;  //浮点数
 
    document.write("<h1>"+typeof(width)+"</h1>"); // undefined
    document.write("<h1>"+width+"</h1>"); // undefined

    document.write("<h1>"+typeof(height)+"</h1>"); // number
    document.write("<h1>"+height+"</h1>"); // 1.82
</script>

</body>

笔者论坛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 基础总结

JavaScript 基础总结一、引入方式首先说明一点：可以在文档中的任何地方，但一般放在头部和尾部。1、使用script标签：使用script标签时可以在…里面定义，也可以在…里面定义。（1）在<head>...</head>里面定义：<head> <meta charset="UTF-8"> <title>...
复制链接

扫一扫