<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8"/>
<title> Exercise 1</title>
<style>
body {
background-image: url("http://www.millionglitters.com/background/thumb/nice/nice-background-pattern-176.gif");
}
label { display : inline-block;
width :140px;
text-align:left;
padding-top:10px;
}
</style>
<script>
function con(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var res = str1.concat(" "+str2);
alert(res);
}
function sub(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var res1 = str1.substr(1,4);
var res2 = str2.substr(1,4);
alert(res1+" "+res2);
}
function last(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var str3=document.getElementById("str3").value;
var res = str1.concat(" "+str2);
var n=res.lastIndexOf(str3);
alert(n);
}
function lower(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var res = str1.concat(" "+str2);
var res2=res.toLowerCase();
alert(res2);
}
function upper(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var res = str1.concat(" "+str2);
var res2=res.toUpperCase();
alert(res2);
}
function match(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var str4=document.getElementById("str4").value;
var res = str1.concat(" "+str2);
var res2=res.match(str4);
alert(res2);
}
</script>
</head>
<body>
<h1>String processing Based on methods</h1>
<p><b>concat()</b>
used to join two or more strings.This method does not change
the existing strings, but returns a new string containing the text
of the joined strings.</p>
<p><b>substr()</b>
extracts parts of a string, beginning at the character at the
specified position, and returns the specified number of characters.</p>
<p><b>lastIndexOf()</b>
method returns the position of the last occurrence of a specified
value in a string. This method is case sensitive</p>
<p><b>toLowerCase()</b>
method converts a string to lowercase letters.</p>
<p><b>toUpperCase()</b>
method converts a string to uppercase letters.</p>
<p><b>match()</b>
searches a string for a match against a regular expression, and returns
the matches, as an Array object.</p>
<form>
<fieldset>
<legend><i>Input String</i></legend>
<label for ="str1">Input first Sentence</label>
<input type="text" id="str1" size="25" required><br />
<label for ="str2">Input second Sentence</label>
<input type="text" id="str2" size="25" required><br />
<p><b>The input field below is use for CERTAIN method only</b></p>
<label for ="str3">Choose from sentence a last word</label>
<input type="text" id="str3" size="25" required
placeholder="for lastIndexOf()"><br />
<label for ="str4">Choose a regular expression</label>
<input type="text" id="str4" size="25" required
placeholder="for match()"><br />
<label for ="str5">A word to replace/ Where</label>
<input type="text" id="str5" size="25" required
placeholder="Replace Word, replace()">
<input type="text" id="str6" size="25" required
placeholder="What word to replace, replace()"><br /><br />
<button type="button" onclick="con()">concat()</button>
<button type="button" onclick="sub()">substr()</button>
<button type="button" onclick="last()">lastIndexOf()</button>
<button type="button" onclick="lower()">toLowerCase()</button>
<button type="button" onclick="upper()">toUpperCase()</button>
<button type="button" onclick="match()">match()</button>
<button type="button" onclick="replace()">replace()</button>
<button type="button" onclick="split()">split()</button>
<button type="button" onclick="charCodeAt()">charCodeAt()</button>
<button type="button" onclick="slice()">slice()</button>
</fieldset>
</form>
</body>
</html>
我打算编写上面所有JavaScript方法的代码。编写这样的代码是一种很好的行为吗？我在想为什么不把所有方法放在一个函数中。这可能吗？
只是问......我是初学者。谢谢你的帮助