day02_js学习笔记_01_js的简介、js的基本语法
============================================================================= ============================================================================= 涉及到的知识点有： 一、js的简介 1、js是什么? 2、js能做什么? 3、js历史及组成 4、js被引入的方式 (1)内嵌脚本 (2)内部脚本 (3)外部脚本 二、js的基本语法 1、变量（js是弱类型的语言） 2、原始(基本)数据类型（java中叫基本数据类型） 3、引用数据类型 4、运算符 (1) 赋值运算符 (2) 算术运算符 (3) 逻辑运算符（js中只有双与和双或） (4) 比较运算符（关系运算符） (5) 三元运算符（三目运算符） (6) void运算符 (7) 类型运算符 5、逻辑语句 (1) if else (2) switch (3) 普通for循环 (4) 增强for in循环 ============================================================================= ============================================================================= day02_js学习笔记_01_js的简介、js的基本语法 ----------------------------------------------------------------------------- 一、js的简介 1、js是什么? JavaScript 是因特网上最流行的脚本语言，它存在于全世界所有 Web 浏览器中，能够增强用户与 Web 站点和 Web 应用程序之间的交互。 脚本语言：脚本语言又被称为扩建的语言，或者动态语言，是一种解释型语言，由解释器来运行，用来控制软件应用程序，脚本通常以文本保存，只在被调用时进行解释或编译。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 js是可以嵌入到html中，是 基于对象 和 事件驱动 的 脚本语言(解释型语言)。 Java属于编译型语言。 js是基于对象的，即js把什么都看成对象。 Java是面向对象的，即java大多在描述对象。 js的特点： (1) 交互性：信息的动态交互 (2) 安全性：js不能访问本地磁盘 (3) 跨平台：浏览器中都具备js解析器(只要是可以解析js的浏览器都可以执行，和平台无关) 2、js能做什么? (1) js能动态的修改(和增删)html和css的代码，即可以改变html内容、改变html样式。 (2) js能动态的校验数据，即进行验证输入。 3、js历史及组成 ECMAScript标准 BOM(浏览器对象模型) DOM(文档对象模型) 4、js被引入的方式 (1)内嵌脚本 <input type="button" value="button" onclick="alert('xxx')" /> <!--alert"弹框" "提醒框" "警告框"--> (2)内部脚本 <head> <script type="text/javascript"> alert("xxx"); </script> </head> <body> <input type="button" value="button" /> </body> (3)外部脚本 首先创建一个js文件，其次在html中引入。 <script type="text/javascript" src="demo1.js"></script> js代码放在哪呢？ 放在哪都行，但是在不影响html功能的前提下，越晚加载越好(网站优化时) 有一种情况是需要必须在前面加载(即页面一加载就需要执行js代码时) 比如：二级联动，当页面一加载时，需要在js中使用Ajax的东西。去刷新，去访问数据库的时候。 ----------------------------------------------------------------------------- 二、js的基本语法 1、变量（js是弱类型的语言） (1) 用var，var什么都行 var x = 5; x = 'javascript'; // 注意：js中单引号与双引号是一样的 var y = "hello"; var b = true; (2) 不用var和分号也行 x = 5; x = 5 2、原始(基本)数据类型（java中叫基本数据类型） (1) number 数字类型 (2) boolean 布尔类型 (3) string 字符串类型 (4) null 空类型（null属于object类型。注意：原始(基本)数据类型怎么还属于object类型呢？答：这是js一直沿用的一个错误） (5) underfind 未定义类型 注意： 1、原始(基本)数据类型怎么可以调用方法呢？ 答：因为number、boolean、string是伪对象，可以调用方法。（相当于java中的自动装箱/拆箱） -------------------------------------- 原始(基本)数据类型之间的转换： number\boolean类型转成string类型 伪对象名.toString() 示例： alert(k); // 什么都没有弹出来 alert(typeof k); // underfind alert(typeof(k)); // underfind typeof以上这两种写法，效果一样，常用第二种写法 var x = 5; var b = true; var n = null; alert(typeof x.toString()); // string alert(typeof b.toString()); // string alert(typeof(n)); // object -------------------------------------- string\boolean类型转成number类型 parseInt() // 传入参数 parseFloat() // 传入参数 注意： 1、boolean类型不能通过上面两种方式转为number类型。 2、string类型可以将数字字符串转换成number类型，例如："123a3sd5"则转成123。 示例： var b = true; var s = "123x44xx"; alert(parseInt(b)); // NuN（not a number） alert(parseFloat(b)); // NuN（not a number） alert(parseInt(s)); // 123 alert(parseFloat(s)); // 123 -------------------------------------- 强制类型转换 Boolean() // 传入参数，强转成布尔类型 数字类型强转成布尔类型时 非零就是true 零就是false 字符串类型强转成布尔类型时 非空字符串就是true 空字符串("")就是false 示例： var b = 123; alert(Boolean(b)); // true b = -1; alert(Boolean(b)); // true b = 0; alert(Boolean(b)); // false b = "hello"; alert(Boolean(b)); // true b = " "; alert(Boolean(b)); // true b = ""; alert(Boolean(b)); // false -------------------------------------- Number() // 传入参数，强转成数字类型 布尔类型转数字类型 true转成1 false转成0 字符串类型转数字类型 不能强转 示例： var b = true; alert(Number(b)); // 1 b = false; alert(Number(b)); // 0 var s = "123ss"; alert(Number(s)); // NaN -------------------------------------- String() // 传入参数，强转为字符串类型 注意：将number\boolean类型转成string类型，已经有了 对象名.toString()方法了，一般不用该类的构造方法了。 示例： var b = true; alert(String(b)); // true b = false; alert(String(b)); // false b = 5; alert(String(b)); // 5 -------------------------------------- 3、引用数据类型 在java中: Object obj = new Object(); 在js中: var obj = new Object(); var num = new Number(); var str = new String(); 示例： var obj = new Object(); alert(typeof obj); // object var num = new Number(); alert(typeof num); // object var str = new String(); alert(typeof str); // object -------------------------------------- 4、运算符 (1) 赋值运算符 var x = 5; (2) 算术运算符 + - * / % +: 遇到字符串变成连接 -：先把字符串转成数字然后进行运算 *: 先把字符串转成数字然后进行运算 /: 先把字符串转成数字然后进行运算 示例： var x = "5"; var y = "12"; alert(x + y); // 512 alert(y - x); // 7 alert(x * y); // 60 alert(y / x); // 2.4 alert(1213 / 100 * 100); // 1213 java中为1200 (3) 逻辑运算符（js中只有双与和双或） && || (4) 比较运算符（关系运算符） < > >= <= != ==等于：只有值相等 ===全等：类型与值都要相等 示例： var a = 10; var b = "10"; alert(a == b); // true alert(a === b); // false alert(3 < 2 ? "大于" : "小于"); (5) 三元运算符（三目运算符） (6) void运算符 <a href="javascript:void(0);">xxx</a> 代表不让跳转（不会重新刷新页面） <a href="#">xxx</a> 代表跳转至本页面（会重新刷新页面） (7) 类型运算符 typeof 判断数据类型，返回相应的数据类型 instanceof 判断数据类型，判断是否是某种类型，返回的是布尔类型 示例： var obj = new Object(); alert(typeof obj); // object alert(obj instanceof Object); // true -------------------------------------- 5、逻辑语句 (1) if else // 注意条件:数字非0 和 字符串非空都是true if (9) { alert("true--"); } else { alert("false--"); } (2) switch var x = "java"; switch (x) { case "css": alert("css"); break; case "js": alert("js"); break; case "java": alert("java"); break; default: alert("def"); } (3) 普通for循环 var arr = [ 1, 3, 5, 7, "js" ]; for (var i = 0; i < arr.length; i++) { // index代表角标 alert(arr[i]); } (4) 增强for in循环 var arr = [ 1, 3, 5, 7, "js" ]; for (index in arr) { // index代表角标 alert(arr[index]); } 注意：java中的普通for循环与增强for循环 int[] arr = { 1, 2, 3, 4, 5 }; // 普通for循环 for (int x = 0; x < arr.length; x++) { System.out.println(arr[x]); } System.out.println("---------------"); // 增强for循环 for (int x : arr) { System.out.println(x); } =============================================================================
我的GitHub地址： https://github.com/heizemingjun
我的博客园地址： http://www.cnblogs.com/chenmingjun
我的蚂蚁笔记博客地址： http://blog.leanote.com/chenmingjun
Copyright ©2018 黑泽明军
【转载文章务必保留出处和署名，谢谢！】
