JS基础一-入门知识
一、什么是JavaScript
JavaScript是一种基于对象和事件驱动并具有安全性能的解释性脚本语言。JavaScript不需要编译,直接嵌入在HTTP页面中,把静态页面转变成支持用户交互并响应应用事件的动态页面。
二、JavaScript特点
1、解释性(脚本语言,采用小程序段的方式实现编程)
2、基于对象(许多功能来自于脚本环境中对象的方法与脚本的相互作用)
3、事件驱动(JavaScript可以以事件驱动的方式直接对客户端的输入做出响应,无须经过服务器端)
4、安全性(不允许访问本地硬盘,不能将数据写到服务器上,并且不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览和动态交互)
5、跨平台(JavaScript依赖于浏览器本身,与操作系统无关)
三、JavaScript语法
1、JavaScript区分大小写
2、每行结尾的分号可有可无
3、变量是弱类型(如定义变量时,只使用var运算符就可以将变量初始化为任意值)
4、单行注释 (//)与多行注释(/* 。。。。*/)
四、JavaScript数据类型
JavaScript的数据类型主要有6种:数值型,字符型,布尔型(boolean),转义字符,空值(NULL),未定义(undefined)
1、整型
JavaScript的整型数据可以是正整数、负整数和0
//表示十进制729
//表示八进制的71
0x9405B //表示十六进制的9405B
2、浮点型
3.1415926 //采用标准方法表示
1.6E5 //采用科学记数法表示,代表1.6*10^5
3、字符型
字符型数据时使用单引号或双引号括起来的一个或多个字符
‘hello,我是JavaScript’
“hello,我是Java”
注意:JavaScript和Java不同,它没有char数据类型,要表示单个字符,必须使用长度为1的字符串。
4、boolean
5、转义字符 JavaScript常用的转义字符
| 转义字符 | 描述 | 转义字符 | 描述 |
| \b | 退格 | \n | 换行 |
| \f | 换页 | \t | Tab符 |
| \r | 回车符 | \' | 单引号 |
| \" | 双引号 | \\ | 反斜杠 |
| \xnn | 十六进制代码nn表示的字符 | \unnnn | 十六进制代码nnnn表示Unicode字符 |
| \0nnn | 八进制代码nn表示的字符 |
6、未定义值
当使用一个并未声明的变量,或者使用一个已经声明但没有赋值的变量,将返回未定义值(undefined)
说明:JavaScript中还有一种特殊类型的数字常量NaN,即“非数字”。当在程序中由于某种原因发生计算错误后,将产生一个没有意义的数字,此时JavaScript返回的数值就是NaN。
五、变量的定义及使用
变量是指程序中一个已经命名的存储单元,其主要作用就是为数据提供存放信息的容器。
1、变量命名规则
a、变量名由字母、数字或下划线组成,但必须以字母或下划线开头
b、变量名中不能有空格,加号,减号,逗号等符号
c、不能使用JavaScript关键字
d、JavaScript严格区分大小写
2、变量的声明方法
使用关键字var声明变量,其语法格式如下
var sun;
可以使用关键字var同时声明多个变量
可以在声明变量的同时同时对其进行赋值,即初始化。
如果声明了变量,但未对其赋值,其默认值为undefined
JavaScript采用弱类型,所以在声明变量时不需要指定变量的类型,而变量的类型将根据变量的值来确定
3、变量的作用域
根据变量作用域可以将变量分为全局变量和局部变量两种。
<script>
var sun = "hello,博客园"; //变量在函数外声明,作用整个脚本的代码
function sun1(){
var url="www.baidu.com"; //变量在函数内声明,只作用于该函数体
alert(sun+sun1);
}
</script>
六、事件处理
1、什么是事件处理程序?
如用户单击按钮时将触发按钮的onclick事件等。事件处理程序则是用于响应某个事件而执行的处理程序。
JavaScript的常用事件
| 事件 | 何时触发 |
| onclick | 单击鼠标左键时触发 |
| ondblclick | 双击鼠标左键时触发 |
| onfocus | 任何元素和窗口本身获得焦点时触发 |
| onmousemove | 鼠标在某个元素上移动时持续触发 |
| onmouseout | 将鼠标从指定的元素上移开时触发 |
| onmouseover | 将鼠标移到某个元素上时触发 |
| onload |
页面完全载入后,在window对象触发; 所有框架都载入后,在框架集上触发 <img>标记指定的图像完全载入后,在其触发 |
2、事件处理程序的调用
JavaScript中调用
<input name = "bt_sun" type = "button" value = "保存">
<script>
var b_sun = document.getElementById("bt_sun");
b_sun.onclick = function(){
alert("我点击了这个按钮");
}
</script>
注意:在上面的代码中,要将<input name = "bt_sun" type = "button" value = "保存">放在JavaScript代码的上方,否则将弹出“b_sun”为空或不是对象的错误提示。
在JavaScript中指定事件处理程序时,事件必须为小写,才能正确响应事件。
在HTML中
在HTML中分配事件处理程序,只需要在HTML标记中添加响应的事件,并且在其中指定的代码或函数名即可。
<input name = "bt_sun" type = "button" value = "保存" onclick="alert("我点击了按钮");">
七、常用对象
1、Window对象
window对象即浏览器对象,是一个全局对象,是所有对象的顶级对象。Window对象同Math对象一样,直接使用“对象名.成员”的格式来访问其属性或方法。
| 属性 | 描述 |
| document | 对窗口或框架中含有文档的Document对象的只读引用 |
| length | 窗口或框架包含的框架个数 |
| name | 用于存放窗口对象的名称 |
| screen | 对窗口或框架的Screen对象的只读引用,提供屏幕尺寸,颜色深度等信息 |
| top | 表示最顶层的浏览器窗口 |
| 方法 | 描述 |
| alert() | 弹出一个警告对话框 |
| close() | 关闭窗口 |
| open() | 打开一个新窗口 |
| confirm() | 显示一个确认对话框,单击确认按钮时返回true,否则返回false |
如:
windowVar = window.open(url,windowname[,location]);
open()方法用于打开一个新窗口,并在窗口中装载指定URL地址的网页,以上代码是open()的语法格式。
2、String对象
string对象是动态对象,需要创建对象实例后才能引用其属性和方法。
3、Date对象的方法
Date对象没有提供直接访问的属性,只具有获取,设置日期和时间的方法
| 方法 | 描述 | 示例 |
| getFullYear() | 返回Date对象的年份,用4位数表示,采用本地时间或世界时 | new Date().getFullYear(); //返回值为2018/09/11 |
| getMonth() | 返回Date对象中的月份(0~11),采用本地时间或世界时 | new Date().getMonth(); //返回值为9 |
| getDate() | 返回Date对象中的日(1~31),采用本地时间或世界时 | new Date().getDate(); //返回值为11 |
| getDay() | 返回Date对象中的星期(0~6),采用本地时间或世界时 | new Date().getDay(); //返回值为2 |
| getHours() | 返回Date对象中的小时数(0~23),采用本地时间或世界时 | new Date().getHours(); //返回值为21 |
JS基础一-入门知识的更多相关文章
- 谈谈 React.js 的核心入门知识
近来React.js变得越来越流行,本文就来谈一谈React.js的入门实践,通过分析一些常用的概念,以及提供一些入门 的最佳编程编程方式,仅供参考. 首先需要搞懂的是,React并不是一个框架,Re ...
- Vue.js 基础快速入门
Vue.js是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.Vue.js提供了简洁.易于理解的API,使得我们能够快速地上手并使用Vue.js 如果之前已经习惯了用jQue ...
- 二、JavaScript语言--JS基础--JavaScript入门篇
1.如何插入JS 使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<scri ...
- Web3D编程入门总结——WebGL与Three.js基础介绍
/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...
- Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...
- three.js基础前置知识
这一节是纯理论知识,用于介绍three.js的入门概念,也就是开发前需要准备的理论基础. 一,三剑客 当然就是scene,camera,renderer这三个基本要素. scene是一个用于容纳三维空 ...
- js基础知识梳理(最简版)
基础的JavaScript知识,只放XMind截图.小白 JS01 JS02 JS03 最基础的js知识--!
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
随机推荐
- [UE4]运行模式
Selected Viewport和Simulate都可以在游戏模式和漫游模式之间切换. Selected Viewport:默认是游戏模式. Simulate:默认是漫游模式. 按Ctrl+F1后, ...
- [UE4]使用UnrealVS扩展快速编译C++代码
一.如果UE4 编辑器已经打开,则VS中的重新生成项目将不能使用,一定要关了UE4 编辑器才可以.一般不是有VS自身的编译UE4的C++代码 二.epic提供了UnrealVS扩展,可以快速编译C++ ...
- RHEL7安装图像化桌面
RHEL7安装图像化桌面 作者:Eric 微信:loveoracle11g 在安装系统的时候选择的是默认的Minimal Install RHEL7系统安装完成开机启动后发现没有图形化 Linux系统 ...
- SAS 输出内容到HTML
OPTIONS USER=SASHELP; ODS TAGSETS.HTMLPANEL PATH='F:\'(URL=NONE) FILE='A.HTML'; ODS GRAPHICS ON/IMAG ...
- Office365开发者计划——账户信息上显示已是订阅用户,点击其他授权信息,仍然需要激活
一.申请过程跳过. 二.安装之后,点击账号,查看授权状态,如题所述. 解决办法: 链接地址:https://answers.microsoft.com/zh-hans/msoffice/forum/a ...
- 升级Android Studio到1.0.2的问题解决
当前从光网下载到的Android Studio的版本是1.0.1,升级到1.0.2大概是3M的升级包.升级很简单,点击Help--Check For Update... 可是我碰到的情况是提示:Con ...
- solr7.4 安装与使用
1.solr7环境要求 solr7需要java8环境,且需要在环境变量中添加 JAVA_HOME变量. 2.solr 安装 下载地址 https://lucene.apache.org/solr/mi ...
- Python并发编程-事件驱动模型
一.事件驱动模型介绍 ...
- 前端笔记二:DOM事件
---恢复内容开始--- ---恢复内容结束---
- vue搭配axios踩坑
客户端项目中有一个小需求“我的卡券”,有单独入口,所以综合考虑之后,采用了vue来实现,因为是初次使用,导致了选型不当,先用了SUI-Mobile来搭建页面,当决定使用vue的时候,页面也搭建完毕了, ...