JavaScript简介笔记

最新推荐文章于 2024-03-16 13:21:00 发布

vanliujian

最新推荐文章于 2024-03-16 13:21:00 发布

阅读量259

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/vanliujian/article/details/105616942

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1、JavaScript是什么？

它是一种网页编程语言，主要用于HTML和CSS构建的网站中。并且它还可以使网页呈现动态效果。js语言都写在<script></script>标签之间.

2、JS怎么放入HTML中

①直接写入

<script type="text/javascript"></script>
表示在<script>标签中存放的是text文本类型，里面的text存放的是Javascript语言。

②通过引用

JS同CSS一样也可以写在外部文件，然后通过标签引用进来。这个外部文件是以.js结尾。引用进来的时候这样引用：

<script src="js的文件名.js"></script>

JS的位置可以是任意的，可以在head中也可以在body中，具体实现看想怎么执行了

3、JavaScript的注释

单行注释：//开头
多行注释：/*开头 */结尾

4、变量的使用

变量需要先定义再赋值，也可以定义的同时赋值。

5、if else语句

6、函数

定义一个函数：
语法：

function 函数名()
{
     函数代码;
}

<input type="button"  value="点击我" onclick="函数()" />

button是按钮，onclick是点击事件

7、输出内容

document.write()
可以输出字符串，输出变量，输出多个内容时可以用加号连接。
也可以输出HTML标签，输出标签的时候用引号，比如document.write(“HelloWorld” + “<br />”);
就会在输出HelloWorld后再换行。

8、对话框

alert 消息对话框

包含一个确定按钮。
我们在访问网站的时候，遇见过突然跳出的窗口，上面写着一段信息，如果我们不点确定的话，就不能在这个网页上做一些操作。这个窗口就是通过alert来实现的。

语法：
alert(字符串或变量)；

confirm 消息对话框

包含一个确定按钮和一个取消按钮
语法:
confirm(str);

注意：confirm返回的是一个Boolean值，true or false
按确定返回true，取消返回false。
var message = confirm(“你是女士吗？”);
如果点击确定那么message为true，点击取消那么message为false。

prompt消息对话框

这个对话框会有文本框出现
语法:

prompt(str1, str2);

str1为显示的文字。str2为文本框中输入的数。可以赋默认值，也可以不赋值str2，留着给用户输入。当然所谓的赋默认值，也是在用户界面显示时，有默认值在上面，用户若想使用其它值，也可以更改。

9、打开新窗口

语法：

window.open([URL], [窗口名称], [参数字符串]);

open里面有如下参数：
;

代码举例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
  function Wopen(){
      window.open("http://www.baidu.com",'_blank','height=400,width=600,top=100px,left=0')
  } 
</script>
</head>
<body>
    <input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!"  />
</body>
</html>

运行结果可见新打开的网页在浏览器的位置：
;

10、关闭窗口

用法：

window.close(); //关闭本窗口
窗口对象.close(); //关闭指定的窗口
var medium = window.open(“http://www.baidu.com”); //打开一窗口
medium.close(); //关闭某一指定窗口，在这里就是关闭medium所在的窗口

11、通过ID获取修改元素

语法：

document.getElementById(“ID名称”);

代码举例：

<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
  var mychar= document.getElementById("con");
  document.write("值:" + mychar.innerHTML); //输出获取的P标签。 
</script>
</body>

代码输出结果为：

JavaScript
值:JavaScript

修改元素：
mychar.innerHTML=“修改过后的值是我”;
这时再输出的结果就被修改了。

注意事项：
1、document.getElementById(“id名称”); //这个加色的是i的大写I，不是L。
2、输出的时候要用点innerHTML来输出。

12、改变HTML样式

举个例子这块就懂了：

未修改的输出：
下载失败 ;

修改后的代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
<style>
    #p1 {
    color:red;
    font-size:20px;
    }
    .h {
        color:green;
    }
</style>
</head>
<body>
    <h class="h">草原三剑客</h>
    <p id="p1">剑客一：喜羊羊</p>
    <p>剑客二：沸羊羊</p>
    <p>剑客三：懒羊羊</p>
    <script type="text/javascript">
        var p2 = document.getElementById("p1");    //获取ID
        p2.style.backgroundColor = "blue";              //修改其背景颜色
        p2.style.fontSize="30px";                  //修改字体大小
    </script>
</body>
</html>

输出结果：

;

注意：修改字体大小的时候要加引号，这块经常忘记。

13、display属性

在网页中我们可以点击按钮来隐藏和显示某部分内容，这个隐藏的功能就是用display来弄的。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  {  
		var mychar = document.getElementById("con");
        mychar.style.display="none";
		}
		function showtext()  {  
		var mychar = document.getElementById("con").style.display="block";
		}
    </script> 
</head> 
<body>  
    <h1>海贼王人物</h1>  
    <p id="con">路飞、索隆、乔巴、山治、乌索普、罗宾、娜美、弗朗奇、布鲁克</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    </form>
</body>
</html>

输出结果：
点击隐藏内容时：

下载失败 ;

点击显示内容时：
下载失败 ;

14、className属性

用来获取元素的class属性。
为网页指定一个css属性，来更改其格式。
代码举例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{
		border:1px solid #eee;
		width:240px;
		height:50px;
		background:#ccc;
		color:red;
    }
	.two{
		border:1px solid #ccc;
		width:240px;
		height:50px;
		background:#9CF;
		color:blue;
	}
	</style>
</head>
<body>
    <p id="p1" >路飞、索隆、乔巴、山治、乌索普、罗宾、娜美、弗朗奇、布鲁克</p>
    <input type="button" value="添加样式" onclick="add()"/>
	<p id="p2" class="one">路飞、索隆、乔巴、山治、乌索普、罗宾、娜美、弗朗奇、布鲁克</p>
    <input type="button" value="更改外观" onclick="modify()"/>

	<script type="text/javascript">
	   function add(){
	      var p1 = document.getElementById("p1");
	      p1.className="one";
	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
	      p2.className="two";
	   }
	</script>
</body>
</html>

输出结果不好拍出来：可以复制一下新建一个文本文档试试。

补充：txt.removeAttribute(“style”);取消Javascript对txt这个对象的所有设置。