网页第七讲（javascript概述）

最新推荐文章于 2024-10-17 19:11:48 发布
最新推荐文章于 2024-10-17 19:11:48 发布
阅读量87 收藏
点赞数
文章标签： java json javascript ViewUI
原文链接：https://my.oschina.net/u/4090401/blog/3044045
版权

三、基础知识

（一）数据类型

（二）变量

（三）关键字

（四）运算符

（五）对象

（六）函数

（七）语句

（八）事件处理

 

HTML 事件是发生在 HTML 元素上的事情。

  • HTML 页面完成加载
  • HTML 按钮被点击
  • HTML 输入框里的内容改变时

事件

描述

onchange

HTML 元素改变

onclick

用户点击 HTML 元素

onmouseover

用户在一个HTML元素上移动鼠标

onmouseout

用户从一个HTML元素上移开鼠标

onkeydown

用户按下键盘按键

onload

浏览器已完成页面的加载

如：

 

function over(){

//给按钮改个背景,#fff RGB=red g=green blue

//document.getElementById("btn").style.backgroundColor = "#f00";

//$("#btn") jquery.js在原生js上进一步封装后，简化代码编写

document.getElementById("btn").className = "overClass";

}

function out(){

//document.getElementById("btn").style.backgroundColor = "#0f0";

document.getElementById("btn").className="outClass";

}

function change(){/*当文本框内容发生改变的时候*/

var txt = document.getElementById("txt").value;

if(txt.length>10){

     alert("用户名长度不能超过10");

}

 

}

 

</script>

<style type="text/css">

.overClass{

background-color:#F90;

width:400px;

height:80px;

}

.outClass{

    background:#F60;/*background应用更广泛*/

width:200px;

}

</style>

</head>

 

<body onLoad="alert(6);"><!--场景：页面加载完毕时去调用后台，查询数据-->

<input type="button" id="btn" value="点我登陆" onClick="login('zq','123')"

      onMouseOver="over()" onMouseOut="out()"/>

<input type="text" id="txt" value="我是文本框" onKeyDown ="change()"/> <!--onFocus="alert('获取焦点');" onBlur="alert('我失去焦点了')"-->

 

<span id="msg"></span>

</body>

 

 

 

（九）其他对象（ http://www.runoob.com/jsref/obj-window.html）

  1. 浏览器对象：   

Window 对象表示浏览器中打开的窗口。

如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

注意： 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

 

 

如：

例1：

alert(window.innerHeight+"---"+window.innerWidth);

window.close();//关闭当前的页面

 

例2：

alert(window.innerHeight+"---"+window.innerWidth);

function openNew(){

        window.open("http://www.baidu.com");//打开一个新页面

 

}

 

 

<input type="button" id="btn" value="点我登陆" onClick="openNew()"

      onMouseOver="over()" onMouseOut="out()"/>

 

      2.Location对象：

 

 

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

注意： 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。

 

 

 

 

 

例如：

alert(window.innerHeight+"---"+window.innerWidth);

function openNew(){

window.location.href = "";//可以使用此种方法直接点出来location，以免打错了

location.href="http://www.baidu.com";

location.reload();//刷新当前页面

        //window.open("http://www.baidu.com");//打开一个新页面

 

}

 

        3.History对象：

 

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

注意： 没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

 

 

例如：

alert(window.innerHeight+"---"+window.innerWidth);

function openNew(){

window.history.back();

location.href="http://www.baidu.com";

history.back();//后退

history.forward();//前进

history.go(1);//1-前进一个页面 2 前进2个页面   -2  后退2个页面

//location.reload();//刷新当前页面

        //window.open("http://www.baidu.com");//打开一个新页面

 

}

 

 

 

 

（十）类型转换

 

var 声明的变量，没指明类型，如何查看类型？typeof 

一般数字和字符串、字符串和日期转换常用。

 

如：

 

function openNew(){

alert(typeof(String(123)));

alert(String(123+12.33));

var ss="555qq5";//字符串转数字

alert(parseInt(ss));//js只有这两种，没有parseDouble

alert(parseFloat("999"));//Integer.parseInt  Float.parseFloat  Double.parseDouble

}

 

 

（十一）JSON

 

JSON 是用于存储和传输数据的格式。通常用于服务端向网页传递数据

abebfc16cbf3170eea11fc6e0b3b690007f.jpg

 

1706fa2da45bc83a13b670750472a71b192.jpg

 

 

JSON 字符串转换为 JavaScript 对象 

var text = '{ "sites" : [' +

    '{ "name":"Runoob" , "url":"www.runoob.com" },' +

    '{ "name":"Google" , "url":"www.google.com" },' +

    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

 

 

 

 

 

 

源代码：

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<link type="text/css" rel="stylesheet" href="myCsss.css" />

<!--外链式  css引入时link是单标签的；成对的-->
<!--<script type="text/javascript" src="myJs.js"></script>-->

<!--内嵌式-->
<script type="text/javascript">
    //函数，和java的区别：参数无类型，返回值无类型
    /*
    void login(String username,String pwd)
    int login(String username,String pwd)
    String login(String username,String pwd)
    */
    function isExitName(username){//有返回值的方法
        if(username=='zq'){
            return true;    
        }else{
            return false;    
        }
    }
    function login(username,pwd){//单引号和双引号一样用
        //for in：遍历对象的属性
        var person = {
            height: "65kg",//属性
            weight: 165.00,
            sex: true,
            eat: function(){//方法
                alert("我吃饭了");
            },
            sleep: function(n){//n:睡了几个小时
                alert("睡了："+n+"小时");
            }
        };
        for(var x in person){
            alert("属性是："+x+"--属性值："+person['height']//person.height
                +"--属性类型-"+typeof(person[x]));
        }
    
        //一个数组里面可以有多个类型的值，java里不可以int[] s=[]
        /*var s = [1,"hello",true,{},null];
        for(var i = 0; i<s.length; i++){
            alert(i+"---"+s[i]+"----"+typeof(s[i]));
        }*/
    
        /*switch(pwd){//case后面可以同时存在多种类型的数据，c和java不可以
            case 123://123==='123' case比较：数字和类型都要相等
                alert(123);
                break;
            case '123'://123==='123'
                alert("我是字符串123");
                break;
            case "hello":
                alert("hell");
                break;
            case true:
                alert(true);
                break;
            default:
                break;    
        }*/
        /*var isExit = isExitName(username);
        alert(isExit);
    
        if(pwd=='123' && isExit){
            alert("登陆成功");
        }else{
            alert("登录失败");
        }*/
    }
    
    /*var a = 123;
    var b = new Number(123);//int Integer
    alert(a===b); 
    alert(a==b);*/
    
/*    //Date
    var d = new Date();
    alert(d);
    alert(d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+
        " "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());//yyyy-MM-dd HH:mm:ss
    alert(d.getTime());//把日期直接转成long值,13位的数字，这个在php存储数据常用long值的日期
    alert(d.getDay());//日期，0-6，周日是0，周一是1，周六是6*/


    /*//String对象，和java的String类的方法几乎的一样的
    var a = "I am a china";    
    alert(a.length);//长度属性，算上空格
    alert(a.indexOf('c',4));//查找c字符的位置,第一个位置从0开始
    alert(a.lastIndexOf('c',20));//从后往前查c的位置，20超过字符串长度，不报错
    alert(a.substr(2,3));//截取字符串,从位置2开始截取，截取3个字符
    alert(a.substring(2,3));//从2开始截取，截取到第3个位置，不包含第3个位置的字符
    var b = a.split(" ");//以空格为分隔符，拆成数组
    alert(b[1]);//数组应该是这样的：["I","am","a","china"]*/
    
    //自定义一个对象
    /*var person = {
        height: "65kg",//属性
        weight: 165.00,
        sex: true,
        eat: function(){//方法
            alert("我吃饭了");
        },
        sleep: function(n){//n:睡了几个小时
            alert("睡了："+n+"小时");
        }
    };
    alert("身高："+person.height);//对象名字.属性
    alert("体重："+person.weight);
    person.eat();//对象名字.方法或叫函数
    person.sleep("18个");*/

    /*//字符串+连接符
    var a = 12; 
    var b = "12";
    var c = a + b;
    alert(c);//1212
    var d = a + parseInt(b);//parseFloat,只有这2个
    alert(d);//24*/

    /*var a = 12;
    var b = "12";
    alert("==:"+(a==b));//只比较值是否相等
    alert(a===b);//值和类型都相等*/    
    
    /*var a = 1;
    var b = 1.0;
    b = "haha";//js里面可以赋值为不同类型是数据
    alert(typeof(b));//typeof是查看b的数据类型
    b = true;    
    alert(typeof(b));//typeof是查看b的数据类型

    var c;
    alert(typeof(c));//undefined
    var d = [];
    alert(typeof(d));//object对象类型
    */
    
    //几种住打印方式
    //console.log("我是console打印");
    //document.write('<h1>写入页面</h1>');
    //document.getElementById("msg").innerHTML = "您用户名不对";
    //alert("内嵌式引入js");
    /*
    多行注释
    */
    function over(){
        //给按钮改个背景,#fff RGB=red g=green blue
        //document.getElementById("btn").style.backgroundColor = "#f00";
        //$("#btn") jquery.js在原生js上进一步封装后，简化代码编写
        document.getElementById("btn").className = "overClass";
    }
    function out(){
        //document.getElementById("btn").style.backgroundColor = "#0f0";    
        document.getElementById("btn").className = "outClass";
    }
    function change(){//当文本框的内容发生改变的时候
        var txt = document.getElementById("txt").value;
        if(txt.length>10){
            alert("用户名长度不能超过10");
        }
    }
    //alert(window.innerHeight+"---"+window.innerWidth);
    function openNew(){
        var d = new Date();
        alert(typeof(d));
        alert(String(d));//转成字符串
        d.toString();//0字符串
        var s = "2019-12-12 12:12:12";//字符串变成日期类型
        new Date(s);
        /*alert(typeof(String(123)));
        alert(String(123+12.33));
        var ss = "qq555qq5";//字符串转数字
        alert(parseInt(ss));//js只有这两种，没有parseDouble
        alert(parseFloat("999"));//Integer.parseInt  Float.parseFloat  Double.parseDouble
        /*window.location.href="";//可以用此种方法直接点出来location,以免打错了
        window.history.back();
        //window.document;//
        location.href="http://www.baidu.com";
        history.back();//后退
        history.forward();//前进
        history.go(1);//1-前进一个页面 2前进2个页面  -2 后退2个页面
        //location.reload();//刷新当前页面
        //window.open("http://www.baidu.com");//打开一个新页面
        //window.close();//关闭当前的页面*/
    }
</script>
</head>

<body onLoad="alert(6);"><!-- 场景：页面加载完毕时去调用后台，查询数据 -->
<input type="button" id="btn" value="点我登陆" onClick="openNew()"
      onMouseOver="over()" onMouseOut="out()"/>
<input type="text" id="txt" value="我是文本框" onKeyPress="change()" /><!-- onChange="change()" onFocus="alert('获取焦点');"     onBlur="alert('我失去焦点了')"  -->
<span id="msg"></span>
</body>
<style type="text/css">
    .overClass{
        background-color:#F90;
        width:400px;
        height:80px;        
    }
    .outClass{
        background:#F60;/*background应用更广泛*/
        width:200px;
    }
</style>
</html>

 

转载于:https://my.oschina.net/u/4090401/blog/3044045

chujulu7854
关注
网页设计之JavaScript
qq_53677566的博客
10-05 7843
文章目录JavaScript笔记一.JavaScript概述1.JavaScript历史2.javaScript与java的区别3.javaScript的作用4.JavaScript与html,css关系二.基本语法1.位置2.变量3.控制语句三.函数，内置对象与事件1.函数基本语法：全局函数：2.内置对象（1）String字符串（2）Aarry数组（3）Date对象（4）Math对象3.事件四.Event对象五.HTML Dom对象1.获得标签的四种方式2.HTML DOM - 改变 HTML内容3.HT
第1章　JavaScript概述
唯美清泠
11-15 663
第1章　JavaScript概述 JavaScript是面向Web的编程语言。绝大多数现代网站都使用了JavaScript，并且所有的现代网页浏览器均包含了JavaScript解释器。这使得JavaScript成为史上使用最广泛的编程语言之一，JavaScript也是前端开发工程师必须掌握的基本技能之一。本章将从JavaScript起源开始讲解，简单介绍JavaScript发展历史、概况以及相关基本概念，为后续章节的进一步讲解打下基础。 【学习重点】 ▲　了解JavaScript发展历史 ▲　了解E
JavaScript概述
qq_43785075的博客
12-07 1253
JavaScrit概述 JavaScript语言作为目前流行的脚本语言，与HTML5密不可分。HTML5中的核心功能基本都需要JavaScript语言的支持。 1.JavaScript简介 JavaScript作为一种可以给网页增加交互性的脚本语言，拥有近二十年的发展历史。 1.1JavaScript是什么 JavaScript是一种动态、弱类型、基于原型的语言，内置支持类。 JavaScript不仅是一种健壮的、基于对象和事件驱动、并具有相对安全性的客户端脚本语言，同时也是一种广泛用于客户端Web开发的脚
【JavaScript 教程系列第 1 篇】JavaScript 概述
“Allen Su”的博客
11-01 351
JavaScript 是面向 Web 的编程语言，获得了所有网页浏览器的支持，是目前使用最广泛的脚本编程语言之一，也是网页设计和 Web 应用必须掌握的基本工具。 一：JavaScript 历史简述。 二：ECMAScript 起源。 三：ECMAScript 版本。 四：简述 JavaScript 与 Java 的关系与区别 。
JavaScript 概述
Dailyblue的专栏
04-13 2393
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
javascript学习——DOM 概述
白话机器学习
10-07 1172
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。DOM 只是一个接口规范，可以用各种语言实现。
网页设计（三）——JavaScript
m0_55401536的博客
03-23 3068
CSS与JavaScript应用 JavaScript概述 JavaScript基本语法 JavaScript基本语句 JavaScript的事件 浏览器的内部对象 实例应用 JavaScript框架设计 第一章 种子模块 第二章 语言模块 第三章 浏览器嗅探与特征侦测 第四章 类工厂 第五章 选择器引擎...
第 1 章 JavaScript 概述
weixin_44010641的博客
08-08 532
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。虽然网景开发了 JavaScript 并首先提交给 ECMA 标准化，但因计划改写整个浏览器引擎的缘故，网景晚了整整一年才推出“完全遵循 ECMA 规范”的 JavaScript1.3。
web前端之javaScript——（让你的网页更加互动化）
2301_78341216的博客
06-28 783
如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN”。split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。
DW CS6中文版零基础自学视频教程第14章 JavaScript概述 13节.zip
04-13
在本《DW CS6中文版零基础自学视频教程第14章 JavaScript概述 13节》中，我们将深入探讨JavaScript这一强大的编程语言，它是网页动态效果和交互性背后的重要驱动力。JavaScript通常与HTML和CSS一起使用，构成网页...
Javascript 第2章 JavaScript概述
08-13
### JavaScript 第2章 JavaScript概述 #### 2.1 JavaScript特点 **1. 基于对象的编程语言** JavaScript 被设计为一种基于对象的编程语言，这意味着它支持对象的概念，但与纯面向对象的语言如 Java 相比，它的面向...
javascript html实现网页版日历代码
10-22
基于本文提供的内容，可以概述以下知识点： 1. HTML文档结构：HTML文档的头部（）通常包含了文档的元信息，如标题和样式链接，而文档的主体（）则包含了页面内容。本文展示了如何使用标签引入外部CSS样式表（Skin....
第8章javascript介绍=创新教育基础与实践=大连理工大学.ppt
11-13
8.1 JavaScript概述 JavaScript的功能主要在于它可以处理各种任务，如表单验证、创建动态用户界面等。作为最广泛使用的客户端脚本语言，JavaScript能够直接嵌入HTML中，与HTML、Java小程序结合，实现在Web页面中...
HTML静态网页作业html+css+javascript+jquery水果商城7页
08-10
### 一、网页设计概述 该网页设计作业是基于HTML静态网页进行开发的作品，采用了流行的DIV+CSS布局方式，整体风格清新且具有活力。整个项目包含七个页面的设计，旨在为学生提供一个完整的网页设计实践案例。首页的...
【C++刷题】力扣-#121-买卖股票的最佳时机
会写代码的饭桶
10-16 564
给定一个数组 prices，其中 prices[i] 表示第 i 天的股票价格。假设你可以在第 i 天买入并在第 j 天卖出股票（i ≤ j），设计一个算法来计算你所能获取的最大利润。注意你只能持有一股股票，并且你不能同时参与多笔交易（即在再次买入前必须卖出股票）。
java 异常包装
最新发布
fdvvg的博客
10-17 338
通过异常包装，可以在Java中有效地处理和传递异常。这样做不仅能保持原始异常的信息，还能为上层调用者提供更多的上下文信息。
基于SSM班级事务管理系统的设计
2401_87849773的博客
10-15 431
管理员账户功能包括：系统首页，个人中心，学生管理，班委管理，班会组织管理，健康档案管理，党员发展管理，党员培训管理，学生成绩管理。主要技术：Java,Spring,mybatis,mysql,jquery,html。班委账号功能包括：系统首页，学生管理，学生成绩管理，活动信息管理，班费通知管理。服务器：SpringBoot自带 apache tomcat。JDK版本：Java JDK1.8。数据库可视化工具： navicat。数据库版本： mysql5.7。开发系统：Windows。
JavaWeb合集05-SpringBoot基础知识
qq_57340195的博客
10-17 855
Autowrite ：自动装配，通过声明的数据类型来装配对应的bean对象。缺点，只能获取到一个相同类型的bean对象，如果有IOC容器里面有2个Bean对象，使用@Autowrite依赖注入就好报错。由于三层架构中，每一层都需要下次成来提供对应的方法，所有要new 下一次的对象，如果上一层的类名发送改变，那么上一层就需要修改对应的类名，如下。3、@Resource注解：通过它来代替@Autowrite注解，直接指定要注入的Bean对象，参数name的值就是要注入的Bean对象。
1997年JavaScript首版标准：历史与概述
- **Web scripting**：介绍了JavaScript在网页交互中的角色，它是动态网页内容更新和用户交互的基础。 - **语言概述**：着重于语言的总体结构，包括其对象系统，强调了它是基于原型的、动态类型的语言。 - **对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值