JavaScript基础

xiaoxiao2021-02-28  90

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>

  <script>

  function c()

  {

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

  

  }

  

  </script>

  <button onclick="c();"> 点击</button>

  开始就出现的文字

  </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 上面就获得当前对象。

 

转载请注明原文地址: https://www.6miu.com/read-21387.html

最新回复(0)