JavaScript基础_01

最新推荐文章于 2024-11-03 16:40:52 发布

神秘人998

最新推荐文章于 2024-11-03 16:40:52 发布

阅读量287

点赞数

文章标签： javascript html java java web

本文链接：https://blog.csdn.net/m0_38112363/article/details/74911304

版权

JavaScript

一、JavaScript 脚本语言，弱类型。

二、JavaScript在网页中为位置一般分为俩种：
第一种：

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
第二种：

外部的 JavaScript也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>
<script src="myTest.js"></script>
</body>
</html>

<scripit>

document.write("<h1 style='color:red;font-size:100px;'>提莫长到一米八</h1>");

</script>

这句话直接放在script标签里面，没有放在任何函数里面，所以一开始加载页面就执行。

如果放在函数里面,就需要调用函数来执行，比如:

<body>

function c()

{

document.write("<h1 style='color:red;font-size:100px;'>提莫长到一米八</h1>");

}

</script>

开始就出现的文字

</body>

这里是放在c这个函数里面的，这里在body里面最开始有文字“ 开始就出现的文字”，一进入页面会显示，当点击button按钮才会调用c函数，此时页面只会显示“提莫长到一米八”，所以说您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

三种对话框:

1、警告框

a) alert(“警告警告！！！”);

2、对话框

a) prompt（“请输入密码”，“defaultvalue”）;

3、确认框

a) confirm(“确定删除吗？”);

confirm(“确定删除吗？”)返回值是boolean型.

例如:

var r=confirm(“确定删除吗？”);

If(r==true)

{

alert(“已经删除”);

}else{

alert(“已经取消删除”);

}

DOM(文档对象模型)

常用的几个方法：

1.document.getElementById("id")

<body>
<script>
    function test_id()
    {
	 var email= document.getElementById("email");
		 alert(email.value);
		 alert(email.id);
		 alert(email.type);
		 alert(email.name);
    }
</script>
<input type="text" name="emailName" id="email"/>
</body>


这里就通过document.getElementById("email");取到了文本框的对象，然后用警告框弹出了里面的属性值，注意的是：

 	//第一种
       function testSpan1(span)
  	{
  		 var span= document.getElementById("span");
  		span.style.color="red";
  		span.style.fontSize="150px";
  		 span.innerHTML="提莫长到1米8";
  		 
  	}
             //第二种
  function testSpan2() { var span= document.getElementById("span").innerHTML;
 alert(span); span="改变后的span内容1111"; alert(span); }



<span id="span" style="font-size:50px;color:green;">这里span里面的内容</span>



   注意：这里的第二种写法是错误的，这里的span获得的是或的是span标签里面的值，是一个字符串，再次赋值是改变的字符串，对span标签里面的值没有影响.




例：点击换图：
  
 	//第一种
      function changImg()
  	{
  		 var img= document.getElementById("image");
  		 var btn= document.getElementById("btn");
  		 if(img.src.match("bulbon")){
  		 	btn.innerHTML="点击开灯";
  		 	img.src="http://www.w3school.com.cn/i/eg_bulboff.gif";
  		 }else{
  			 btn.innerHTML="点击关灯";
  		 	img.src="http://www.w3school.com.cn/i/eg_bulbon.gif";
  		 }
  		 
  	}
       //第二种
  var i=1; function changImg1(img) { var img= document.getElementById("image"); if(i%2==0){ img.src="http://www.w3school.com.cn/i/eg_bulboff.gif"; }else{ img.src="http://www.w3school.com.cn/i/eg_bulbon.gif";
 } i++; }

这里就是两种方式来点击更换图，第一种里面的match函数是匹配字符串

2、还有一种方法获取对象，通过参数。
      function onchangeValue(obj){
  		obj.value="296224889@qq.com";
  	}

    <input type="email" value="QQ邮箱" οnblur="onchangeValue(this)";/>

这里在input里面调用函数里面参数给的是this 上面就获得当前对象。