初学javascript

初学javascript
JavaScript:
写入 HTML 输出
document.write("<>This is a heading</>");<></>写h1
document.write("<>This is a paragraph</>");<></>写p

<> 与 </> 之间的文本描述网页 <></>写html
<> 与 </> 之间的文本是可见的页面内容 <></>写body
<> 与 </> 之间的文本被显示为标题 <></>写h1
<> 与 </> 之间的文本被显示为段落 <></>写p
document.write()方法;常用来网页向文档中输出内容。

示例:通过document.write()方法,向网页文档中输出了一段文字。

document.write(“我爱学习–喜欢学习,就和大家一起来分享你的学习经验与技巧。。。”);

此外,还可以以另一种方式通过document.write()方法来输出。

document.write() 以变量的方式输出。

首先,var声明一个变量str。

var str=“hello world”;

document.write(str);
其次,可以通过document.write()方法 输出 变量与字符串的组合,通过变量 拼接字符串的方式来达到我们想要输出的效果。

注意:

 拼接字符串,用加号"+";

 字符串用双引号""括起来。

示例:

var str=“hello world” ;

document.write(str+" "+“hello world”);
意思是str加号 "加号"一部分 "hello world"一部分,但是 "加号"放hello world前面

//在浏览器中输出的结果为:hello world hello world

最后,我们还可以通过document.write()方法 来输出html标签:同时也可以将css样式写入到标签中,注意书写格式,及引号之间的转义。

示例:在网页中输出<p>我爱学习 http://www.52aixuexi.com</p>

注:输出html标签;只须将标签写入双引号中。

document.write("<p style='border:1px solid black;width:300px;height:90px;line-height:90px;background:#abcdef;text-align:center;'>我爱学习 http://www.52aixuexi.com</p>");

//输出效果如下:
在这里插入图片描述

JavaScript:对事件作出反应
实例
< type=“button” οnclick=“alert(‘Welcome!’)”>点击这里 </><></>写button
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
onclick 事件只是您即将在本教程中学到的众多事件之一。
onclick 事件会在对象被点击时发生。
请注意, onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。必需。规定该事件发生时执行的 JavaScript。

JavaScript:改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
实例
x=document.getElementById(“demo”) //查找元素
x.innerHTML=“Hello JavaScript”; //改变内容

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>

<script>
function myFunction()
{
x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>

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

</body>
</html>

getElementById()。查找元素

HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。
不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。
在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

x.innerHTML=“Hello JavaScript!”; // 改变内容 x.innerHTML
同理
x.style.color="#ff0000"; // 改变样式 x.style.color

JavaScript:验证输入
JavaScript 常用于验证用户的输入。
实例
if isNaN(x) {alert(“Not Numeric”)};

<input id="demo" type="text">  

type=“text” 定义input属性类型,test属于文本框,submit属于按钮。
id则是内容定义demo元素

<script> 标签
如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:

function函数链接网站
function myFunction()
调用带参数的函数
在调用函数时,可以向其传递值,这些值被称为参数。

这些参数可以在函数中使用。

可以发送任意多的参数,由逗号 (,) 分隔:
myFunction(argument1,argument2)
当声明函数时,把参数作为变量来声明:

<script>
function demo(name,job) {
    alert("Welcome "+name+", the"+job)
}
</script>
<input type="button" value="button" onclick="demo('lily','CEO')">
<input type="button" value="button" onclick="demo('Tom','Builder')">

带有返回值的函数
函数将值返回调用它的地方,通过使用return语句就可以实现。
在使用return语句时,函数会停止执行,并返回指定的值。

function myFunction() {
var x = 5;
return x;
}
函数会返回值5.
注:整个javascript并不会停止执行,仅仅是函数。javascript将继续执行代码,从调用函数的地方。

函数调用将被返回值取代:

var myVar = myFunction();
myVar变量的值是5,也就是函数"myFunction()"所返回的值。
即使不把它保存为变量,也可以使用返回值:

document.getElementById(“demo”).innerHTML=myFunction();
"demo"元素的innerHTML将成为5,也就是函数“myFunction()”所返回的值。
可以使返回值基于传递到函数中的参数:

<p id="demo"></p>
 
<script>
function myFunction(a,b) {
    return a*b;
}
document.getElementById("demo").innerHTML=myFunction(10,23);
</script>
如果仅仅希望退出函数时,也可以使用return语句。返回值是可选择的:
    function myfunction(a,b) {
        if(a>b){
            return
        }
        x = a+b;
    }

isNaN() 函数用于检查其参数是否是非数字值。
||是且的意思,如果是空且x是非数字,则弹出警告框Not Numeric
如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true。
如果 x 是其他值,则返回 false。
.value 点击

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>

<input id="demo" type="text">

<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
	{
	alert("Not Numeric");
	}
}
</script>

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

</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值