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