js基础(一)
JavaScript起源:
借鉴java的管理机制,c的函数,最开始交Mocha,后改为LiveScript,当时java特别火,和sun公司合作以后改名为JavaScript。(与java毫无关系)
ECMA:欧洲计算机制造商协会
- ECMAScript1.0 :制定了js语法标准。
- ECMAScript10 :最新版本
- ECMAScript5.0、ECMAScript6.0 常用版本
JavaScript简介
JavaScript是基于对象和事件驱动的解释性脚本语言
- 基于对象:js是一种基于对象的语言,这意味着它能运用自己已经创建的对象。
- 事件驱动:JavaScript可以直接对用户或者克服输入作出响应,无需经过web服务器,它对用户的响应,以事件驱动的方式进行。
- 解释性:浏览器可以直接识别和解析js代码。
编译性:C、C++(高级语法),计算机只能识别机器语言(0、1) 编译成能够识别的二进制代码。 解释性:JavaScript、php,可以直接被浏览器识别执行,一行一行执行
JavaScript兼容性好,可以跨平台。
JavaScript的组成:
- ECMAScript:指定JavaScript语法标准。
- DOM:Document Object Model 文档对象模型
- BOM:Browser Object Model 浏览器对象模型
JavaScript与ECMAScript的关系? ECMAScript是JavaScript的语法标准。 JavaScript是ECMAScript的具体体现。
js的编写位置:
- 标签的属性中(不推荐)
- 可以将js代码编写到标签的onclick属性中。当我们点击按钮时,才会执行!
- 可以将js代码写在超链接的href属性中,点击超链接时,会执行js代码 script标签中。
- 编写到外部js文件中,然后引入。(推荐) 写到外部文件中可以在不同的页面中引用,也可以利用浏览器的缓存机制。
所有的js代码都要写在< script>标签中。
可以引入多个script标签。他们之间顺序执行。
JavaScript三种引入方式:
- 行内引入:在html开始标签中引入:
<div onclick = "alert('点击了')"> </div>
- 内部引入:在script标签中写js代码:
<script>alert(1)</script>
- 外部引入(常用):通过script标签的src属性引入js文件到html中:
<script src = 'index.js'></script>
【注】如果当前script标签作用引入外部文件,那么这个script标签中,就不能在写代码了。可以创建新的script标签来写外部代码。
如果想要输出文本内容为,不能直接写 document.write("");正确写法:
- < 代替“<”
- > 代替“>”
注释快捷键 :
单行注释 Ctrl+/ 多行注释Ctrl+shift+/
小栗子:
<script>
alert("hello world"); //在页面弹出警告框
document.write("hello world!!"); //在当前文本进行输出
document.write("</script>");
console.log("hello"); //向控制台输出
</script>
js基本语法
- js严格区分大小写
- js中每条语句以分号结尾
- js会自动忽略多个空格和换行
概念:
- 字面量,一些不可改变的值,都可以直接使用(一般不会直接使用,比较麻烦)2r7325291ur
- 变量,可以保存字面量,值可以任意改变(常用) x = 2r7325291ur 在js中使用var关键字声明变量。 var a = 10000;
- 标识符,在js中可以由我们自主命名的都可以称为标识符。(如变量名、函数名、属性名)。
- 命名规则:可以含有字母、数字、下划线、$。
- 不能以数字开头。
- 不能是js中的关键字或者保留字。
- 采用驼峰命名 如:helloWorld。
- js底层保存标识符时采用Unicode编码。
关键字和保留字
块作用域
块: {} let: 使用 let 关键词声明拥有块作用域的变量。
- 在块内声明的变量无法从块外访问
- let不允许多次声明同一个变量
{
let x = 6; //把6赋值给x
}
例如在循环中使用let:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
let i = 5;
for (let i = 0; i < 10; i++) {
document.write(i+" ");
// 输出为0 1 2 3 4 5 6 7 8 9
}
document.getElementById("demo").innerHTML = i;
// 输出为 5,因为在循环中用 let 声明了变量 i,那么只有在循环内,变量 i 才是可见的
</script>
</body>
</html>
数据类型
6种数据类型:
- String 字符串
- Number 数值
- Boolean 布尔值
- Null 空
- Undefined 未定义 以上是基本数据类型。
- Object 对象
- function 函数
- array 数组 这是引用数据类型。 == 注意:与java不同的是,js是弱数据类型,即到底是什么数据类型赋值后才知道==
下面介绍一下这些数据类型:
一、String:
- 使用字符串必须用引号引起来。
- 单引号双引号都可。
- 双引号里可以放单引号,但是同类型不能嵌套。
- 在字符串中,可以使用 \ 作为转义字符,当输出一些特殊符号需要转义时使用。
模板字符串:
- 用于拼接字符串和变量。
- 内容拼接变量时,用 ${} 包住变量。
let nAme = "崔皓月"
document.write(`大家好,我叫${nAme}`)
二、Number:
- 整数和小数都可以使用。
- 可以使用运算符typeof来检测变量类型。
- 语法:typeof 变量
- 例如:
var a = 123;
var b = "123";
console.log(typeof a);
结果如下:
- 表示数字的最值:
- 最大值:Number.MAX_VALUE,如果超过了这个最大值,返回Infinity(正无穷,也是字面量)。
- 最小值:Number.MIN_VALUE,大于0的最小值。
- NaN 是一个特殊的数字,表示Not A Number。
- js中整数的运算基本可以保证精确。
- 如果使用js进行浮点数运算,可能不精确。
三、Boolean:
- 只有两个值:true、flase,主要做逻辑判断。
四、Null:
- 只有一个值:null,专门用来表示为空的对象。
五、Undefined:
- 只有一个值:undefined:当声明变量,但是不给变量赋值时,他就是undefined。
强制类型转换
隐式转换:
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
- +号两边只要有一个是字符串,都会把另外一个转成字符串。
- 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型。
显示转换
一、其他类型转换为String:
- 调用被转换类型的toStirng()方法。
var c = 12345;
c = c.toString();
console.log(typeof c);
- 调用String()函数,并将被转换的数据作为参数传递给函数。
var a = 123;
a = String(a);
console.log(typeof a);
- 对于Number和Boolean,实际上就是调用的toString()方法。
- 对于Null和Undefined,直接转换。
二、将其他类型转化为Number:
- 使用Number()函数
字符串—>数字
- 如果是纯数字的字符串,则直接转换。
- 如果含有非数字内容,则转换NaN。
- 如果是空串或者是一个全是空格的串,则转换为0。
布尔—>数字
- true转成1
- false转成0
null—>数字
- 0
Undefined—>数字
- NaN
- 这种方式专门用来对付字符串。
parseInt()把一个字符串转换为一个整数。(把一个字符串中的有效整数取出来然后转化为Number。)
parseFloat()把一个字符串转换成浮点型。(把一个字符串中的有效浮点数取出来然后转化为Number。)
ps.如果对非String使用,它会先将其转化为String然后操作。
三、转化为其他进制
在js中,如果需要表示16进制数字,需要以0x开头。 如果需要表示8进制数字,则以0开头。 徐耀表示2进制数字,则以0b开头。
对于字符串,可以再parseInt中传递一个第二个参数值,来指定数字的进制。 如
a = "070"; parseInt(a,10);
四、将其他类型转化为Boolean
- 使用Boolean()函数。
- 数字—>布尔
- 除了0和NaN,其余都是true。
- 字符串—>布尔
- 除了空串,其余全是true。
- null—>布尔
- false
- undefined—>布尔
- false
- 对象—>布尔
- true
- 隐式类型转换。
- 可以为一个任意数据取两次反,来将其转化为布尔值。 如:
var a = "hello";
a = !!a;//true
运算符
运算符也叫操作符,可以对一个或多个值进行运算。
- typeof就是运算符,可以来获得一个值的类型,并将该值的类型以字符串形式返回
算术运算符:
(对非Number类型的值进行运算是,会将这些值转换为Number,然后再运算。 true = 1;false = 0;null = 0;NaN = NaN )
- +:
- 可以对两个值进行加法运算,并将结果返回。
- 任何数与NaN相加,都是NaN。
- 两个字符串相加,拼接起来。
- 由于双引号是不能换行的,当写一些比较长的字符串时,可以用加号进行拼串。
- 任何值和字符串做加法,都会转化为字符串,然后拼接。
- 我们可以利用这一特点,将任意一个字符串转化为String。只需要为任意的数据类型 + “”(空串)。实际上它也是调用String()函数。 如:
var c = 123;
c = c+"";
console.log(c);
console.log(typeof c);
- -:
- 可以对两个值进行减法运算。
- 与字符串操作,把字符串转化为Number。
- *:
- 可以对两个值进行乘法运算。
- 与字符串操作,把字符串转化为Number。
- /:
- 可以对两个值进行除法运算。
- 与字符串操作,把字符串转化为Number。
- 任何值做- * /时都会自动转为Number,我们可以利用这一特点做隐式类型转换。
- %:
- 取模运算(取余数)
- 一元运算符,只需要一个操作数。 1. +:正号(不会对数字产生影响) 2. -:负号(可以对数字进行符号取反) 3. 对于非Number值,它会将其先转化为Number再计算。 4. 可以对一个其他任意数据类型使用+,将其转化为Number。
- 赋值运算符
=:可以将符号右侧的值赋值给符号左侧的值。
- +=
- -=
- *-
- /=
- %=
自增自减
- 自增:(++)
- 可以使变量在自身的基础上+1;
- 自增分为两种:后++(i ++),前++(++ i),无论是i++还是++i,都会立即使原变量值增加1。
- 不同的是i++和++i的值不同。i++的值等于原变量的值(原值),++i的值等于原变量自增后的值(新值)。
var c = 10;
console.log(c++);//此时原值是10。
c++;
console.log(c++);//调了两次c++,此时原值是12。
例子:
var c = 10;
var sum = c++ + ++c + c;
//10 + 12 + 12 = 34
console.log(sum);
- 自减:(–)
- 在自身基础上减一。
- 自减分两种,后–和前–。无论是i–还是–i,都会立即使原变量值减1。
- 不同的是i–和--i的值不同。i–的值等于原变量的值(原值),–i的值等于原变量自减后的值(新值)。
逻辑运算符
- !:非;
- !可以用来对一个值进行非运算。
- 所谓非运算就是对一个布尔值进行取反。
- 进行两次取反不会变化。
- 如果对非布尔值进行取反,现将其变为布尔值,再进行运算。
- 可以为一个任意数据取两次反,来将其转化为布尔值,原理和Boolean()一样。
- &&:与;
- 可以对符号两侧的值进行与运算,并返回结果。
- 如果两个值都是true,返回true。只要有一个false,就返回false。
- js中的与属于短路的与。第一个值是false,则不会检查第二个值。
- 对于非布尔值进行与运算时,会先将其转化为布尔值,然后进行计算。注意:返回的是原值。
- 如果第一个值是true,则直接返回第二个。
- 如果第一个值是false,则返回第一个。
- | |:或;
- 可以对符号两侧的值进行或运算,并返回结果。
- 只要有一个true,就返回true。
- js中的与属于短路的或。第一个值是true,则不会检查第二个值。
- 对于非布尔值进行或运算时,会先将其转化为布尔值,然后进行计算。注意:返回的是原值。
- 如果第一个值是true,则直接返回第一个。
- 如果第一个值是false,则返回第二个。
赋值运算符
符号:=,+=,-=,*=,/=,%= 将等号右侧的值赋给左侧。
数组
语法: 数组用方括号书写: 数组下标从0开始
let 数组名 = [数据1 , 数据2 , ...]
创建一个空数组:
var points = [];
例如
var cars = ["Porsche", "Volvo", "BMW"];
document.write(cars[0]);
// 访问数组中的某一元素 例如Porsche
document.write(cars);
//访问整个数组
数组是一种特殊类型的对象。 数组的属性和方法:
var x = cars.length; // length 属性返回元素的数量
var y = cars.sort(); // sort() 方法对数组进行排序
遍历数组元素: 1. 使用for循环(⭐)
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
- 使用array.foreach()函数
function myFunction(value) {
text += "<li>" + value + "</li>";
}
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
增加元素: 1. 使用push方法
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction() {
fruits.push("Lemon");
document.getElementById("demo").innerHTML = fruits;
}
- 使用fruits[fruits.length] = “值” 方法
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";
注意:JavaScript 不支持命名索引的数组。在 JavaScript 中,数组只能使用数字索引 例如:可以array[0] = “apple”,但是不可以 array[“foot”] = “apple”
数组和对象的区别: 1. 数组使用数字索引。 2. 对象使用命名索引。
如果希望元素名为字符串(文本)则应该使用对象。
如果希望元素名为数字则应该使用数组。
相关文章
- js匿名函数和立即执行函数[通俗易懂]
- js事件基础
- 【说站】js中闭包如何理解
- Js排序算法_js 排序算法
- 如何写一个 JS 运行时
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- 【学习笔记】黑马程序员Node.js全套入门教程 | 基础篇
- WKWebView接入PDF.js过程记录处理总结
- JS基础(四)
- JS动态引入js、CSS动态创建script/link/style标签详解编程语言
- 使用 JS 操作 Redis:实现强大数据存储.(js调用redis)
- 使用JS技术实现Oracle数据库链接(js 链接 oracle)
- JavaScript探索之旅掌握Oracle和JS的完美融合(js与oracle)
- 动态加载js的几种方法
- javascript语法基础想学习js的朋友可以看看
- js使用form表单select类实现级联菜单效果
- 为高负载网络优化Nginx和Node.js的方法
- jquery与js函数冲突的两种解决方法
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- js对象基础实例分析
- js动态修改css文件的方法