JS入门学习笔记
JS入门学习笔记
久伴旧伴 发表于1年前
JS入门学习笔记
  • 发表于 1年前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

 

1.JavaScript 是脚本语言.

2.JavaScript:写入 HTML 输出展示

            <script>

            document.write("<h1>这是一个标题的文字</h1>");

            document.write("<p>这是一段段落文字</p>");

            </script>

3.JavaScript:对事件作出反应

            <!-- 按钮的点击事件 —>

            <button type="button" onclick="alert('Welcome!')">按钮名称</button>

4.JavaScript:改变 HTML 内容

            <p id=“demo” class = “yanxue">

            JavaScript 能改变 HTML 元素的内容。{{kkk}}

            </p>

 

            <script>

            function myFunction()

            {

            x=document.getElementById("demo");  // 找到元素

            x.innerHTML="Hello JavaScript!";    // 改变内容

            }

            </script>

 

            <button type="button" onclick="myFunction()">点击这里</button>

 

isNaN(x)不是数字 

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

 

 

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖

 

 

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

调错:

<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>

 

 

 

 

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

 

查找 HTML 元素

  • 通过 id 找到 HTML 元素       var x=document.getElementById("intro");
  • 通过标签名找到 HTML 元素      
     

    本例查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:

    var x=document.getElementById("main”);

    var y=x.getElementsByTagName("p”);--

  • 通过类名找到 HTML 元素

 

 

 

根据id改变了 <img> 元素的 src 属性

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

 

改变 元素的样式

document.getElementById(id).style.property=new style

document.getElementById("p2").style.color=“blue”;

 

 

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

 

 

onchange 事件

onchange 事件常结合对输入字段的验证来使用。当用户改变输入字段的内容时。

<script>

function myFunction()

{

var x=document.getElementById("fname");

x.value=x.value.toUpperCase();

}

</script>

</head>

<body>

 

请输入英文字符:<input type="text" id="fname" onchange="myFunction()”>   输入框

<p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>

 

 

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

 

 

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

 

 

 

创建新的 HTML 元素

 

这段代码创建新的 <p> 元素:

var para=document.createElement("p");

如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:

var node=document.createTextNode("这是新段落。");

然后您必须向 <p> 元素追加这个文本节点:

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素:

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素:

element.appendChild(para);

 

 

 

 

使用函数来构造对象:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!

 

 

 Math 对象

Math.round(4.7)  一个数进行四舍五入

Math.random()   返回一个介于 0 和 1 之间的随机数

Math.floor(Math.random()*11)    floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数

 

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值:

  • 常数
  • 圆周率
  • 2 的平方根
  • 1/2 的平方根
  • 2 的自然对数
  • 10 的自然对数
  • 以 2 为底的 e 的对数
  • 以 10 为底的 e 的对数

这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应)

  • Math.E
  • Math.PI
  • Math.SQRT2
  • Math.SQRT1_2
  • Math.LN2
  • Math.LN10
  • Math.LOG2E
  • Math.LOG10E

 

 

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

 

 

  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口的尺寸

 

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度         document.write("可用宽度:" + screen.availWidth);

 

 

location.assign() 方法加载新的文档。

 

<script>

function newDoc()

{

window.location.assign("http://www.w3school.com.cn")

}

</script>

 

 

Window History Back

history.back() 方法加载历史列表中的前一个 URL。

<script>
function goBack()
  {
  window.history.back()
  }
</script>
 

警告框:alert("文本”)

确认框:confirm("文本”)

提示框:prompt("文本","默认值")

 

计时事件:

setTimeout()      未来的某时执行代码

clearTimeout()   取消setTimeout()

t=setTimeout("timedCount()",1000)   clearTimeout(t)

 

 


 

标签: JavaScript Options
共有 人打赏支持
粉丝 5
博文 19
码字总数 6522
×
久伴旧伴
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: