js的简单介绍及基本用法
1. JS的简介
概述: JavaScript, 是一门弱类型语言, 用来给页面增加动态功能的.
//弱类型语言: 对数据的数据类型划分不精细(不明确). 特点:
A. JavaScript 是一种轻量级的编程语言。
B. JavaScript 是可插入 HTML 页面的编程代码。
C. JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
D. JavaScript 很容易学习。 JS的组成:
ECMAScript: 定义了JS的基本对象和语法.
BOM: Browser Object Model, 浏览器对象模型.
DOM: Document Object Model, 文档对象模型. 2. JS的引入方式:
A: 直接嵌入到HTML页面中.
写在<head>标签中的<script>
<script>
//JS代码
</script> B: 写在.js文件中,然后再页面中引入该.js文件.
写在<head>标签中的<script>
<script src="引入的.js文件的路径">
//JS代码
</script> 3. ECMAScript的核心语法
基础语法:
A: JS是区分大小写的.
B: JS是弱类型语言, 所有的变量值都用var类型的变量接收.
var v1 = "abc";
var v2 = 123;
var v3 = false;
var v4 = null;
var v5;
var v6 = new Array();
C: 每行语句末尾的分号可写可不写, 建议写上.
D: JS中的注释方式和Java中的注释方式类似.
//单行注释
/*多行注释*/
E: 由{}括起来的内容是代码块. 变量的命名规则:
A: 变量名的组成必须是: 数字, 大小写字母, _, $四部分中组成.
B: 数字不能开头. JavaScript中值的数据类型:
原始值: //可以理解为Java中基本类型的值
//存储在栈中, null除外(存储在堆中)
String: //JS中没有字符的概念, 字符串用''或者""括起来效果是一样的.
Number: //所有的小数和整数都是: Number值.
Boolean: //值只有两个: false, true
Null: //值只有一个: null
Undefined: //值只有一个: undefined 我们可以通过typeof关键字, 来校验变量或者值是什么类型的值:
格式: typeof 值或者变量名
如果返回值是string, 说明是String类型的原值值.
如果返回值是number, 说明是Number类型的原始值.
如果返回值是boolean, 说明是Boolean类型的原始值.
如果返回值是undefined, 说明是Undefined类型的原始值.
如果返回值是object, 说明是一个引用类型的值或者Null类型的原始值. 引用值: //可以理解为Java中的引用类型的值.
//存储在堆中.
/*
JS中是没有类的, JS是基于对象的.
可以理解为是: 面向对象.
*/
var b1 = false; //原始值
var b2 = new Boolean(true); //引用值, Boolean 对象是 Boolean 原始类型的引用类型。 var s1 = "abc"; //原始值
var s2 = new String("abc"); //引用值, String 对象是 String 原始类型的引用类型。 var n1 = 123; //原始值
var n2 = new Number(123) //引用值, Number 对象是 Number 原始类型的引用类型。 和Java中的代码对比:
int a = 10; //Java中的基本类型
Integer ii = new Integer(10); //Java中的引用类型
Integer ii2 = 10; //JDK1.5的新特性: 自动装箱. 4. JavaScript中的类型转换
转成字符串:
变量名.toString();
转成数字:
parseInt(值), parseFloat(值); 强制类型转换:
Boolean(给定的值); //把给定的值转成boolean类型, 值是非空字符串, 非零数字, 非null的情况下返回true, 其他返回false.
String(给定的值); //把给定的值转成字符串.
//类似于 值.toString()这种方式.
Number(给定的值); //把给定的值转成数字. 如果给定的值是false和true, 那么则分别转成0和1. 5. JavaScript中的运算符
JavaScript中的运算符和Java运算符基本一致.
算术运算符:
+, -, *, /, %, ++, -- 赋值运算符:
=, +=, -=, *=, /=, %= 比较运算符:
>, <, >=, <=, != , ==, ===(全等于)
/*
==和===解释:
==: 只校验值是否相等.
===(全等于): 既校验值是都相等, 也校验值的类型是否相同.
*/
逻辑运算符:
&&, ||, !
条件运算符: //和Java中的三元运算符一样.
var num = num1 > num2 ? num1 : num2;
逗号运算符:
//相当于同时声明多个变量.
var num1 = 1, num2 = 2, num3 = 3; 6. JavaScript中的语句
和Java中非常类似, 需要注意的是: for循环的初始化条件的类型要写成var. 7. JavaScript的事件的概述
概述: 前面编写的JS代码都是直接在<script>标签中直接写的, 按照执行的顺序来讲, 只要页面加载到代码, 就会执行.这样写不够灵活, 一般JS的代码是由 用户某些行为 的触发来执行的.这些用户的行为, 就是事件. 常用事件:
onclick: //鼠标单击事件
ondblclick: //鼠标双击事件
onmouseover: //鼠标悬浮事件
onmousemove: //鼠标移动事件
onmouseout: //鼠标移除事件
onkeyup: //键盘抬起事件
onfocus: //获取鼠标焦点事件
onblur: //失去鼠标焦点事件
onchange: //改变事件. 一般用于下拉列表, 可以用来做菜单联动.
onsubmit: //提交事件. 可以用来做表单数据校验.
onload: //页面加载事件 //JS事件一般结合 JS函数一起使用. 8. JavaScript的自定义函数
函数的定义格式:
格式一: 普通定义格式, 直接写.
//注意: 直接写参数即可, 不需要写数据类型.
function 函数名(参数1, 参数2){ }
//示例: 计算两个数字的和
function sum(a,b){
return a + b;
}
格式二: 匿名函数
//把函数绑定到事件上.
onload = function() {
} 9. JavaScript的全局函数
eval(): 将字符串当成脚本来执行. //Ajax会用.
var s = "alert('aaa')";
eval(s);
parseInt(); 转成整数
parseFloat(); 转成小数
toString(); 转成字符串 encodeURIComponent(); 把字符串编码为 URI 组件。
decodeURIComponent(); 解码一个编码的 URI 组件。
//缓存数据可以存在Cookie里边, 但是Cookie默认是不能存中文的, 就可以通过这两个方法对字符串进行编码和解码. 10. JavaScript的对象及数组
RegExp: 正则对象.
正则的校验有两种方式:
String#match();
//字符串.match("正则表达式");
RegExp#test();
//正则表达式.test(字符串); 数组的定义:
直接定义:
var arr = [1,2,3,"abc",true];
对象方式定义:
var arr = new Array();
arr[0] = 1;
arr[1] = 2; var arr2 = new Array(3);
//下边只能是0,1,2 var arr3 = new Array("a","b","c"); 11. JavaScript的BOM对象
BOM的概述: //Browser Object Model, 浏览器对象模型.
浏览器对象的分类:
Window:
Window是浏览器对象中最顶层的对象, 使用这个对象的时候可以window.xxx也可以将window省略.
//即: window.alert()和alert()效果一样.
alert(); 警告框
confirm(); 确认框
open(); 打开一个新的浏览器窗口或查找一个已命名的窗口
close(); 关闭浏览器窗口。
prompt(); //提示用户录入数据
setInterval(); 设置定时, 循环执行.
//用法: setInterval("表达式", 间隔时间-毫秒);
setTimeOut(); 设置定时, 执行一次.
//用法: setTimeOut("表达式", 间隔时间-毫秒);
clearInterval(); 清除定时
clearTimeOut(); 清除定时
History:
浏览器的历史对象.
Location:
浏览器的控制页面跳转对象. Navigator:
Screen: 12. DOM对象简介
概述: document Object Model, 文档对象模型.
//所谓的文档模型指的就是: 把整个页面加载到内存形成树状结构, 也叫DOM树. /*
记忆:
DOM对象是把整个文档(.html文件)加载到内存, 文档中的(元素标签,属性,文本)都是对象,
通过操作对象来实现, 修改或者修饰HTML页面的效果.
*/ 树状结构的特点:
1. 有且只有一个根节点.
2. 每个节点都有一个父节点和任意个子节点, 根节点除外.
3. 没有子节点的节点叫: 叶子节点. DOM树的特点:
1. 所有的元素标签都用: Element表示.
2. 元素标签的属性用: Attribute表示.
3. 文本内容用: Text表示.
4. 元素标签, 属性, 文本统称为: 节点(Node). 13. DOM对象的功能
//document对象的功能: 就是把整个页面加载到内存后形成的对象.
获取:
document.getElementById("元素的id属性值"); //根据id获取元素, 获取的是一个.
document.getElementsByName("元素的name属性值"); //根据name获取元素, 获取的是多个.
document.getElementsByClassName("元素的class属性值"); //根据class获取元素, 获取的是多个.
document.getElementsByTagName("元素的标签名"); //根据标签名获取元素, 获取的是多个. 创建:
document.createElement("元素标签名"); //根据元素标签名创建指定的标签.
document.createTextNode("文本值"); //创建指定的文本 <select>
<option>--请选择--</option>
<option>北京市</option>
<option>上海市</option>
</select> 14. Element对象的功能
节点1.appendChild(节点2); //把节点2添加到节点1中.
节点1.insertBefore(新节点, 旧节点); //把新节点插入到旧节点的前边. replaceChild();
removeChild(); 15. Element对象之: 常用属性
childNodes: //获取指定元素下所有的子节点
firstChild: //获取指定元素的 第一个子节点
lastChild: //获取指定元素的 最后一个子节点
parentNode: //获取指定元素的父节点
nodeName: //获取指定的节点名
nodeType: //获取指定的节点类型
nodeValue: //获取指定的节点值
js的简单介绍及基本用法的更多相关文章
- 【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP OpenUI5 (SA ...
- jQuery简单介绍及基本用法(选择器&DOM操作)
简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Le ...
- js数据类型简单介绍
JS数据类型 ECMAScript中有5种简单的数据类型:Undefined,Null,Boolean,Number,String.还有一种复杂的数据类型--Object(本质上是由一组无序的名值对组 ...
- SolidWorks的简单介绍及基本用法
写这博客的动机来源于构建之法微信群里面的的一位老师.sw是一个强大的机械设计制图软件,我记得大一的时候学制图学的3d软件是inventor,而后发现sw用起来更方便更高效,于是就自学了sw,由于是自学 ...
- vue之node.js的简单介绍
一.什么是node.js? 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 二.安装 1.node.js的特性: - 非阻塞IO模型 - ...
- js的简单介绍
1.js的介绍 js全称叫javascript,但不是java,他是一门前台语言,而java是后台语言. js的作者是布兰登艾奇. 前台语言:运行在客户端的 后台语言:跟数据库有关的. 2.能干什么? ...
- 前端框架VUE----node.js的简单介绍
一.什么是node.js? 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 二.安装 1.node.js的特性: - 非阻塞IO模型 - ...
- vue学习【第三篇】：vue之node.js的简单介绍
什么是node.js 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 安装node.js node.js的特性 - 非阻塞IO模型 - 时 ...
- vue之 node.js 的简单介绍
一.什么是 node.js? 它是可以运行在JavaScript的服务平台 二.安装 1.node.js的特性 - 非阻塞IO模型 - 时间驱动 2.运用场景 - 高并发低业务 - 实时场景 - 聊天 ...
随机推荐
- Intellij IDEA带参数启动Springboot注意事项
问题 不同版本的spring-boot-maven-plugin的jvm参数配置有所不同,同时与通过main方法启动springboot程序传递参数也有所不同. 分析 在运行main方法时,可以通过j ...
- 在C++中指针和引用传值区别
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...
- Windows Phone 8 Programming Considerations
OpenGL ES 2.0 Support Marmalade supports the Open GL ES 2.0 Graphics API on Windows Phone 8 using a ...
- MySQL FEDERATED 存储引擎的使用
FEDERATED 存储引擎描述 FEDERATED存储引擎能让你访问远程的MySQL数据库而不使用replication或cluster技术(类似于Oracle的dblink),使用FEDERATE ...
- [转]Socket编程中，阻塞与非阻塞的区别
阻塞:一般的I/O操作可以在新建的流中运用.在服务器回应前它等待客户端发送一个空白的行.当会话结束时,服务器关闭流和客户端socket.如果在队列中没有请示将会出现什么情况呢?那个方法将会等待一个的到 ...
- JSONP学习笔记
1. 实现跨域请求的三种方法 本地代理.Flash.Script标签(img,iframe,link也可以,具有src属性) 2. JSONP全称:JSON With Padding(使用内嵌的方式把 ...
- yarn 管理nextjs 项目
预备环境 nodejs npm 1. yarn 安装 npm install -g yarn 2. nextjs 项目初始化 yarn add next react react-dom 3. 配置n ...
- PADS Logic 脚本的 Fields 一个对象记录
PADS Logic 脚本的 Fields 一个对象记录 PADS Laogic 有一个非常棒的脚本功能,可以导出所以元件. 我目前是把脚本绑定到 Ctrl+S 上,在保存时自动导出 txt 文件,方 ...
- Hadoop体系结构之 Mapreduce
MR框架是由一个单独运行在主节点上的JobTracker和运行在每个集群从节点上的TaskTracker共同组成.主节点负责调度构成一个作业的所有任务,这些任务分布在不同的不同的从节点上.主节点监视它 ...
- iframe添加点击事件
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...