一、JavaScript 简介
1、介绍
- 是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。
- 脚本简单的说就是一条条的文字命令,并按照程序执行。
- Java Script 是一种弱数据类型,变量是没有固定数据类型的, 总之,你给变量一个什么值,它就是什么数据类型的变量。
- JavaScript 区分大小写
2、作用
核心客户端 JavaScript 语言包含一些常见的编程功能,允许您执行以下操作:
- 将有用的值存储在变量中。
- 对文本片段(在编程中称为“字符串”)的操作。
- 运行代码以响应网页上发生的某些事件。我们
click
在上面的示例中使用了一个事件来检测按钮何时被点击,然后运行更新文本标签的代码。- 建立在客户端 JavaScript 语言之上的功能,应用程序编程接口( API ) 提供了 JavaScript 代码中使用的额外超能力
3、添加Java Script 的三种方式
1、行内式:js代码写在标签中
2、内嵌式:js代码写在script标签中(即JavaScript 语句直接包含在HTML文件里)
3、外链式:js代码写在单独的js文件中,在页面中使用script标签引入之后就能使用里面的js代码了
4、JavaScript 注释
- 单行注释:// 快捷键: ctrl+/
- 多行注释:/**/ 快捷键: ctrl+shift+/
二、交互方式
- alert("内容") 弹出警示框
- prompt("参数1","参数2") 弹出输入框
- console.log() 控制台输出
- document.write("内容") 文档打印输出
三、变量:用于保存特定数据类型的容器
①声明变量
给变量声明的语法:var 变量名 = 初始值 || var a = x,b = y, c = z;(java中不行)
//语法
var num = 10;
②变量名的命名规范
- 变量命名必须以字母或者下标符号"_"或者"$"为开头。
- 变量名长度不能超过255个字符。
- 变量名中不允许使用空格。
- 不能使用脚本语言中保留的关键字及保留符号作为变量名。
- 变量名区分大小写。(jabascrip是区分大小写的语言)。
四 、数据类型
- 数值类型number:表示整数和浮点数(小数)值
- 字符串类型string:表示字符和字符串,可以使用单双引号表示
- 布尔型boolean:表示布尔值 true、false
- 未命名类型underfined:声明一个变量,没有赋值,结果就是这个
- null:失去引用的对象类型的值。 object引用类型
- NaN:not a number,常用于表示结果无法是一个数值
- 用 type of 测试数据类型:它返回值是一个字符串,该字符串说明运算数的类型
注意:
- 因为 type of 本身是运算符,不是函数,使用时没必要加个小括号
- 其它编程语言除以0都会导致错误,从而停止代码的执行。在 JavaScript 中,任何数值除以0都会返回NaN,不会影响其它代码的执行。
例:我们我们用中文去减去一个数字("你好吗" - 10 ) 此时得不到一个数字,就返回NaN.
五、操作符(运算符)
5.1 算术操作符
① 基本算术操作符 进行加、减、乘、除、取模(取余)等
对应的是: +, -, *, /, %
- +,两个数值进行过加法运算,有一个运算数是字符串,进行字符串的拼接操作
- 加法运算口诀:数值相加,字符相连
②一元操作符 自加、自减、正号、负号
对应的是: ++, -- , + , -
- 在进行算数运算符运算的时候,如果有运算数是字符串类型的数值,除了加法运算,其它的都能直接进行运算,结果是数值类型(NAN)。
5.2 比较操作符
<、>、>=、<=、!=、==、===、!==
== 和 ===有何区别?
- == 判断值是否相等
- === 判断值相等类型也相同
5.3、逻辑操作符
与(&&) 或(||) 非(!)
操作对象是布尔值,返回 true 或 false
5.4、赋值操作符
作用:将等号右边结果赋值给等号左边的变量。
赋值运算符另外的几个: += -= *= /= %=
5.5、逗号操作符
- 如果将来要申明多个变量,可以使用逗号操作符进行合并简写。
var a,b,c;
- 如果要给值则可以这么写:
var a = 10, b=10, c=10;
5.6、操作符优先表
六、javascript组成
1、ECMAScript:又ECMA组织指定语句,语法。它定义了脚本语言的所有属性、方法和对象。
2、BOM(broswer object model):浏览器对象模型
- ①弹出新的浏览器窗口
- ②移动、关闭浏览器窗口以及调整窗口大小
- ③提供用户屏幕分辨率详细信息的屏幕对象
3、DOM(document object model):文档对象模型
七、数据类型转换
7.1 转换为字符型
①使用运算符方法转换字符型(隐式转换)
字符串加数字,数字就会转成字符串。 + 加号
console.log(123 + ""); console.log(18 + "岁");
②String() 函数转换(显示转换)
语法:String(数值) --> 可以转换为字符型
7.2 转换为数值型
把字符型的数据转换为数值型。但是以下方式如果要转换的字符串中有一个不是有效数值的字符,返回NaN。
① 使用运算符方法转换数值型(隐式转换)
- 数字减字符串,字符串转成数字。乘,除等跟减的转换也是一样。都可以实现隐式数据类型转换。
② 利用Number() 数据类型转换 (显示转换)
- Number()可以把任意值转换成数值
- Number("123") 结果就是 数值型的 123
- Number("中国") 结果是 NaN
7.3 转换成布尔型
以下值转换布尔 | 结果为 |
false、undefined 、null、0、"" | false |
true、1、"somestring" | true |
①使用运算符方法转换布尔型(隐式转换)
- !! 使用这个符号就可以,转换为布尔型
- !!"123" // true
- !!1 // true
②利用Boolean() 数据类型转换 (显示转换)
- Boolean("123"); //返回true
八、条件语句
8.1 if条件语句
if(表达式) {
语句段1; ......
}else {
语句段2; .....
}
说明:
- 可以只使用if 省略else 。
- if 后面有小括号加表达式,而 else是没有的。
- 表达式里面可以是判断表达式语句或者是布尔值等。
- 如果if和else 里面只有一句执行的话,可以省略花括号,否则一定要加上花括号。 建议大家还事都带上花括号。
8.2 javascript 三元操作符
语法格式:
条件表达式 ? 结果1 : 结果2;
当满足条件时返回结果1否则返回结果2
8.3 switch case 多分支判断语句
switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
...
default:
剩余的代码;
注意:
- 每一个case的值必需互不相同,否则会出现互相矛盾的结果.
- 执行完一个case分支后,使流程跳出switch结构,即终止switch语句的执行。
- 可以用break语句来实现这个目的。最后一个语句可以不加break语句。
九、循环语句
9.1 for循环:将一段代码循环执行指定的次数
for (循环的初始; 循环的条件; 循环的增量){
需执行的代码;
}
9.2 while循环
while(条件表达式)
{ 语句集;
}
十、函数function
function 函数名() {
语句块;
}
<script type="text/javascript">
//函数等效于java中的方法
// 1.构造方法创建,使用较少
var fun1 = new Function("a","console.log(a)");
fun1(100)//调用函数
//2. 使用function关键字创建,无参无返回值函数
function fun2() {
console.log('fun2')
}
fun2()//调用函数
//3.创建有参无返回值函数
function fun3 (a,b) {
console.log(a + b)
}
fun3(10,20)//调用函数
//4.创建有参有返回值函数
function fun4 (a,b) {
return a + b;
}
var sum = fun4(10,10);//调用函数
console.log(sum)
//5.使用匿名函数创建
var fun5 = function () {
console.log('匿名函数')
}
fun5();//调用函数
</script>
- function 是小写,注意区分。
- 函数名是自己定义的名字。 比如 fun 、 myFun 等。
- 函数不调用, 自己是不执行的。
- 函数声明完毕之后, 需要调用函数,才会执行函数里面的语句块。
- 格式: 函数名();
- 在调用函数时,您可以向其传递值,这些值被称为参数。
- 这些参数可以在函数中使用。
- 您可以发送任意多的参数,由逗号 (,) 分隔:
- 核心: 就把形参看做是没有经过声明的变量就好了。
回调函数:我们会希望函数将值返回调用它的地方。
- 通过使用 return 语句就可以实现。
- 在使用 return 语句时,函数会停止执行,并返回指定的值。
- 在函数体内部用return定义返回值,一个函数只能有一个返回值。
十一、数组(Array)
①数组定义声明
两种方式:
- var arr = new Arrary();
- var arr = [];
②数组赋值或者修改
1.声明定义的时候直接给值。
- var arr = new Array("张三","李四");
- var arr = ["张三","李四"];
2. 先声明空数组,后给值。
- var arr = [];
- arr[0] = "张三";
arr[1] = "李四";
③数组访问
- 通过指定数组名以及索引号码,你可以访问某个特定的元素。
- 格式: 数组名[索引号]
④数组长度
- lenght(长度) 这个属性来检测数组的长度,就是里面有几个值
⑤数组遍历
var arr = ["张三","李四"]; for(var i = 0; i<= arr.length; i++) { console.log(arr[i]); }
⑥数组的方法
- push:向数组的末尾增加一项
- unshift:向数组开头增加一项
- pop:删除数组的末尾项
- shift:删除数组开头项
<script type="text/javascript">
//1.创建一个空集合
//var arr1 = new Array();
//var arr1 = [];
//2.创建一个有初始值的集合
//var arr1 = new Array(10,"hello",true);
var arr1 = [10,"hello",true];
//2.给数组赋值
// arr1[0] = 10;
// arr1[1] = 'hello';
// arr1[2] = true;
arr1[30] = NaN;
// console.log(arr1.length)
// console.log(arr1)
// for(var i = 0;i < arr1.length;i++){
// console.log(arr1[i])
// }
//向数组的末尾添加一个元素
arr1.push(false)
//向数组的开头添加一个元素
arr1.unshift("js")
//删除数组末尾的元素
arr1.pop();
//删除数组的第一个元素
arr1.shift()
console.log(arr1)
</script>
十二、对象Object
- 基本数据类型:string、number、boolearn、null、undefined
- 复杂数据类型(object):引用数据类型,是带有属性和方法的数据类型
- 使用构造函数创建对象
- 使用直接量创建对象,键值对形式 【属性名:属性值】
- 创建自己的构造函数
<script type="text/javascript">
//创建对象
// 1.使用构造函数创建对象
// var obj1 = new Object();
// obj1.name = "张三";
// obj1.age = 20;
// obj1.show = function () {
// console.log(this.name + ":" + this.age)
// }
//2.使用直接量创建对象
// var obj1 = {
// name: '李四',
// age: 30,
// show: function () {
// console.log(this.name + ":" + this.age)
// }
// };
// console.log(obj1)
// console.log(obj1.name)
// console.log(obj1.age)
// obj1.show();
// 3.创建自己的构造函数
function Student (name,age) {
this.name = name;
this.age = age;
this.show = function () {
console.log(this.name + ":" + this.age)
}
}
var student1 = new Student("admin",40);
console.log(student1)
console.log(student1.name)
console.log(student1.age)
student1.show();
</script>
十三、常用的对象方法
数学对象Math