HTML之JavaScript基础知识

最新推荐文章于 2022-01-07 16:17:49 发布

xiang13127

最新推荐文章于 2022-01-07 16:17:49 发布

阅读量238

点赞数

分类专栏： HTML

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript基础知识：

基于事件驱动

基于对象

-BOM（window
href location document）

-DOM（HTML文档所有内容）操作属性/css样式、方法

基于对象AJAX

JS框架：
-jQuery
-Ext

JavaScript的优势：

表单验证——减轻服务器端压力

页面动态效果

动态改变页面内容

  脚本的基本结构 

  Script属性: 
  
 charsets  
 defer  
 src
  
 type 

  先声明变量再赋值 

  var width 
  
 var 用于声明关键字  
 不写var 是全局变量 

  同时声明和赋值变量 
  
 var go=10; 

  数据类型 ： 
 Undefined
  
 Null  
 Boolean
  
 String  
 Number 整形跟浮点型
  
 Object 

  break跳出当前循环 

  continue:跳出本次循环 

  变量不能以数字开头 

 
 下面是一段练习代码： 

 
 输入用户名、密码点击测试按钮： 弹出对话框，对话框显示 

 
 点击JSON按钮：输出JSON数据 

 
 点击获取日期：获取当前日期 

 
 点击新窗口：打开新窗口 

 
 点击增加行：点击增加一行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/OutSideJs.js"></script>
<style>
.myStyle{
background-color: #80C8FE;
width: 500px;
height: 500px;
border: 1px red;
}
</style>
<script>
var height = 200;
function test() {
alert(width);
}
function test1() {
alert(height);
}
function load(count,str) {
for(var i=0;i<count;i++){
document.write("<h1>"+str+"</h1>");
}
var s = prompt("提示信息","输入框的默认信息");
document.write("<h2>"+s+"</h2>");
}
function cleanValue(obj) {
obj.value = "";
}
function getValue(obj) {
var s = obj.value;
if(s!=""){
//alert(s.length);
//alert(s.substring(0,2));
try{
}catch (e){
}finally {
}
var strs = s.split(",");
for(var i=0;i<strs.length;i++){
alert(strs[i]);
}
}
}
function checkUser() {
var name =document.getElementById("name");
var pwd =document.getElementById("pwd");
alert("用户名:"+name.value+" 密码:"+pwd.value);
}
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
function getJson() {
var obj= JSON.parse(text);
alert(obj.employees[0].firstName+"-"+obj.employees[0].lastName);
}
function getDate() {
var date = new Date();
alert(date);
}
function del() {
var s = confirm("您确定要删除吗？");
if(s){
alert("删除成功");
}else{
alert("已取消");
}
}
// var id = window.setInterval(function () {
// var obj = document.getElementById("time")
// obj.value =new Date().getMinutes()+":"+new Date().getSeconds();
// },1000);
// window.setTimeout(function () {
// window.clearInterval(id);
// },5000);
function openWin() {
window.open("http://www.baidu.com","我的百度",400,500,400,500,true);
}
function closeWin() {
window.close();
}
function getWinH() {
alert(screen.availHeight);
alert(screen.height);
alert(screen.availWidth);
alert(screen.width);
}
function setCookie(){
var d = new Date();
document.cookie = "张三丰"+":"+d.getDay();
}
function getCookie() {
var str = document.cookie;
alert(str);
}
function changeColor() {
var div1 = document.getElementById("div1");
// div1.style.backgroundColor = "#FFEFDB";
// div1.innerText="adsfasdfadsfadsfdasf";
div1.innerHTML="<h1>插入html</h1>";
}
function addRow() {
var tab1 = document.getElementById("tb1");
var row = tab1.insertRow();
var c1 = row.insertCell(0);
var c2 = row.insertCell(1);
var c3 = row.insertCell(2);
c1.innerText="a";
c2.innerText="b";
c3.innerText="c";
}
function getXy(event) {
alert( event.clientX+":"+event.clientY);
}
function delElement() {
var tab1 = document.getElementById("tb1");
document.body.removeChild(tab1);
}
var index = 1;
function show(idx) {
var img = document.getElementById("img1");
switch (idx){
case 1:
img.src = "../image/2d77071d07b24c80ba9f5b8db7a364fb.jpg";
break;
case 2:
img.src = "../image/3ebdd05a07d54730ace086c613a66f6a.jpg";
break;
case 3:
img.src = "../image/3be1508a17d042e8913d43233abe5d52.jpg";
break;
case 4:
img.src = "../image/9a9eb11e281d48498bee9fc8e1b21359.jpg";
break;
}
}
var imgs = ['打的费','辅导费','多发点'];
function imgGo() {
setInterval(function () {
index++;
if(index>4){
index = 1;
}
show(index);
},3000);
}
function getItem(obj) {
alert(obj);
}
function getXy1(event) {
var flow = document.getElementById("flow");
flow.style.left = event.clientX + 5 +"px";
flow.style.top = event.clientY + 5 + "px";
flow.innerHTML="<h6>"+event.clientX+":"+event.clientY+"</h6>";
}
</script>
</head>
<body onmousemove="getXy1(event)" >
<div id="flow" style="width: 80px;height: 50px;position:absolute"></div>
<h1 ondblclick="load(10,'我是h1标签')">点击我</h1>
<input type="text" id="time" onfocus="cleanValue(this)"
onblur="getValue(this)" value="我是输入框">
用户名:<input type="text" id="name"/>
密码:<input type="password" id="pwd"/>
<input type="button" value="测试" onclick="checkUser()">
<input type="button" value="Json" onclick="getJson()">
<input type="button" value="获取日期" onclick="getDate()">
<input type="button" value="删除" onclick="del()">
<input type="button" value="打开新窗口" onclick="openWin()">
<input type="button" value="关闭窗口" onclick="closeWin()">
<input type="button" value="窗口高度" onclick="getWinH()">
<input type="button" value="设置cookie" onclick="setCookie()">
<input type="button" value="读取cookie" onclick="getCookie()">
<input type="button" value="改变DIV背景色" onclick="changeColor()">
<input type="button" value="增加行" onclick="addRow()">
<input type="button" value="删除table" onclick="delElement()">
<div id="div1" style="width: 200px;height: 200px;background-color: #80C8FE" onclick="getXy(event)">
</div>
<table id="tb1" style="border:1px solid red;width: 300px">
<tr style="border: 1px solid black">
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
</table>
<div style="position:absolute;width: 500px;" >
<div style="width: 500px;height: auto">
<IMG src="../image/2d77071d07b24c80ba9f5b8db7a364fb.jpg" id="img1" border="0">
</div>
<div style="position:absolute;left:0px;bottom:5px;">
<a href="javascript:show(1)">1</a>
<a href="javascript:show(2)">2</a>
<a href="javascript:show(3)">3</a>
<a href="javascript:show(4)">4</a>
</div>
</div>
<div>
<select style="width: 100px;height: auto" onchange="getItem(this)">
<option value="0">-请选择-</option>
<option value="1">山东省</option>
<option value="2">江苏省</option>
<option value="3">浙江省</option>
</select>
</div>
</body>
</html>

xiang13127

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML之JavaScript基础知识

JavaScript基础知识：基于事件驱动基于对象-BOM（windowhref location document）-DOM（HTML文档所有内容）操作属性/css样式、方法基于对象AJAXJS框架：-jQuery-ExtJavaScript的优势：表单验证——减轻服务器端压力页面动态效果动态改变页面内容脚本的基本结
复制链接

扫一扫

专栏目录