文章目录
前言
以下都是自己的一些学习笔记,可能有写的不对的地方,还望各位大佬体谅和加以指正。
JavaScript基本介绍
JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。
诞生于1995年,当时的主要目的是验证表单的数据是否合法。
JavaScript本来应该叫Livescript,但是在发布前夕,想搭上当时超热的java顺风车,临时把名字改为了JavaScript。(也就是说js跟java没有关系,当时只是想借助java的名气)。
javaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,等等。JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比如: Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。
常用于
修改html及css代码
验证表单
一、js的嵌入方法
内嵌式
理论上js可以写在任何第一个地方 但是一般写在head
标签里或者 body
下
<script type="application/javascript">
alert("内嵌式");
</script>
<script>alert("内嵌式");</script>
外链式
首先新建一个文件类型为.js的文件,然后在该文件中写js语句,通过script标签对引入到html页面中。
<script src="js文件路径地址">这里不能写js语句</script>
行内式
直接书写在标签身上,是一个简写的事件,所以又称之为事件属性。 onclick
单击事件
<input type="button" value="点我呀!" onclick="alert('xss');">
<button onclick="alert('xss');">点我呀!</button>
二、js简单语法
语句
在编程语言中,这些编程指令被称为语句。
- JavaScript 程序就是一系列的编程语句。 注释:在 HTML 中,JavaScript 程序由 web 浏览器执行。
- JavaScript 语句由以下构成: 值、运算符、表达式、关键词和注释。
- 用分号(
;
)分隔JavaScript语句。
注释
单行注释: // 注释语句
快捷键ctrl+/
多行注释: /* 注释语句 */
快捷键ctrl+shift+/
注意
:多行注释相互不能嵌套使用,只能在多行注释里面使用单行注释!
变量
变量是用于存储信息的"容器"
javascript单双引号没区别
定义变量需要使用关键字 var
var a=’hello world!’; // 定义一个a变量 并赋值为 hello world!
JavaScript 保留关键字
Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。
三、JavaScript 作用域
Javascrpt 局部变量
局部作用域 变量在函数内声明,变量为局部作用域。
// function 定义函数的关键字
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
JavaScript 全局变量
变量在函数外定义,即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
console.log(carName) // 控制台打印变量
// 函数内可调用 carName 变量
}
四、运算符
用于执行程序代码运算,会针对一个以上操作数来进行
算术运算符
+ - * / % ++ --
字符串拼接使用“+
”
比较运算符
<
>
==
!=
<=
>=
=== 全等于:将数值以及数据类型一并比较
!==不全等于:将数值以及数据类型一并比较
赋值运算符
=
+=
-=
*=
/=
%=
a=a+2; ==> a+=2
a=a-2; ==> a-=2
a=a*2; ==> a*=2
a=a/2; ==> a/=2
a=a%2; ==> a%=2
逻辑运算符
&& // 全真为真 等于python中的 and
|| // 一个为真就是真 等于python中的 or
! // 取反 等于python中的 !
五、JavaScript 数据类型
在js中有以下几种数据类型:
数值型
:number(凡是数字都是数值型,不区分整数和小数)字符串
:string(凡是引号包裹起来的内容全部都是字符串)布尔
:boolean(true、false)对象类型
:object(特殊取值null)未定义型
:undefined对象类型
: 数组 字典
JavaScript 如何判断数据类型
在JavaScript中可以使用函数 typeof()
判断数据类型
判断类型
var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};
alert(typeof a) ------------> string
alert(typeof b) ------------> number
alert(typeof c) ------------> object
alert(typeof d) ------------> object
alert(typeof e) ------------> function
alert(typeof f) ------------> function
数字类型(Number)
只有一种数字类型,数字 可以是小数 ,也可以的整数
以0
开头 默认使用8进制
来表示我的这个数字
以0x
开头 默认使用16进制
来表述我的这个数字
如果以-
开头 默认以负数
如果我带有e
:以科学计数法
来解析我的这个数字
parseInt(..) // 将某值转换成数字,不成功则NaN
parseFloat(..) // 将某值转换成浮点数,不成功则NaN
// 特殊值:
NaN,非数字。可使用 isNaN(num) 来判断。
Infinity,无穷大。可使用 isFinite(num) 来判断。
字符串型(string)
字符串是存储字符的变量,用来表示文本的数据类型,程序中的字符串是包含单引号/双引号的,由单引号来界定我双引号中包含的字符串
obj.length // 长度
obj.trim() // 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) // 返回字符串中的第n个字符
obj.concat(value, ...) // 拼接
obj.indexOf(substring,start) // 子序列位置
obj.lastIndexOf(substring,start) // 子序列位置
obj.substring(from, to) // 根据索引获取子序列
obj.slice(, end) // 切片
obj.toLowerCase() // 大写
obj.toUpperCase() // 小写
obj.split(delimiter, limit) // 分割
obj.search(regexp) // 从头开始匹配,返回匹配成功的第一个位置(g无效)
obj.match(regexp) // 全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
// javascript 中的 re 模块
obj.replace(regexp, replacement) // 替换,正则中有g则替换所有,否则只替换第一个匹配项,
$数字:匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$':位于匹配子串右侧的文本
$$:直接量$符号
布尔类型(boolean)
一般是用在流程控制语句中,字符串和数字类型都是无穷多个,然而我们的布尔数据类型只有两个:true
和 false
这两个个值一般用于说明某个事物是真或者假
js一般用布尔类型来比较所得到的结果
布尔类型仅包含真假,
== // 比较值相等
!= // 不等于
=== // 比较值和类型相等
!=== // 不等于
|| // 或
&& // 且
null(空)
null
关键字null
是一个特殊的值,它表示变量为空值,用来定义空的或者是不存在的引用。
如果试图去引用一个没有定义的值,就会返回一个null。
这里注意一点
:null并不等于"" 或者0
undefined(未定义)
这个值表示变量不含有值,没有定义的值,或者被定义了一个不存在的属性值
!null
和undefined
区别:
null
它表示一个变量被赋予一个空值,而undefined
是表示变量还没有被赋值
六、JavaScript 数组
- 数组内可以存放任意数据类型的数据(本质上它也是对象)
- 数组元素不赋值的情况下 值为undefined
- 如果数组打印的时候,元素不赋值""
- 访问数组范围之外的元素,不会出现越界的问题,undefined
- 定义数组大小,照样可以添加更多元素
定义数组的方法:
var arr=[] //定义一个空数组
//定义的同时赋值
var arr=[10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"]];
//定义一个空数组
var arr=new Array();
//定义的同时赋值
var arr = new Array(10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"])
//定义一个长度为10的数组
var arr=new Array(10)//定义一个长度为10的数组
数组的操作
obj.length() // 数组的大小
obj.push(ele) // 尾部追加元素
obj.pop() // 尾部获取一个元素
obj.unshift(ele) // 头部插入元素
obj.shift() // 头部移除元素
obj.splice(start, deleteCount, value, ...) // 插入、删除或替换数组的元素
obj.splice(n,0,val) // 指定位置插入元素
obj.splice(n,1,val) // 指定位置替换元素
obj.splice(n,1) // 指定位置删除元素
obj.slice( ) // 切片
obj.reverse( ) // 反转
obj.join(sep) // 将数组元素连接起来以构建一个字符串
obj.concat(val,..) // 连接数组
obj.sort( ) // 对数组元素进行排序
七、JavaScript 字典
Tips
:JavaScript 中的字典同 python 中的字典大同小异
字典
字典 是一种以键-值对形式存储数据的数据结构
var dict = {'k1':"moonsec",'k2':'moon','age':18};
// 输出字典元素
for(var item in dict){
console.log(dict[item]);
}
// 获取指定元素
dict['age'] 获取key为age的元素
// 赋值
dict['age']=10
// 删除元素
delete dict['one'];
delete dict.age;
八、JavaScript 流程控制语句 if 语句
if语句
if(条件){
函数体
}
if else语句
if(条件){
函数体1
}else{
函数体2
}
例如:
var num = 10;
if (num > 2){
console.log('num > 2');
}else{
console.log('num < 2');
}
if…else if…else 语句
if(条件1){
}else if(条件2){
}else if(条件n){
}else{
}
例如:
var number = 1;
if (number == 1){
console.log('number = 1')
}else if (number == 2){
console.log('number = 2')
}else if (number == 3){
console.log('number = 3')
}else{
console.log('number > 3 or number < 1')
}
switch语句:多分支语句
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
例如:
// new 一个时间的对象
// getDay() 获取当前星期X(0-6,0代表星期天)
switch (new Date().getDay()) {
case 6:
text = "今天是周六";
break;
case 0:
text = "今天是周日";
break;
default:
text = "期待周末~";
}
九、JavaScript 循环结构
while 循环
while
循环:先判断条件 当条件成立 再执行
while(循环成立条件){
....
}
do…while 循环
do...while
循环:不论条件成不成立 先执行一遍 再判断
do{
.....
}while(循环成立条件)
for 循环
// 打印1-99
for (var i = 1;i < 100;i++){
console.log(i);
}
for…in 循环
// 遍历一个列表并打印
var list = ['tom', '今年', 19, '正在学习', 'JavaScript'];
for (item in list){
console.log(list[item]) // list 使用索引获取值
}
注意:JavaScript 中的 for 循环遍历出来的值是 索引
总结
总体来说,学过一门计算机语言学习JavaScript 还是比较简单的,但是想要深入了解还是需要时间的累计。
我们在下一章会学习 JavaScript 中的面向对象,时间,js的序列化,时间以及原型。