my first javascript

JS实时获取输入框中的值

实时获取input输入框中的值需要oninput和onpropertychange属性来实现。原因是onpropertychange属性为IE专属，而oninput属性支持大部分浏览器包括IE9及以上的版本。
oninput与onpropertychange失效的情况：
　　oninput事件：

1.在脚本中改变value时，不会触发；

2.从浏览器的自动下拉提示中选取时，不会触发。

<!DOCTYPE html>
<html>
<body>
<body>
    <input type="text" id="userdata"  name="test">
    <output type="text" id="user"  name="test">
    <script>
    var data = document.getElementById('userdata');
    if('oninput' in data){ 
            data.addEventListener("input",getWord,false); 
        }else{ 
            data.onpropertychange = getWord; 
        }
        function getWord(){
        document.getElementById("user").innerHTML = data.value;
    }
    </script>

</body>
</html>

JS获取输入字符串并将实现大小写字母切换

js字母大小写转换方法：
1.toLocaleUpperCase()
2.toUpperCase()
3.toLocaleLowerCase()
4.toLowerCase()

下面就这四个实现大小写转换的js函数逐一做简单的分析。
1.toLocaleUpperCase()
将字符串中所有的字母字符都将被转换为大写的，同时适应宿主环境的当前区域设置。

2.toUpperCase()
将字符串中的所有字母都被转化为大写字母。

3.toLocaleLowerCase ()
将字符串所有的字母字符都被转换为小写，同时考虑到宿主环境的当前区域设置。

4.toLowerCase()
将字符串中的字母被转换为小写字母

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>大小写字母转换</title>
</head>
<body>
    <p>大小写字母转换.</p>
    <form id="test-form">
        <input type="text" id="userdata"  name="test">
        <button type="button" onclick="myFunction()">Submit</button>
        <button type="reset">重置</button>
    </form>
    <output type="text" id="user"  name="test">
    <script>
        function myFunction()
        {
          var data = document.getElementById('userdata');
          alert(data.value.toUpperCase()); //弹对话框显示输出值
          document.getElementById("user").innerHTML = data.value.toUpperCase();//直接显示输出值
        }
    </script>
</body>
</html>

JS获取输入字符串并将实现拆分以及合并

知识点:

1.Data=Data.split(“”); //字符分割

2.Data.join(“”); //字符合并

3.charCodeAt方法是返回每一个字符的unicode编码

‘a’.charCodeAt(0) > 96 //小写

‘A’.charCodeAt(0) < 90 //大写

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>大小字母写转换</title>
</head>
<body>
<p>大小写字母转换.</p>
<form id="test-form">
    <input type="text" id="userdata"  name="test">  
    <button type="button" onclick="myFunction()">Submit</button>
    <button type="reset">重置</button>
    <output type="text" id="user"  name="test">
</form>
</body>
<script>
function myFunction()
{

  var data = document.getElementById('userdata');
  var Data=data.value;
  Data=Data.split(""); //字符分割 
  for(var i=0;i<Data.length;i++)
  {
     //循环遍历每一个字符串，
     //if(/[a-z]/.test(Data.substring(i,i+1)))  
     // 正则表达式 /[a-z]/    substring() 方法用于提取字符串中介于两个指定下标之间的字符
     //charCodeAt方法是返回每一个字符的unicode编码，
	if(Data[i].charCodeAt(0) >96)
	{
		Data[i]=Data[i].toUpperCase();
	} 
	else
	{
		Data[i]=Data[i].toLowerCase();
	}
  } 
  	  //alert(Data.join("")); //弹对话框显示输出值
  document.getElementById("user").innerHTML = Data.join("");//直接显示输出值
}
</script>
</html>