您的位置: 首页  >  文章  >  JavaScript -- API学习（一）

JavaScript -- API学习（一）

分类: 文章 • 2024-10-18 14:10:16

       之前我们专业进行实习的时候，接触过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>

效果：

JavaScript -- API学习（一）   JavaScript -- API学习（一）

2.console.log()    打印日志

<script>
            console.log(8 + 6);

</script>

 

 

 

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

JavaScript -- API学习（一）

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

①加载时追加内容

<script>
            document.write("你说什么啊");
</script>

 

 

 

效果：

JavaScript -- API学习（一）

②页面加载完成之后，执行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>

 

效果：

点击之前 JavaScript -- API学习（一）                                点击之后 JavaScript -- API学习（一）

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>

效果：

点击之前  JavaScript -- API学习（一）                              点击之后 JavaScript -- API学习（一）

注意：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>

运行结果：

JavaScript -- API学习（一）

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>

结果:

JavaScript -- API学习（一）

8.Object

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

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

结果:

JavaScript -- API学习（一）

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函数内部变量访问顺序：

                            JavaScript -- API学习（一）

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

                            JavaScript -- API学习（一）

⑥变量的生命周期

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

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

 

五、JavaScript事件

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

JavaScript -- API学习（一）

更多事件

 

六、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.一些转义字符

    JavaScript -- API学习（一）

4.属性

     JavaScript -- API学习（一）

5.方法

    JavaScript -- API学习（一）

   更多

七、比较

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

相关推荐