JavaScript学习笔记(一)--JS基础【入门必看】

JS介绍

JavaScript诞生于1995年,当时的主要目的是为了运行在浏览器中进行简单的表单验证。经过一系列的发展,现在的JavaScript既可以作为浏览器脚本语言,运行在浏览器进行表单验证、页面的局部更新(dom操作),浏览器的操作(bom操作);也可以作为服务器端语言,运行在node.js。

注意:在node.js中,不存在兼容性问题,因为node.js中压根就没有dom/bom,因此切记不要在node.js中执行任何dom和bom代码!!! 由于不存在兼容性问题,node.js可以大量发挥js高级标准——ES6,所以刚开始在学习基础语法的时候,更推荐大家在linux系统上的node.js环境下学习。

JS组成

组成部分作用提供者兼容性
ECMAScript5核心语法(Javascript标准)ECMA不存在(ES6的部分高级语法仍存在)
DOM(Document Object Model)文档对象模型(用来控制html / css 的代码)浏览器厂商存在
BOM(Browser Object Model)浏览器对象模型(用来控制浏览器的代码)浏览器厂商存在

JS与Java的区别

JavaScriptJava
数据类型弱类型语言强类型语言
定位基于对象和事件驱动的脚本语言完全面向对象的编程语言
执行方式解释性语言,执行前无需编译执行前必须编译为.class文件
联编方式动态联编静态联编

JS编译执行

在node.js中:

  1. 通过vi编辑 。(es5)
  2. 通过node.js来执行 。

在浏览器中:

  1. 通过vscode编辑。(es5、dom、bom)
  • 内嵌式:

理论上JavaScript代码可以写在HTML文档的任意位置,建议写在< body>结束标签之前。

<body>
	<script>
		alert("内嵌式")
	</script>
</body>
  • 链式:

单独新建一个后缀名为.js的JS文件,编写好HTML文件,在< head>标签中添加< script> 标签来导入JS文件。

<script src="js文件路径地址"></script>
  • 行内式:

直接写在开始标签里。

<button onclick="alert('提交成功!');">提交</button>
  1. 通过浏览器来执行。

注释

单行注释:

var a = 2;//单行注释

多行注释:

/*
  第一行注释
  第二行注释
*/
var a = 2;

变量

变量是一个值的容器,该容器的值可以随时改变。JavaScript的变量是弱类型 ,可以用来保存任何类型的数据。

弱类型语言的特点:

  1. 变量的数据类型在初始化的时候
  2. 变量的数据类型可以随时发生改变
  3. 类型细分不明显

变量的声明:

var

  • 变量可以重复声明,体现JS弱类型语言特点:变量的数据类型可以随时变化。
var a = 2;
var a = "hello world";
  • 变量声明会被提升(函数的声明也会),提升到所有代码执行之前。
console.log(a);
var a = 2;

执行这两句代码会输出undefined而不是报错。按理说应该是从上到下顺序执行,但是JS会在所有代码执行之前,进行预处理,会去寻找整个js代码中所有var的声明,并提升到所有代码执行之前。相当于以下代码:

var a;
console.log(a);
a = 2;
  • var声明的变量没有局部作用域,全局变量在 JavaScript 程序的任何地方都可以访问;函数内使用 var 声明的变量只能在函数内访问,如果不使用 var 则是全局变量。
function fun(){
   if(true){
      var a = 3;
      console.log(a); //输出:3 正常访问
   }
   console.log(a); //输出:3 变量a定义在函数内,函数内任意位置都可以访问
};
console.log(a); //会报错:函数外不能访问
fun();

let

let 声明的变量只在 let 命令所在的代码块{ }内有效。

{ 
    let a = 2;
}
// 这里不能访问a变量

const

const 声明一个只读的常量,一旦声明,常量的值就不能改变。

const GLOBAL = 10;

数据类型

基本数据类型:

JS中共有五种基本数据类型:Number,String,Boolean,Null,undefined。基本数据类型以类似键值对的形式保存在栈区。

number(数字类型)

数字有很多类型,按照数字精度可以分为整数(int),单精度(float),双精度(double ),按照数字的表示方法可以分为二进制(Binary),八进制(Octal),十进制(decimal system),十六进制(Hexadecimal)。但是在Js中,所有的数字统一使用Number来表示。(体现JS弱类型语言特点:类型细分不明显)

var a = 2;
var a = 2.1;
var a = 0X10;
var a = 010;
typeof a;	//类型检测,输出"number"

String(字符串类型)

String表示由零个或者多个16位Unicode字符组成的字符序列,即字符串。通常用单引号 / 双引号 / 反引号括起来,或者结合嵌套使用。

var a = "hello world";
var a = 'hello world';
var a = `
	<ul>
    	<li>terry</li>
        <li>larry</li>
        <li>tom</li>
        </ul>
`;     //反引号会打印出换行
var json = '{"name":"terry","age":12}';
//json字符串可以解析输出成对象,会有高亮显示
console.log(JSON.parse(json)); 

Boolean(布尔类型)

布尔类型,取值为true / false,通常用于条件判断。

var a = true;
var a = false;

Null(空类型)

空引用数据类型,当前变量为空对象,将来可能会保存一个对象。

var a = null;
typeof a;    //输出'object'

由于null不能调用对象的任何属性和方法,所以不把null归到对象里,用typeof检测a时,输出的结果是’object’,而不是’null’。

Undefined(未定义)

未定义类型只有一个值:undefined。对未声明和未初始化的变量执行typeof操作符都返回undefined。

var a;
var a = undefined;
引用数据类型(指针):

在JS中除了以上基本数据类型之外的其他所有类型都可以归结为引用数据类型。变量的引用地址保存在栈区,真正的值保存在堆区。

var a = {name:"terry",age:12};
var a = [18812344321,15912344321];
var a = function add(a,b){ 
    return a + b; 
};
var a = /[abc]def/i;
其他数据类型:

NaN (not a number)

var result = 10/'a'	            
console.log(result );			// NaN
console.log(isNaN(result));	    //true

Infinity、-Infinity(无穷大)

var result = 10/0;				//Infinity
var result = -10/0;				//-Infinity
console.log(isFinite(result));	//false

数据类型检测

typeof

typeof "hello world"           // 返回 "string"
typeof 3.14                    // 返回 "number"
typeof NaN                     // 返回 "number"
typeof false                   // 返回 "boolean"
typeof [1,2,3,4]               // 返回 "object"
typeof {name:'zevin', age:21}  // 返回 "object"
typeof new Date()              // 返回 "object"
typeof function () {}          // 返回 "function"
typeof a                       // 返回 "undefined" 
typeof null                    // 返回 "object"

isNaN

判断是不是数字,不是数字,即为NaN,输出true。

var a = 10/'a';
console.log(a); 		//输出:NaN
console.log(typeof a);  //输出:number
console.log(isNaN(a));  //输出:true

isFinite

判断是不是有效的数字,无穷就属于无效的数字。

var a = 10/0;
console.log(a); //输出:Infinity
console.log(typeof a); //输出:number
console.log(isFinite(a)); //输出:false

数据类型转换

–>数字类型

通常在dom中或者是从后端拿到的数据不是纯数字类型,但是需要进行数学运算,在运算之前要先转换为数字类型。

  • Number()
Number("123")  		// 123
Number("1.2222") 	// 1.2222
Number(null) 		// 0
Number('')  		// 0
Number('12asva')    // NaN
Number('zevin')     // NaN
  • parseInt()

parseInt() 函数可以将给定的字符串(string)以指定的基数(radix)解析为整数。语法为:parseInt(string,radix)。第二个参数(radix)表示使用什么进制进行解析,当不指定第二个参数时,会默认以十进制解析字符串。当然我们可以指定二进制,八进制或者十六进制等等。

pasrseInt("123")      // 123
pasrseInt("1.2222")   // 1
pasrseInt(null)       // NaN
pasrseInt('')         // NaN
parseInt("19",10);    // 19 
parseInt("11",2);     // 3
parseInt("17",8);     // 15 
parseInt("1f",16);    // 31 

parseInt() 函数解析string时,在遇到不能解析的字符时就返回已经解析的整数部分,如果第一个字符就不能解析,就直接返回NaN。

pasrseInt("abc123")   // NaN
pasrseInt("123abc")   // 123
pasrseInt(false)      // NaN
  • 一元加( + )运算符
+3  		// 3
+true  		// 1
+'2'  		// 1
+'a' 		// NaN
+null  		// 0
+undefined  // NaN
+[] 		// 0
+{} 		// NaN
  • 一元减( - )运算符
-3  		// -3
-true  		// -1
-'2'  		// -2
-'a'  		// NaN
-null  		// -0
-undefined  // NaN
-[] 		// -0
-{} 		// NaN

–>布尔类型

  • Boolean()
Boolean('zevin')     // true
Boolean(-123)        // true
Boolean(null)        // false
  • 非( ! )运算符
var a;     // undefined
!a         // true
!!'hello'  // true
!123       // false
!null      // true
  • if(exp1){ }(exp1 可以是任意数据类型,因为js在执行过程中会自动将其转换为布尔类型。)
if(obj != null){ }
if(obj){ }

–>字符串类型

  • String()
String(123)  	// '123'
String(false)   // 'false'
  • toString()
false.toString()  // 'false'
  • 加( + )算数运算符
123 + " "  		// '123'

如果加运算的操作数中出现了字符串,那么加运算就执行的是字符串拼接运算。所以,我们可以在其他数据类型后加上一个空的字符串,就可以把它转换成字符类型。

jQuery入门指南教程 这个指南是一个对jQuery库的说明,要求读者了解HTML(DOM)和CSS的一些常识。它括了一个简单的Hello World的例子,选择器和事件基础,AJAX、FX的用法,以及如何制作jQuery的插件。 这个指南括了很多代码,你可以copy它们,并试着修改它们,看看产生的效果。 内容提要 1.安装 2.Hello jQuery 3.Find me:使用选择器和事件 4.Rate me:使用AJAX 5.Animate me(让我生动起来):使用FX 6.Sort me(将我有序化):使用tablesorter插件(表格排序) 7.Plug me:制作您自己的插件 8.Next steps(下一步) 安装 一开始,我们需要一个jQuery的库,最新的下载可以到这里找到。这个指南提供一个基本含实例的供下载. 下载:jQuery Starterkit (译者Keel注:一定要下载这个,光看文章不实践肯定是不行的。) 下载后解压缩,然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件。(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开) 现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子. 本章的相关链接: •Starterkit •jQuery Downloads Hello jQuery 在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了: $(document).ready(function() { // do stuff when DOM is ready });放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert. $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); });这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。 (译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。) 让我们看一下这些修改是什么含义。$("a") 是一个jQuery选择器(selector),在这里,它选择所有的a标签(译者Keel注:即<a></a>),$号是 jQuery “类”(jQuery "class")的一个别称,因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法,它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法. 这里有一个拟行相似功能的代码: <a href="#" onclick="alert('Hello world')">Link</a>不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值