JavaScript -- API学习（一）

最新推荐文章于 2023-04-15 16:12:12 发布

坤少的IT之路

最新推荐文章于 2023-04-15 16:12:12 发布

阅读量505

点赞数 1

分类专栏： JavaScript 文章标签： Web JavaScript

本文链接：https://blog.csdn.net/qq_39456689/article/details/89020534

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

之前我们专业进行实习的时候，接触过Javascript，也有过一定的了解。但是也就算是入门10%，要想写出好的Web还是很困难的，所以今天开始，进行我Javascript之路的学习。有的朋友有可能会认为这么简单也要记载嘛？其实这个博客嘛，主要是为自己查阅方便，第二才是供外人参考。当然，我得文笔不行，写着写着肯定会变好的，对不？好了废话不多说，来增强自己的人生价值吧！！！

一、JavaScript在html中的用法

1.可以放到<head>或者<body>，当然也可以两者都放。

2.html中JavaScript使用<script></script>来做容器

3.页面加载时调用js <script> js代码 </script>

4.需要时候加载调用js <script> function(){ js代码 } </script>

二、JavaScript输出

使用 window.alert() 弹出警告框。 可用于测试，调试使用
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台. 可用于测试，调试使用

1.window.alert() 也可以使用 alert()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        //按照加载顺序执行
        <script>
            window.alert("欢迎学习Javascript");
            alert("欢迎学习Javascript1");
        </script>
    </head>
    <body>
    </body>
</html>

效果：

2.console.log() 打印日志

</script>

效果：点击F12出现控制台，下面有打印的日志。所以一般日志是用来调试和测试使用的

3.document.write() 在页面上写内容，将会转成html的形式

①加载时追加内容

效果：

②页面加载完成之后，执行document.write()会覆盖之前加载的所有内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function dis(){
                document.write("替换所有内容");
            }
        </script>
    </head>
    <body>
        这些内容即将消失
        <button onclick="dis()">消失</button>
    </body>
</html>

效果：

点击之前 点击之后

4.innerHTML() 替换之前的文本内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function dis(){
                var dis=document.getElementById("dis");
                dis.innerHTML = "替换之前消失的内容";
            }
        </script>
    </head>
    <body>
        <p id="dis">这些内容即将消失</p>
        <button onclick="dis()">消失</button>
    </body>
</html>

效果：

点击之前点击之后

注意：innerHTML和document.write()的区别，第一个是替换文本，第二个是替换所有。

三、JavaScript语句

1.JavaScript是一种发给浏览器读取的命令，这些命令来告诉浏览器要做什么事情

2.JavaScript中使用 ' ；'来进行每一个句子的分割

3.JavaScript中的代码是按照顺序进行执行的

4.JavaScript中不会加载多余的空格，所以可以使用空格来是我们的代码更加漂亮

5.JavaScript中对大小写非常敏感，建议使用驼峰形式命名

四、JavaScript注释

1.单行注释 //

2.多行注释 /* */

五、JavaScript变量

1.使用var 来声明变量 ,并且只有这个关键词能定义变量，能定义所有类型的变量

var num = 12;
var str = '坤少';

2.一个var可以定义多个变量

//一行定义多个变量
var num=12,str='坤少';

//多行定义
var num=12,
    str='坤少';

3.如果不对变量赋值，那么调用之后的结果是 undefined

六、JavaScript的数据类型

1.数据类型

基础数据类型：String(字符串) Number(数字) Boolean(布尔) NULL(空) UndeFined(未定义) Symbol(独一无二)

引用数据类型：Object(对象) Array(数组) Function(函数)

2.JavaScript拥有动态的数据类型

var可以充当任何变量

<script>
	var a = 12;
	var a = '1ss';
	var a = true;
	alert(a);
</script>

最终结果是:a=true ,这种形式在Java中是报错的

3.String (可以使用单引号或者双引号进行引用)

var str = '坤少单引号';
var str1 = "坤少双引号";

4.Number (可以放整数或者小数)

<script>
	var a = 12;
	var b = 12.6;
	alert(a + b);
</script>

运行结果：

5.Boolean

var a = true;
var b = false;

6.NULL (赋值为null，可以只用null来清空容器或者变量)

<script>
	var a = 12;
	a = null;
	alert(a);
</script>

结果：null

7.undefined (定义一个变量没有赋值)

<script>
	var a;
	alert(a);
</script>

结果:

8.Object

注意：创建对象的时候可以换行写，也可以不换行写

<script>
	var object = {"name":"坤少","age":23};
	var object1 = {
	     "name":"坤少",
	     "age":23,
	   };
	alert(JSON.stringify(object)  +  JSON.stringify(object1));
</script>

结果:

9.Array

<script>
	var array = new Array();
	array.push("0");
	array.push("1");
	array.push("2");
	alert(array);
			
	var array1 = [];
	array1[0] = 0;
	array1[1] = 1;
	array1[2] = 2;
	alert(array1);
</script>

10.Function 函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//带返回值  参数
			function add(a,b){
				return a + b;
			}
			//不带返回值
			function sub(){
				alert("已经调用sub()方法");
			}
		</script>
	</head>
	<body>
		<button onclick="add(1,2)">add</button>
		<button onclick="sub()">sub</button>
	</body>
</html>

①局部变量声明在方法中的变量

②全局变量声明在方法外的变量

③未声明变量没有加var的变量

④js函数内部变量访问顺序：

⑤js函数外部变量访问顺序：

⑥变量的生命周期

局部变量：调用函数时初始化，调用之后销毁

全局变量：页面渲染时初始化，页面关闭摧毁

五、JavaScript事件

没有必要记住太多，写着写着就记住了。

更多事件

六、JavaScript字符串

1.字符串的创建方式

①var str = "kkk" 或者 'kkk';

②var str = new String("kkk"); 不推荐这种方式，也许和Java一样的原理吧！

2.字符串添加引号

①var str = "kkk 'nininini' " 双引号套单引号

②var str = 'kkk "nininini" ' 单引号套双引号

③var str = ' kkk \'ninini\' ' 使用转义

3.一些转义字符

4.属性

5.方法

七、比较

1.恒等于 === 类型和值都一样的时候才true

2.等于 == Number和String 值对应就true

八、条件语句和 Java中一样

1.if

2.if--else

3.if--else if--else

4.switch

switch(b){
case '':句子;
    break;
case '':句子;
    break;
case '':句子;
    break;
default:句子;
}

九、循环语句 Java中都有，没啥区别

1.for

2.while

3.do -- while

4.break和continue的区别

十、typeof null undefined

1.typeof 用来测试变量的类型

<script>
	var str = '111';
	var num = 111;
	var boo = true;
	var nu = null;
	var unde = undefined;           //undefined既是值也是类型
	var object = {};                //值为null 和 引用类型的类型都是Object
	var array = new Array();
	alert(
		typeof str + "\n" +  
		typeof num + "\n" +  
		typeof boo + "\n" +  
		typeof nu + "\n" +  
		typeof unde + "\n" +  
		typeof object + "\n" +  
		typeof array
	)
</script>

2.null

null的类型是Object

3.undefined

undefined的类型是undefined，但是值是null

坤少的IT之路

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript -- API学习（一）

之前我们专业进行实习的时候，接触过Javascript，也有过一定的了解。但是也就算是入门10%，要想写出好的Web还是很困难的，所以今天开始，进行我Javascript之路的学习。有的朋友有可能会认为这么简单也要记载嘛？其实这个博客嘛，主要是为自己查阅方便，第二才是供外人参考。当然，我得文笔不行，写着写着肯定会变好的，对不？好了废话不多说，来增强自己的人生价值吧！！！一、Jav...
复制链接

扫一扫