javascript第一节:基本语法和从网页取值和向网页传值

1,javascript的基本语法-js函数和调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<body>

<script >
 function checkStu() { //写出对应的函数,函数名必须和onclick里面一致,实现通信
 alert ("欢迎您,小狮子");
 }
 
 </script>
 
 
 <input type="text">
 <input type="button" value="登录" onclick="checkStu()"><!--通过onclick属性调用函数-->


</body>
</html>

</body>
</html>

上述代码里面的基本知识点:

1),html是静态网页,静态语言,通过嵌入脚本实现动态变化,如传值。html里面嵌入js脚本是肉夹馍的方式。

2),input里面通过onclick属性调用函数。

3),script里面通过写函数function实现对onclick调用函数的回应和通信。

第一,函数名称必须和onclick里面一致,实现通信。

第二,函数名称后面必须有(),即使是空值也必须写,否则出错。

第三,{}里面写入具体的内容。

4),alert ("欢迎您,小狮子");这一句里面:

第一,alert是实现弹窗功能,同时也是js里进行代码调试最有效的工具,如同java里面的print功能一样。

第二,"欢迎您,小狮子"是常量输出,是字符串。

第三,语句结束,要写英文的分号。如果是中文,则会出错。

2,javascript获取网页内容或者输入内容并弹窗展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<body>
<script >
 function checkStu() {
 var a="我是一个常量字符串";
a=document.getElementById("in001").value;//获取输入框输入内容,赋值给a
 alert ("欢迎您,小狮子"+a);
 }
</script>  
 
 <input type="text" id="in001"><!--增加地址说明,用于通信-->
 <input type="button" value="登录" onclick="checkStu()">

</body>
</html>

上面这段代码在小节1的代码基础上增加了两行,实现了获取输入框内容并在弹窗中进行展示的功能。要点如下:

1)在input标签里面增加了一个属性,id="in001",用来标识位置,实现和js代码里面的通信。如同身份证号码,唯一确定。

2)var a="我是一个常量字符串";变量,常量,赋值和引用

第一,var a="我是一个常量字符串";var是用来新建一个变量,a是变量名,=是对变量进行赋值。

第二,alert ("欢迎您,小狮子"+a);里面是混合了字符串常量和变量。变量要用+引用。

3)a=document.getElementById("in001").value;

其功能是用来获取输入框输入内容,是用来获取指定位置的value值。这个位置就是id为in001。

3,将输入框获取的内容输出到网页上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<body>
<script >
 function checkStu() {
 var a=document.getElementById("in001").value;
 alert ("欢迎您,小狮子"+a);
 document.getElementById("out001").innerHTML="我"+a+"终于来了";
 }
</script>  
 <p id="out001">把输入的内容输出到这里,我是一张屏幕</p>
 <input type="text" id="in001">
 <input type="button" value="登录" onclick="checkStu()">

</body>
</html>

上面这段代码在第2节的基础上又增加了两行,一行是js决定向网页输出内容,一行是接收输出的内容。要点如下:

1)document.getElementById("out001").innerHTML="我"+a+"终于来了";

第一,document.getElementById("out001").innerHTML=,向指定位置写入内容。

第二,指定的位置是out001。通过id唯一确认,实现通信。

第三,写入的内容是字符串和变量的混合。

2)加了一个p标签,里面写了id属性,用来定位输出内容的位置,实现通信。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: