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属性,用来定位输出内容的位置,实现通信。