博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript入门
阅读量:4701 次
发布时间:2019-06-09

本文共 2878 字,大约阅读时间需要 9 分钟。

概述:

  JavaScirpt是一种脚本语言,是一种直译试脚本语言,是一种基于对象的脚本语言,是一种动态类型,弱类型,基于原型的语言,主要用于网页编程

一、什么是JavaScript:

  JavaScript是一种属于网络的脚本语言,已经被广泛的用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是嵌入在HTML中来实现自身的功能的。

二、JavaScript的优势

  1、动态写入HTML输出

    使用这个方法可以动态的在页面中添加新的元素

    实例:动态在网页输出当前日期时间

  JavaScript代码:

document.write("

时间:" + new Date().toLocaleString() + "

");

  2、对事件作出反应

    使用事件让页面与用户有更好的交互性,根据用户的操作做出不同的响应。

    实例:单击网页中的按钮时,弹出提示对话框

  HMTL代码:

  3、改变HTML内容

    使用JavaScript来处理HTML内容是非常强大的功能。

    实例:根据页面中的HTML元素的id名,获取页面元素并改变该元素的内容

  HTML代码:

你还没有权限查看内容

  JavaScript代码:

document.getElementById("btn").onclick = function () {    var ss = document.getElementById("demo");//查找元素    ss.innerHTML = "正在建设中ing.....";//改变内容}

  4、改变HTML图像(标签属性)

    用户可以根据需要选择不同的图像,常用于图片动态切换中

  HTML代码:

    

  JavaScript代码:

document.getElementById("btn1").onclick = function () {    var ele = document.getElementById("image");//查找元素    ele.src = "img1.png";//改变引用的图片文件    this.disabled = true;//禁用按钮}

  5、改变HTML样式

    常用于改变HTML元素的样式,曾强用户体验

  实例:当鼠标移动到当前行时,高亮度显示

  HTML代码:

  • 测试1
  • 测试2
  • 测试3
  • 测试4

  JavaScript代码:

var rows = document.getElementsByClassName("list");    for (i = 0; i < rows.length; i++) {        rows[i].onmouseover = function () { this.style.backgroundColor = 'gray'; }        rows[i].onmouseout = function () { this.style.backgroundColor = 'white'; }    }

  6、验证输入

    JavaScript常用于验证用户的输入

  示例:当用户输入手机号并离开次对话框判断是否是有效的电话号码

  HTML代码:

  JavaScript代码:

doucument.getElementById("phoneNumber").onblur = function () {    var num = this.value;    if(isNaN(num)||num.length!=11){alert("不是手机号码");}}

 总之:JavaScript是客户端脚本语言,让页面羽用户更加有交互性,涉及动态效果,增加用户体验。

  

三、JavaScript实现基础

  JavaScript脚本如何来实现自己想要实现的效果?首先必须了解JavaScript的基础语法

    JavaScript脚本是基于对象的操作。可以分为是三部分  

      ECMAScript核心:为不同的宿主环境提供核心的脚本能力。

    ECMAScript规定了能适应于各种宿主环境的脚本核心语法规则,关于ECMAScript语言,ECMA-262描述如下:

      ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力,因此核心的脚本语言是与任何特定的宿主换件分开进行规定的

      ECMAScript仅仅是个人描述,定义了脚本语言所有的对象、属性和方法,其主要描述了以下内容

      £:语法

      £:数据类型

      £:关键字

      £:保留字

      £:运算符

      £:对象

      £:语句

      ECMAScript标准定义了JavaScript脚本中最为核心的内容,是JavaScript脚本的骨架,有了骨架,就可以在其上进行扩展,典型的扩展如DOM(文档对象模型)和BOM(浏览器对象模型)等。

    DOM(文档对象模型):规定了访问HTML和XML的应用程序接口。

    DOM定义了JavaScript可以进行操作的文档的各个功能部件的接口,提供访问文档各个功能部件(如:document、form、textarea等)的途径以及操作方法。

    示例:    

显示当前日期时间        

 

    BOM(浏览器对象模型):提供了独立于内容而在浏览器窗口之间进行交互的对象和方法。

    BOM定义了JavaScript可以进行操作的浏览器的个个功能部件的接口,提供访问文档的各个功能部件(如窗口本身、屏幕功能部件、浏览历史记录等)的途径以及操作方法。

    通常情况下浏览器特定的JavaScript扩展都被看做BOM的一部分,主要包括:

    £:关闭、移动浏览器及调整浏览器窗口的大小;

        £:弹出新的浏览器窗口;

    £:提供浏览器的详细信息的定位对象;

    £:提供载入到浏览器窗口的文档详细信息的定位对象;

    £:提供用户屏幕分辨率详细信息的屏幕对象;

    £:提供cookie的支持;

        £:加入ActiveXObject类扩展BOM,通过JavaScript实例化ActionX对象;

BOM有一些事实上的标准,如窗口对象、导航对象等,但每种浏览器都为这些对象定义或扩展属性及方法。

  实例:

 

 

转载于:https://www.cnblogs.com/zhangmawang/p/8403341.html

你可能感兴趣的文章
SQL Server 索引结构及其使用
查看>>
HTTP 错误 404.2 - Not Found.
查看>>
uc/os调度机制深度解析
查看>>
Coreutils - GNU core utilities
查看>>
windows下利用VMware安装mac:构建…
查看>>
hdu 2740 Root of the Problem (水)
查看>>
让delphi解析chrome扩展的native应用
查看>>
用BP人工神经网络识别手写数字
查看>>
学习CSS布局 - position例子
查看>>
字符串:朴素字符串匹配
查看>>
学习RMI
查看>>
Vue ajax 同步请求
查看>>
Django REST framework 解析器与渲染器
查看>>
如何处理大量数据并发操作
查看>>
python流程控制
查看>>
H5的Page Visibility API
查看>>
centos上配置nginx为服务
查看>>
Spring 事件
查看>>
ASP.net分别连接SQLserver数据库与连接Access数据库精英版
查看>>
斗地主——扎金花——3DMark
查看>>