Java Script

一、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; .....  
}

说明:

  1. 可以只使用if 省略else 。
  2. if 后面有小括号加表达式,而 else是没有的。
  3. 表达式里面可以是判断表达式语句或者是布尔值等。
  4. 如果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):引用数据类型,是带有属性和方法的数据类型
  1.  使用构造函数创建对象
  2. 使用直接量创建对象,键值对形式 【属性名:属性值】
  3. 创建自己的构造函数
<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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值