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 ...
随机推荐
- 部署redis5.0.3
一.准备环境 1.下载 # wget http://download.redis.io/releases/redis-5.0.3.tar.gz [root@localhost ~]# wget htt ...
- [UE4]第一人称与第三人称
一.给Character添加一个SkeletalMesh,并设置为第三人称模型.并设置自己看不到该模型. 二.添加给骨骼的右手添加一个Socket插槽用来挂载武器 三.判断当前角色是否被本地Contr ...
- Mybatis 系列7-结合源码解析核心CRUD 配置及用法
[Mybatis 系列10-结合源码解析mybatis 执行流程] [Mybatis 系列9-强大的动态sql 语句] [Mybatis 系列8-结合源码解析select.resultMap的用法] ...
- tf.nn.nce_loss
def nce_loss(weights,biases,inputs,labels,num_sampled,num_classes,num_true=1,sampled_values=None,rem ...
- Android:真机调试遇到的问题(You need to use a Theme.AppCompat theme (or descendant) with this activity)
Android:真机调试遇到的问题(You need to use a Theme.AppCompat theme (or descendant) with this activity). 在调试&l ...
- 小朋友学C语言(5):常量和变量,for循环
动手编写程序: #include <stdio.h> int main() { int a = 1; printf("a = %d\n", a); a = 2; pri ...
- RSA加密解密,String转PublicKey、PrivateKey;附Base64.JAR
网络请求的数据需要加密,服务器给的他们那一套在Android一直报错,自己写了一个: package com.cc.common.util; import javax.crypto.Cipher; i ...
- html里面,没有内容,要高度占满页面
html { height:100%; margin:0; } body{ width: 100%; height: 100%; background-color: rgb(52,175,245); ...
- [work]Spring_Jdbc
封装Spring-RowMapper,使得使用更加灵活 import java.sql.ResultSet; import java.sql.SQLException; import java.uti ...
- Js中,Map对象的使用
1.定义 键/值对的集合. 2.语法 mapObj = new Map() 3.备注 集合中的键和值可以是任何类型.如果使用现有密钥向集合添加值,则新值会替换旧值. 4.属性 构造函数 :指定创建映射 ...