Js基础知识-入门
创建脚本块
<script language=”JavaScript”>
JavaScript code goes here
</script>
隐藏脚本代码
<script language=”JavaScript”>
document.write(“Hello”);
</script> 在不支持JavaScript 的浏览器中将不执行相关代码
浏览器不支持的时候显示
<noscript>
Hello to the non-JavaScript browser.
</noscript> 链接外部脚本文件
<script language=”JavaScript”src="/”filename.js"”></script> 输出到浏览器
document.write(“<strong>Hello</strong>”); 定义变量
var myVariable = “Hello Word”; 字符串相加
var myString = “String1”+ “String2”; 字符串搜索(从零开始)
<script language=”JavaScript”>
<!—
var myVariable = “Hellothere”;
var therePlace = myVariable.search(“there”);
document.write(therePlace);
// -->
</script> 字符串替换
thisVar.replace(“Monday”,”Friday”); 格式化字串
<script language=”JavaScript”>
<!--
var myVariable = “Hello there”;
document.write(myVariable.big() + “<br>”);
document.write(myVariable.blink() + “<br>”);
document.write(myVariable.bold() + “<br>”);
document.write(myVariable.fixed() + “<br>”);
document.write(myVariable.fontcolor(“red”)+ “<br>”);
document.write(myVariable.fontsize(“18pt”)+ “<br>”);
document.write(myVariable.italics() + “<br>”);
document.write(myVariable.small() + “<br>”);
document.write(myVariable.strike() + “<br>”);
document.write(myVariable.sub() + “<br>”);
document.write(myVariable.sup() + “<br>”);
document.write(myVariable.toLowerCase() + “<br>”);
document.write(myVariable.toUpperCase() + “<br>”);
var firstString = “My String”;
var finalString = firstString.bold().toLowerCase().fontcolor(“red”);
</script> 创建数组
<script language=”JavaScript”>
<!--
var myArray = new Array();
myArray[] = “First Entry”;
myArray[] = “Second Entry”;
myArray[] = “Third Entry”;
myArray[] = “Fourth Entry”;
myArray[] = “Fifth Entry”;
var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);
// -->
</script> 数组排序
<script language=”JavaScript”>
<!--
var myArray = new Array();
myArray[] = “z”;
myArray[] = “c”;
myArray[] = “d”;
myArray[] = “a”;
myArray[] = “q”;
document.write(myArray.sort());
// -->
</script> 分割字符串
<script language=”JavaScript”>
<!--
var myVariable = “a,b,c,d”;
var stringArray = myVariable.split(“,”);
document.write(stringArray[]);
document.write(stringArray[]);
document.write(stringArray[]);
document.write(stringArray[]);
// -->
</script> 弹出警告信息
<script language=”JavaScript”>
<!--
window.alert(“Hello”);
// -->
</script>
弹出确认框
<script language=”JavaScript”>
<!--
var result = window.confirm(“Click OK to continue”);
// -->
</script> 定义函数
<script language=”JavaScript”>
<!--
function multiple(number1,number2) {
var result = number1 * number2;
return result;
}
// -->
</script> 调用JS函数
<a href=”#”onClick=”function Name()”>Linktext</a>
<a href="/”javascript:functionName"()”>Linktext</a> 在页面加载完成后执行函数
<body onLoad=”functionName();”>
Body of the page
</body> 条件判断
<script>
<!--
var userChoice = window.confirm(“Choose OK or Cancel”);
var result = (userChoice == true) ? “OK”: “Cancel”;
document.write(result);
// -->
</script> 指定次数循环
<script>
<!--
var myArray = new Array();
myArray[] = “Item ”;
myArray[] = “Item ”;
myArray[] = “Item ”;
for (i = ; i < myArray.length; i++)
{
document.write(myArray[i] + “<br>”);
}
// -->
</script> 设定将来执行
<script>
<!--
function hello() {
window.alert(“Hello”);
}
window.setTimeout(“hello()”,);
// -->
</script> 定时执行函数
<script>
<!--
function hello() {
window.alert(“Hello”);
window.setTimeout(“hello()”,);
}
window.setTimeout(“hello()”,);
// -->
</script> 取消定时执行
<script>
<!--
function hello() {
window.alert(“Hello”);
}
var myTimeout = window.setTimeout(“hello()”,);
window.clearTimeout(myTimeout);
// -->
</script> 在页面卸载时候执行函数
<body onUnload=”functionName();”>
Body of the page
</body> :浏览器输出
访问document对象
<script language=”JavaScript”>
var myURL = document.URL;
window.alert(myURL);
</script> 动态输出HTML
<script language=”JavaScript”>
document.write(“<p>Here‟ssome information about this document:</p>”);
document.write(“<ul>”);
document.write(“<li>Referring Document: “+ document.referrer + “</li>”);
document.write(“<li>Domain:“+ document.domain + “</li>”);
document.write(“<li>URL: “+ document.URL + “</li>”);
document.write(“</ul>”);
</script> 输出换行
document.writeln(“<strong>a</strong>”);
document.writeln(“b”); 输出日期
<script language=”JavaScript”>
var thisDate = new Date();
document.write(thisDate.toString());
</script> 指定日期的时区
<script language=”JavaScript”>
var myOffset = -;
var currentDate = new Date();
var userOffset = currentDate.getTimezoneOffset()/;
var timeZoneDifference = userOffset - myOffset;
currentDate.setHours(currentDate.getHours() + timeZoneDifference);
document.write(“The time and date in Central Europe is: “+ currentDate.toLocaleString());
</script> 设置日期输出格式
<script language=”JavaScript”>
var thisDate = new Date();
var thisTimeString = thisDate.getHours() + “:”+ thisDate.getMinutes();
var thisDateString = thisDate.getFullYear() + “/”+ thisDate.getMonth() + “/”+ thisDate.getDate();
document.write(thisTimeString + “on “+ thisDateString);
</script> 读取URL参数
<script language=”JavaScript”>
var urlParts = document.URL.split(“?”);
var parameterParts = urlParts[].split(“&”);
for (i = ; i < parameterParts.length; i++) {
var pairParts = parameterParts[i].split(“=”);
var pairName = pairParts[];
var pairValue = pairParts[];
document.write(pairName + “:“+pairValue );
}
</script> 打开一个新的document对象
<script language=”JavaScript”>
function newDocument() {
document.open();
document.write(“<p>This is a New Document.</p>”);
document.close();
}
</script> 页面跳转
<script language=”JavaScript”>
window.location = “http://www.liu21st.com/”;
</script> 添加网页加载进度窗口
<html>
<head>
<script language='javaScript'>
var placeHolder = indow.open('holder.html','placeholder','width=200,height=200');
</script>
<title>The Main Page</title>
</head>
<body onLoad='placeHolder.close()'>
<p>This is the main page</p>
</body>
</html> :图像 读取图像属性
<img src="/”image1.jpg"”name=”myImage”>
<a href=”#”onClick=”window.alert(document.myImage.width)”>Width</a> 动态加载图像
<script language=”JavaScript”>
myImage = new Image;
myImage.src = “Tellers1.jpg”;
</script> 简单的图像替换
<script language=”JavaScript”>
rollImage = new Image;
rollImage.src = “rollImage1.jpg”;
defaultImage = new Image;
defaultImage.src = “image1.jpg”;
</script>
<a href="/”myUrl"”onMouseOver=”document.myImage.src= rollImage.src;”
onMouseOut=”document.myImage.src= defaultImage.src;”>
<img src="/”image1.jpg"”name=”myImage”width= height=
border=> 随机显示图像
<script language=”JavaScript”>
var imageList = new Array;
imageList[] = “image1.jpg”;
imageList[] = “image2.jpg”;
imageList[] = “image3.jpg”;
imageList[] = “image4.jpg”;
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write(“<imgsrc=”‟+ imageList[imageChoice] + „“>‟);
</script> 函数实现的图像替换
<script language=”JavaScript”>
var source = ;
var replacement = ;
function createRollOver(originalImage,replacementImage) {
var imageArray = new Array;
imageArray[source] = new Image;
imageArray[source].src = originalImage;
imageArray[replacement] = new Image;
imageArray[replacement].src = replacementImage;
return imageArray;
}
var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”);
</script>
<a href=”#”onMouseOver=”document.myImage1.src= rollImage1[replacement].src;”
onMouseOut=”document.myImage1.src= rollImage1[source].src;”>
<img src="/”image1.jpg"”width= name=”myImage1”border=>
</a> 创建幻灯片
<script language=”JavaScript”>
var imageList = new Array;
imageList[] = new Image;
imageList[].src = “image1.jpg”;
imageList[] = new Image;
imageList[].src = “image2.jpg”;
imageList[] = new Image;
imageList[].src = “image3.jpg”;
imageList[] = new Image;
imageList[].src = “image4.jpg”;
function slideShow(imageNumber) {
document.slideShow.src = imageList[imageNumber].src;
imageNumber += ;
if (imageNumber < imageList.length) {
window.setTimeout(“slideShow(“+ imageNumber + “)”,);
}
}
</script>
< /head>
: <body onLoad=”slideShow()”>
<img src="/”image1.jpg"”width= name=”slideShow”> 随机广告图片
<script language=”JavaScript”>
var imageList = new Array;
imageList[] = “image1.jpg”;
imageList[] = “image2.jpg”;
imageList[] = “image3.jpg”;
imageList[] = “image4.jpg”;
var urlList = new Array;
urlList[] = “http://some.host/”;
urlList[] = “http://another.host/”;
urlList[] = “http://somewhere.else/”;
urlList[] = “http://right.here/”;
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write(„<a href=”‟+ urlList[imageChoice] + „“><img src=”‟+ imageList[imageChoice] + „“></a>‟);
</script> JavaScript 就这么回事
4:表单
表单构成
<form method=”post”action=”target.html”name=”thisForm”>
<input type=”text”name=”myText”>
<select name=”mySelect”>
<option value=””>FirstChoice</option>
<option value=””>Second Choice</option>
</select>
<br>
<input type=”submit”value=”Submit Me”>
</form> 访问表单中的文本框内容
<form name=”myForm”>
<input type=”text”name=”myText”>
</form>
<a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a> 动态复制文本框内容
<form name=”myForm”>
Enter some Text: <input type=”text”name=”myText”><br>
Copy Text: <input type=”text”name=”copyText”>
</form>
<a href=”#”onClick=”document.myForm.copyText.value=
document.myForm.myText.value;”>CopyText Field</a> 侦测文本框的变化
<form name=”myForm”>
Enter some Text: <input type=”text”name=”myText”onChange=”alert(this.value);”>
</form> 访问选中的Select
<form name=”myForm”>
<select name=”mySelect”>
<option value=”FirstChoice”></option>
<option value=”SecondChoice”></option>
<option value=”ThirdChoice”></option>
</select>
</form>
<a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a> 动态增加Select项
<form name=”myForm”>
<select name=”mySelect”>
<option value=”FirstChoice”></option>
<option value=”SecondChoice”></option>
</select>
</form>
<script language=”JavaScript”>
document.myForm.mySelect.length++;
document.myForm.mySelect.options[document.myForm.mySelect.length - ].text = “”;
document.myForm.mySelect.options[document.myForm.mySelect.length - ].value = “ThirdChoice”;
</script> 验证表单字段
<script language=”JavaScript”>
function checkField(field) {
if (field.value == “”){
window.alert(“Youmust enter a value in the field”);
field.focus();
}
}
</script>
<form name=”myForm”action=”target.html”>
Text Field: <input type=”text”name=”myField”onBlur=”checkField(this)”>
<br><input type=”submit”>
</form> 验证Select项
function checkList(selection) {
if (selection.length == ) {
window.alert(“You must make a selection from the list.”);
return false;
}
return true;
} 动态改变表单的action
<form name=”myForm”action=”login.html”>
Username: <input type=”text”name=”username”><br>
Password: <input type=”password”name=”password”><br>
<input type=”button”value=”Login”onClick=”this.form.submit();”>
<input type=”button”value=”Register”onClick=”this.form.action=
„register.html‟;
this.form.submit();”>
<input type=”button”value=”Retrieve Password”onClick=”this.form.action= “password.html‟;this.form.submit();”>
</form> 使用图像按钮
<form name=”myForm”action=”login.html”>
Username: <input type=”text”name=”username”><br>
Password: <input type=”password”name=”password”><br>
<input type=”image”src="/”login.gif"”value=”Login”>
</form> 表单数据的加密
<SCRIPT LANGUAGE='JavaScript'>
<!--
function encrypt(item) {
var newItem = ''; for (i=; i < item.length; i++) {
newItem += item.charCodeAt(i) + '.';
}
return newItem;
}
function encryptForm(myForm) {
for (i=; i < myForm.elements.length; i++) {
myForm.elements[i].value = encrypt(myForm.elements[i].value);
}
}
</SCRIPT>
<form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
Enter Some Text: <input type=text name=myField><input type=submit>
: </form>5:窗口和框架 改变浏览器状态栏文字提示
<script language=”JavaScript”>
window.status = “Anew status message”;
</script> 弹出确认提示框
<script language=”JavaScript”>
var userChoice = window.confirm(“Click OK or Cancel”);
if (userChoice) {
document.write(“You chose OK”);
} else {
document.write(“You chose Cancel”);
}
</script> 提示输入
<script language=”JavaScript”>
var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name
Here”);
document.write(“Your Name is “+ userName);
</script> 打开一个新窗口
//打开一个名称为myNewWindow的浏览器新窗口 <script language=”JavaScript”>
window.open(“http://www.liu21st.com/”,”myNewWindow”);
</script> 设置新窗口的大小
<script language=”JavaScript”>
window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300');
</script> 设置新窗口的位置
<script language=”JavaScript”>
window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
</script> 是否显示工具栏和滚动栏
<script language=”JavaScript”>
window.open(“http: 是否可以缩放新窗口的大小
<script language=”JavaScript”>
window.open('http://www.liu21st.com/' , 'myNewWindow', 'resizable=yes' );</script> 加载一个新的文档到当前窗口
<a href='#' onClick='document.location = '125a.html';' >Open New Document</a> 设置页面的滚动位置
<script language=”JavaScript”>
if (document.all) {
//如果是IE浏览器则使用scrollTop属性
document.body.scrollTop = ; }
else {
//如果是NetScape浏览器则使用pageYOffset属性
window.pageYOffset = ;
}</script>
在IE中打开全屏窗口
<a href='#' onClick=”window.open('http://www.juxta.com/','newWindow','fullScreen=yes');”>Open a full-screen window</a> 新窗口和父窗口的操作
<script language=”JavaScript”>
//定义新窗口
var newWindow = window.open(“128a.html”,”newWindow”);
newWindow.close(); //
在父窗口中关闭打开的新窗口
</script>
在新窗口中关闭父窗口
window.opener.close() 往新窗口中写内容
<script language=”JavaScript”>
var newWindow = window.open(“”,”newWindow”);
newWindow.document.open();
newWindow.document.write(“This is a new window”);
newWIndow.document.close();
</script> 加载页面到框架页面
<frameset cols=”%,*”>
<frame name=”frame1”src="/”135a.html"”>
<frame name=”frame2”src="/”about:blank"”>
</frameset>
在frame1中加载frame2中的页面
parent.frame2.document.location = “135b.html”; 在框架页面之间共享脚本
如果在frame1中html文件中有个脚本
function doAlert() {
window.alert(“Frame1 is loaded”);
}
那么在frame2中可以如此调用该方法
<body onLoad=”parent.frame1.doAlert();”>
This is frame .
</body> 数据公用
可以在框架页面定义数据项,使得该数据可以被多个框架中的页面公用
<script language=”JavaScript”>
var persistentVariable = “This is a persistent value”;
</script>
<frameset cols=”%,*”>
<frame name=”frame1”src="/”138a.html"”>
<frame name=”frame2”src="/”138b.html"”>
</frameset>
这样在frame1和frame2中都可以使用变量persistentVariable 框架代码库
根据以上的一些思路,我们可以使用一个隐藏的框架页面来作为整个框架集的代码库
<frameset cols=”,%,*”>
<frame name=”codeFrame”src="/”140code.html"”>
<frame name=”frame1”src="/”140a.html"”>
<frame name=”frame2”src="/”140b.html"”>
</frameset>
加入收藏夹:
<span style="CURSOR: hand" onClick="window.external.addFavorite('http://www.zblgbj.gov.cn','淄博市委老干部局')">
加入收藏
</span>
设为首页:<span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.zblgbj.gov.cn');" style="CURSOR: hand">设为主页</span> 引入样式表(css)的四种方式
一、使用STYLE属性:将STYLE属性直接加在个别的元件标签里。
<元件(标签) STYLE="性质(属性) 设定值1; 性质(属性)
设定值2; ...}
例如:<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>
这种用法的优点
是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。 二、使用STYLE标签:将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css">
<!--
样式规则表
-->
</STYLE>
例如:
<STYLE TYPE="text/css">
<!--
BODY {
color: BLUE;
background: #FFFFCC;
font-size: 9pt}
TD, P {
COLOR: GREEN;
font-size: 9pt}
-->
</STYLE>
通常是将整个的<STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。 三、使用LINK标签:将样式规则写在.css的样式档案中,再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用该样式档案中所制定好的样式了。
通常是将LINK标签写在网页的<head></head>部份之中。
这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。
四、使用@import引入:跟LINK用法很像,但必放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css">
<!--
@import url(
引入的样式表的位址、路径与档名
);
</STYLE>
例如:
<STYLE TYPE="text/css">
@import url(http://yourweb/ example.css);
</STYLE>
要注意的是,行末的分号是绝对不可少的!
Js基础知识-入门的更多相关文章
- js基础知识入门总结
1.第一个js程序 一个项目包括三部分:前端(html.css.js).数据库.后端技术 引入方式:页面中直接写,script标签引入 js事件绑定: <input type="but ...
- Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- Linux基础知识入门
[Linux基础]Linux基础知识入门及常见命令. 前言:最近刚安装了Linux系统, 所以学了一些最基本的操作, 在这里把自己总结的笔记记录在这里. 1,V8:192.168.40.10V1: ...
- 网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
- NodeJs>------->>第三章:Node.js基础知识
第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
- Hibernate入门1. Hibernate基础知识入门
Hibernate入门1. Hibernate基础知识入门 20131127 前言: 之前学习过Spring框架的知识,但是不要以为自己就可以说掌握了Spring框架了.这样一个庞大的Spring架构 ...
- JS基础知识笔记
2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...
随机推荐
- 数据库相关文章转载(1) MySQL性能优化之参数配置
1.目的: 通过根据服务器目前状况,修改Mysql的系统参数,达到合理利用服务器现有资源,最大合理的提高MySQL性能. 2.服务器参数: 32G内存.4个CPU,每个CPU 8核. 3.MySQL目 ...
- EXTJS中的grid显示实际行号
添加一个新的功能 Ext.grid.PageRowNumberer = Ext.extend(Ext.grid.RowNumberer, { width : 40, renderer:function ...
- QML学习笔记之一
摘自<Qt Quick中文手册> Qt Quick提供了一套高动态,丰富的QML元素来定制用户界面的说明性框架. Qt Quick包含了QtDeclarative C++模块.QML,并且 ...
- CodeForces 173A Rock-Paper-Scissors 数学
Rock-Paper-Scissors 题目连接: http://codeforces.com/problemset/problem/173/A Description Nikephoros and ...
- [Angular2 Form] Style Validation in Angular 2 Forms
Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each ...
- Java 多线程编程两个简单的样例
/** * @author gao */ package gao.org; public class RunnableDemo implements Runnable{ @Override publi ...
- 当调用List Remove 失效时 [C#] .
有没有试过从一个集合里面移除一个对象之后,这个集合仍然留有这个对象?世界之大,无奇不有.稍有疏忽,便会导致这种奇怪的现象.现在让我们看看这个“不死”对象究竟是怎么一回事. 1.“不死”对象现身 这个问 ...
- javascript exec方法
题目 取出 "[大哭][尴尬][发怒][发怒][调皮][调皮][呲牙]" 串中[]里面的东西 思路 正则匹配,/\[(.+?)\]/ig; exec方法循环 exec() 方法的功 ...
- js代码的一些小技巧
1. 数组中通过赋值语句来改变值 var a = 1; var msg = ["value0","value1"]; for(var i = 0;i<10 ...
- HANDLER命令与实现
MySQL“自古以来”都有一个神秘的HANDLER命令,而此命令非SQL标准语法,可以降低优化器对于SQL语句的解析与优化开销,从而提升查询性能.看到这里,可能有小伙伴不淡定了,这么好的东西为啥没广泛 ...