<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> JASKO 샘플 페이지 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Elbis">
<META NAME="Keywords" CONTENT="JavaScript, 자바스크립트">
</HEAD>
<BODY>
<!------------------------- 팝업 윈도우 열기 ----------------------->
<center>
<H3>새 창 열기</H3>
<FORM>
<input type="button" Value=" 야후! 코리아 " ONCLICK="window.open('http://www.yahoo.co.kr/', 'Sample', 'toolbar=no,location=yes,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=400,height=300')">
</FORM>
<font size=2 color=teal><b>소스코드</b></font><br>
<textarea rows=5 cols=50 style="background-color:#EEEEEE">
<!-- 아래의 방법으로 원하는 위치에 코드를 붙여 넣습니다 -->
<input type="button" Value=" 야후! 코리아 " ONCLICK="window.open('http://www.yahoo.co.kr/', 'Sample', 'toolbar=no,location=yes,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=400,height=300')">
<!-- 옵션중에서 어느 한가지만 지정하면 나머지 옵션들은 전부 no 로 지정됩니다-->
<!-- 예 -->
<input type="button" Value=" 야후! 코리아 " ONCLICK="window.open('http://www.yahoo.co.kr/', 'Sample', 'width=400,height=300')">
</textarea>
<hr>
<!------------------------- 폼 메일 보내기 ----------------------->
<H3>폼을 이용한 메일 보내기</H3>
<script language="JavaScript">
function mailMe( form ) {
// 여기에 체크 코드를 입력합니다
return true;
}
</script>
<form name="testform" method="POST" action="mailto:babo@babo.com?subject='메일제목'" onSubmit="return mailMe( this.form )" enctype="text/plain">
홈페이지 주소:<br>
<input type="text" name="URLbox" value="http://" size=50><br>
내용을 입력 하세요:<br></font>
<input type="text" name="titlebox" value="" size=50>
</form>
<form name="testform" method="POST" action="mailto:babo@babo.com?subject='메일제목'" onSubmit="return mailMe( this.form )" enctype="text/plain">
<input type="submit" value=" 확인 ">
</form>
<font size=2 color=teal><b>소스코드</b></font><br>
<textarea rows=5 cols=50 style="background-color:#EEEEEE">
<!-- 아래의 방법으로 원하는 위치에 코드를 붙여 넣습니다 -->
<script language="JavaScript">
function mailMe( form ) {
// 여기에 체크 코드를 입력합니다
return true;
}
</script>
<form name="testform" method="POST" action="mailto:babo@babo.com?subject='메일제목'" onSubmit="return mailMe( this.form )" enctype="text/plain">
홈페이지 주소:<br>
<input type="text" name="URLbox" value="http://" size=50><br>
내용을 입력 하세요:<br></font>
<input type="text" name="titlebox" value="" size=50>
</form>
<form name="testform" method="POST" action="mailto:babo@babo.com?subject='메일제목'" onSubmit="return mailMe( this.form )" enctype="text/plain">
<input type="submit" value=" 확인 ">
</form>
</textarea>
<!------------------------- 링크 버튼 만들기 ----------------------->
<hr>
<H3>링크버튼 만들기</H3>
<form>
<INPUT TYPE="button" VALUE="야후! 코리아" onClick="parent.location='http://www.yahoo.co.kr'"></form>
<font size=2 color=teal><b>소스코드</b></font><br>
<textarea rows=5 cols=50 style="background-color:#EEEEEE">
<!-- 아래의 방법으로 원하는 위치에 코드를 붙여 넣습니다 -->
<INPUT TYPE="button" VALUE="야후! 코리아" onClick="parent.location='http://www.yahoo.co.kr'">
</textarea>
<hr>
<!------------------------- 프레임간 링크 버튼 ----------------------->
<H3>프레임간 링크버튼 만들기</H3>
<form>
<INPUT TYPE="button" VALUE="야후! 코리아" onClick="parent.main.location='http://www.yajoo.co.kr'"></form>
<FONT SIZE="2" COLOR="blue">이 스크립트는 프레임이 없는 현재 상태에서는 에러가 납니다</FONT>
<br>
<font size=2 color=teal><b>소스코드</b></font><br>
<textarea rows=5 cols=50 style="background-color:#EEEEEE">
<!-- 아래의 방법으로 원하는 위치에 코드를 붙여 넣습니다 -->
<INPUT TYPE="button" VALUE="야후! 코리아" onClick="parent.main.location='http://www.yajoo.co.kr'">
<!-- 여기서 main 은 보여주고자 하는 프레임명 입니다 -->
</textarea>
<hr>
<!------------------------- 뒤로가기/앞으로가기 ----------------------->
<H3>뒤로가기 / 앞으로 가기</H3>
<SCRIPT LANGUAGE="JavaScript">
<!--
function goHist(a)
{
history.go(a);
}
//-->
</script>
<FORM METHOD="post">
<INPUT TYPE="button" VALUE=" 뒤로가기 " onClick="goHist(-1)">
<INPUT TYPE="button" VALUE="앞으로 가기" onClick="goHist(1)">
</form>
<font size=2 color=teal><b>소스코드</b></font><br>
<textarea rows=5 cols=50 style="background-color:#EEEEEE">
<!-- 아래의 방법으로 원하는 위치에 코드를 붙여 넣습니다 -->
<SCRIPT LANGUAGE="JavaScript">
<!--
function goHist(a)
{
history.go(a);
}
//-->
</script>
<FORM METHOD="post">
<INPUT TYPE="button" VALUE=" 뒤로가기 " onClick="goHist(-1)">
<INPUT TYPE="button" VALUE="앞으로 가기" onClick="goHist(1)">
</form>
<!--
2 페이지 앞으로 가려면 goHist(2)
2 페이지 뒤로 가려면 goHist(-2)
-->
</textarea>
<hr>
<!------------------------- 프레임에서 뒤로/앞으로 가기 ----------------------->
<H3>프레임에서 뒤로/앞으로 가기</H3>
<form>
<INPUT TYPE="button" VALUE=" 뒤로가기 " onClick="parent.main.history.back()">
<INPUT TYPE="button" VALUE=" 앞으로 가기 " onClick="parent.main.history.forward()"><BR><BR>
<FONT SIZE="2" COLOR="blue">이 스크립트는 프레임이 없는 현재 상태에서는 에러가 납니다</FONT>
<br>
<font size=2 color=teal><b>소스코드</b></font><br>
<textarea rows=5 cols=50 style="background-color:#EEEEEE">
<!-- 아래의 방법으로 원하는 위치에 코드를 붙여 넣습니다 -->
<INPUT TYPE="button" VALUE=" 뒤로가기 " onClick="parent.main.history.back()">
<INPUT TYPE="button" VALUE=" 앞으로 가기 " onClick="parent.main.history.forward()">
<!--
여기에서 main 은 프레임 이름 입니다
-->
</textarea>
<HR>
<!------------------------- 소스 보기 ----------------------->
<H3>소스 보기</H3>
<FORM>
<INPUT TYPE="BUTTON" VALUE=" 소스 보기 " onClick= 'window.location = "view-source:" + window.location.href'>
</form>
<font size=2 color=teal><b>소스코드</b></font><br>
<textarea rows=5 cols=50 style="background-color:#EEEEEE">
<!-- 아래의 방법으로 원하는 위치에 코드를 붙여 넣습니다 -->
<INPUT TYPE="BUTTON" VALUE=" 소스 보기 " onClick= 'window.location = "view-source:" + window.location.href'>
</textarea>
<HR>
<!------------------------- 프레임 소스 보기 ----------------------->
<H3>프레임 소스 보기</H3>
<FORM>
<INPUT TYPE="BUTTON" VALUE=" 소스보기 " onClick= 'parent.menu.location = "view-source:" + parent.menu.location'>
</form>
<FONT SIZE="2" COLOR="blue">이 스크립트는 프레임이 없는 현재 상태에서는 에러가 납니다</FONT>
<br>
<font size=2 color=teal><b>소스코드</b></font><br>
<textarea rows=5 cols=50 style="background-color:#EEEEEE">
<!-- 아래의 방법으로 원하는 위치에 코드를 붙여 넣습니다 -->
<INPUT TYPE="BUTTON" VALUE=" 소스보기 " onClick= 'parent.menu.location = "view-source:" + parent.menu.location'>
<!--
여기에서 menu 는 프레임 이름 입니다
-->
</textarea>
<hr>
<!------------------------- 새로고침 --------------------------------->
<H3>페이지 새로고침</H3>
<form>
<INPUT TYPE="button" VALUE=" 새로고침 " onClick='parent.location="javascript:location.reload()"'>
</form>
<font size=2 color=teal><b>소스코드</b></font><br>
<textarea rows=5 cols=50 style="background-color:#EEEEEE">
<!-- 아래의 방법으로 원하는 위치에 코드를 붙여 넣습니다 -->
<INPUT TYPE="button" VALUE=" 새로고침 " onClick='parent.location="javascript:location.reload()"'>
</textarea>
<HR>
<!------------------------- 프레임 새로 고침 ----------------------->
<H3>프레임 새로고침</H3>
<form>
<INPUT TYPE="button" VALUE=" 프레임 새로고침 " onClick='parent.main.location="javascript:location.reload()"'>
</form>
<FONT SIZE="2" COLOR="blue">이 스크립트는 프레임이 없는 현재 상태에서는 에러가 납니다</FONT>
<br>
<font size=2 color=teal><b>소스코드</b></font><br>
<textarea rows=5 cols=50 style="background-color:#EEEEEE">
<!-- 아래의 방법으로 원하는 위치에 코드를 붙여 넣습니다 -->
<INPUT TYPE="button" VALUE=" 프레임 새로고침 " onClick='parent.main.location="javascript:location.reload()"'>
<!--
여기에서 main 은 프레임 이름 입니다
-->
</textarea>
</center>
</BODY>
</HTML>
//===================================
// Email Check Function
//===================================
function Chk_Email(type) {
var obj_email = document.form.email;
var struserid = document.form.userid;
var mailcheck = document.form.mailcheck;
var tail
if(mailcheck.checked){
tail = "@kma.or.kr";
if(struserid.value != ""){
obj_email.value = struserid.value + tail;
}else{
alert('아이디를 입력해주세요');
struserid.focus();
mailcheck.checked = false;
return false;
}
}
else{
obj_email.value = "";
}
return true;
}
// Email Check Function
//===================================
function Chk_Email(type) {
var obj_email = document.form.email;
var struserid = document.form.userid;
var mailcheck = document.form.mailcheck;
var tail
if(mailcheck.checked){
tail = "@kma.or.kr";
if(struserid.value != ""){
obj_email.value = struserid.value + tail;
}else{
alert('아이디를 입력해주세요');
struserid.focus();
mailcheck.checked = false;
return false;
}
}
else{
obj_email.value = "";
}
return true;
}
로딩이 길어지는 문서에
페이지가 다 뜨기전에 '로딩중' 이라는 글씨를 나오게 합니다.
헤드부분에
<script language=javascript>
n = document.layers
ie = document.all
function hide() {
if (ie || n) {
if (n) document.Load.visibility = "hidden"
else Load.style.visibility = "hidden"
}
}
</script>
<body>에
<body text=black bgcolor=white onload="hide()">
<script language=javascript>
if(ie || n) document.write('<div id="Load" style="position:absolute;width:100%;height:100%;top:0;left:0;background-color:#ffffff;z-index:5">페이지 로딩중 보여줄 내용 (플래시도 됩니다.)</div>')
</script>
페이지가 다 뜨기전에 '로딩중' 이라는 글씨를 나오게 합니다.
헤드부분에
<script language=javascript>
n = document.layers
ie = document.all
function hide() {
if (ie || n) {
if (n) document.Load.visibility = "hidden"
else Load.style.visibility = "hidden"
}
}
</script>
<body>에
<body text=black bgcolor=white onload="hide()">
<script language=javascript>
if(ie || n) document.write('<div id="Load" style="position:absolute;width:100%;height:100%;top:0;left:0;background-color:#ffffff;z-index:5">페이지 로딩중 보여줄 내용 (플래시도 됩니다.)</div>')
</script>
| http://msdn.microsoft.com/archive/default.asp?url=/archive/en-us/samples/internet/imedia/netshow/advancedbuttons/default.asp 재생, 중지, 소리 끄기 등 버튼에 쓰는 javascript 함수가 있습니다. Windows Media Advanced Buttons | |||
 |
 |
||
Description
Goal: Incorporate buttons in a Web page that control a variety of features of the Windows® Media Player in both Microsoft® Internet Explorer and Netscape Navigator® .This sample describes how to incorporate advanced buttons for the Windows Media Player into a Web page. These buttons will work in any browser that supports the Windows Media Player Plug-in and JavaScript.
Since Internet Explorer utilizes the ActiveX model for incorporating components into HTML pages and Navigator uses its own plug-in architecture, we must write our code in a way that will work in both environments. The ActiveX model allows properties, methods, and events to be accessed directly through the Document Object Model (DOM -- a fancy term used to describe how elements on a Web page are addressed). The plug-in model only allows for methods to be passed directly to the browser. As such, to write code for both browsers, the code needs to perform a browser check (sometimes called a browser sniff) and run browser-specific code.
More Details
The Windows Media Player has about one hundred properties and over 20 methods. The Media Player methods (Play, Pause, Stop, etc) will work with both the ActiveX control and the plug-in as they stand. Accessing and modifying the properties of the Media Player, however, requires somewhat different scripting syntax between the ActiveX control and the plug-in. For a given property, such as the read-write "FileName" property, plug-in code must access the property using the SetpropertyName and GetpropertyName methods.The statement
To get information about a plug-in property, the property must be retrieved by invoking a GetpropertyName Method. For example, the statement
More examples follow.
Code to Include
We'll start with our generic cross-browser code embedding code. This code will instantiate the Media Player ActiveX control for browsers which support ActiveX, and the Media Player plug-in for browsers that don't:
<OBJECT ID="MediaPlayer1" width=160 height=112
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase=
"http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft® Windows® Media Player components..."
type="application/x-oleobject">
<PARAM NAME="FileName" VALUE="mms://windowsmediaserver/path/your-file.asf">
<PARAM NAME="ShowControls" VALUE="0">
<EMBED type="application/x-mplayer2"
pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"
SRC="mms://windowsmediaserver/path/your-file.asf"
name="MediaPlayer1"
width=160
height=112
ShowControls=0>
</EMBED>
</OBJECT>
Next, we'll define a form and some buttons:
<FORM NAME="myButtons"> <INPUT NAME="btnPlay" TYPE="Button" VALUE="Play" onclick="document.MediaPlayer1.Play();"> <INPUT NAME="btnPause" TYPE="Button" VALUE="Pause" onclick="document.MediaPlayer1.Pause();"> <INPUT NAME="btnStop" TYPE="Button" VALUE="Stop" onclick="document.MediaPlayer1.Stop();">
<INPUT NAME="btnShowControls" TYPE="Button" VALUE="Show Controls" onclick="showClick()"> <INPUT NAME="btnHideControls" TYPE="Button" VALUE="Hide Controls" onclick="hideClick()">
<INPUT NAME="btnMute" TYPE="Button" VALUE=" Mute " onclick="muteClick()"> </FORM>
In the code above, all of the buttons make calls through JavaScript. The first three buttons use JavaScript to make calls directly through the Document Object Model (DOM), calling methods of the Media Player.
The rest of the buttons call JavaScript functions, allowing for more advanced scripting, such as accessing Media Player properties for both the ActiveX control and the plug-in.
Now we'll add the JavaScript functions:
<SCRIPT LANGUAGE="JavaScript">
// Browser sniff -- the following code does a very simple browser check and rates the
// browser as either Internet Explorer on a Win32 platform or not, so that we
// know to use the ActiveX model, or the plug-in Model.
var sBrowser = navigator.userAgent;
if ((sBrowser.indexOf("IE") > -1) && (navigator.platform == "Win32"))
{
sBrowser = "IE";
} else {
sBrowser = "nonIE";
}
// end browser sniff
function showClick() // This function is called by the btnShowControls button.
// It sets the ShowControls property of Media Player to true.
{
if (sBrowser == "IE") {
document.MediaPlayer1.ShowControls = true;
} else {
document.MediaPlayer1.SetShowControls(true);
}
}
function hideClick() // This function is called by the btnHideControls button.
// It sets the ShowControls property of Media Player to false.
{
if (sBrowser == "IE") {
document.MediaPlayer1.ShowControls = false;
} else {
document.MediaPlayer1.SetShowControls(false);
}
}
function muteClick() // This function is called by the "Mute" button.
// It toggles the state of the Mute property of the Media Player.
{
var bMuteState;
if (sBrowser == "IE") {
bMuteState = document.MediaPlayer1.Mute;
} else {
bMuteState = document.MediaPlayer1.GetMute();
}
if (bMuteState == true) {
document.myButtons.btnMute.value="Mute";
if (sBrowser == "IE") {
document.MediaPlayer1.Mute = false;
} else {
document.MediaPlayer1.SetMute(false);
}
} else {
document.myButtons.btnMute.value="Un-Mute";
if (sBrowser == "IE") {
document.MediaPlayer1.Mute = true;
} else {
document.MediaPlayer1.SetMute(true);
}
}
}
</SCRIPT>
There are three main parts to this script: The browser sniff, the showClick() and hideClick() functions, and the muteClick() function.
The browser sniff is called immediately, before the page is finished loading. It simply grabs the userAgent property of the navigator object. Each browser has its own userAgent string, which can be used to tell the name and version of the browser. Using the intrinsic indexOf() function, we're determining whether or not this is a Win32 Internet Explorer based browser (which then supports ActiveX controls) or not, and storing that information in a global string variable (sBrowser).
The showClick() and hideClick() functions are called by the btnShow and btnHide buttons. They use the browser sniff information (sBrowser) to set the ShowControls property of the browser for both the plug-in and the ActiveX control.
The muteClick() function is the handler for the btnMute button. This is a more advanced button that toggles the mute property of the Media Player between true and false. First, it retrieves the Mute property of the Media Player, and determines whether the property is set to true or false. Then, based on this information, it toggles the state of the Mute property, i.e. if the Mute property is set to true, the function sets it to false, and vice versa. Also, the function resets the value of the button so that the user can tell what the button actually does.
Browser/Platform Compatibility and other Requirements
This code will work with Internet Explorer 4+, and Netscape Navigator 4+ on platforms that support the Windows Media Player plug-in and ActiveX control.Related Links