js-day01-js语言基础

2023-07-23 22:55:34

JavaScript简介:
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。Node.js。
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
组成部分:
JavaScript 的内容，包含以下三部分：
ECMAScript（核心）：JavaScript 语言基础(规定了 JavaScript 脚本的核心语法，如数据类型、关键字、保留字、运算符、对象和语句等，它不属于任何浏览器。)；
DOM（文档对象模型）：规定了访问HTML和XML的接口(提供了访问 HTML 文档（如body、form、div、textarea等）的途径以及操作方法)；
BOM（浏览器对象模型）：提供了独立于内容在浏览器窗口之间进行交互的对象和方法(提供了访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）的途径以及操作方法)。
基本特点:
是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
日常用途:
嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
控制cookies，包括创建和修改等。

JavaScript存在的位置:

方式1: 在<html>标签中,任何地方添加<script></script>标签.标签中内容就是js代码. 虽然可以放在页面的任何地方,但是规范放在<head>标签中.

    <!-- 方式一:直接存在html页面中 -->

    <script type="text/javascript">

    //这段代码在加载页面的时候就执行

        alert(123);

    </script>

方式2:单独使用一个文件来编写javascript代码(js文件),在需要使用的页面中引入该文件.

    <!-- 方式二:在一个单独的js文件中编写JavaScript代码,然后再引入 -->

    <!-- 引入js文件 -->

    <script type="text/javascript" src="index2.js"></script>

方式3:把代码编写的a标签的href属性中,点击a标签的时候,就执行里面代码.

    小天

    <a href="javascript:alert(234);">松鼠</a>

ECMAScript(JS基本语法):

基本语法(大多数和Java一样):
JavaScript中的标识符:
　　变量，常量，函数，语句块也有名字，我们统统称之为标识符。标识符可以由任意顺序的大小写字母、数字、下划线(_)和美元符号($)组成，标识符不能以数字开头，不能是JavaScript中的保留字或关键字(和Java一样)。
　　合法的标识符举例：indentifier、username、user_name、_userName、$username
　　非法的标识符举例：int、98.3、Hello World
JavaScript严格区分大小写.
　　username和userName是两个完全不同的符号
JavaScript程序代码的格式
　　每条功能执行语句的最后必须用分号(;)结束，每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开。
语句块使用{}来表示
JavaScript程序的注释
　　/*…*/中可以嵌套“//”注释，但不能嵌套“ /*…*/”。、/**..文档注释.*/

定义变量:
什么是变量，系统为之设置一个标识，程序可以用变量名来指向具体的对象内存，并通过变量名来获得对应的对象值。
声明变量要使用var关键字
　　例如：var name;//一般不使用name作为变量名
声明变量的同时为其赋值
　　例如：var name = "will";
对已赋值的变量赋予一个其他类型的数据
　　例如：name = 17;
不事先声明变量而直接使用,报错 not defined.(未定义)
　　例如：x = 1234;
　提示：javascript定义变量无需指定类型，任何类型都使用var声明,感觉var就有点类型于java中的Object类型了

//定义变量,使用var关键字,切忌使用String、int等

var msg;

//给变量赋值

msg = "Asuna";

//打印变量的值

//弹窗打印

alert(msg);

//在控制台打印

console.debug(msg);

console.debug(typeof msg);//打印msg的真实类型

msg = 17;

alert(msg);

console.debug(msg);

console.debug(typeof msg);//打印msg的真实类型

console.debug("===================")

console.debug(17 == "17");//true

console.debug(17 === "17");//false

变量的打印:
　　方式1:使用alert(内容);
　　方式2:使用console.debug(内容); 注意:只有W3C的浏览器才支持(IE不行),Firebug中,Google的控制台.
　　　　好比System.out.println(内容);

JS的基本类型和常量:
Number(数字类型)
1、整型常量(10进制\8进制\16进制)
　　十六进制以0x或0X开头，例如：0x8a。
　　八进制必须以0开头，例如：0123。
　　十进制的第一位不能是0（数字0除外），例如：123。
２、实型常量
　　12.32、193.98、 5E7、4e5等。
特殊数值：NaN(Not a Number)、Infinity(除数为零)，所对应的判断函数isNaN()、isFinite()
Boolean(布尔值) true和false。
String字符串(注意js中没有char类型，所有'a'也是一个字符串)
　　“a book of JavaScript”、‘a’、 “a”、“”。
　　字符串中的特殊字符，需要以反斜杠（\）后跟一个普通字符来表示。
null常量:表示引用任何的内存空间.
undefined常量 (未定义,定义未赋值)

var age1 = 17;//字面量(开发中推荐使用)

console.debug(age1);

console.debug(age1 instanceof Number);//false

age2 = new Number(17);//面向对象设计

console.debug(age2);

console.debug(age2 instanceof Number);//true

JS中的运算符和Java中大多数相同:
算术运算符
赋值运算符
比较运算符
逻辑运算符
三元运算符
位运算符
------------------------------------------------
JS中特殊存在的案例:
第一个不同:
在JS中,比较相等的运算符: ==,===.
问题:=和==以及===的区别:
= : 和Java相同,用于给变量赋值.
== : 用来比较变量或者常量的内容,不管数据类型.
===: 比较数据类型和内容,若数据类型相同,且内容相同返回true.
console.debug(17 == "17");//true
console.debug(17 === "17");//false
第二个不同:
在逻辑运算中，0、""、false、null、undefined、NaN均表示false。
----------------------------------------------------------------------------------
a && b : 将a, b转换为Boolean类型, 再执行逻辑与, 若表达式结果为true返回b, false返回a
a || b : 将a, b转换为Boolean类型, 再执行逻辑或, 若表达式结果为true返回a, false返回b
---------------------------------------------------------------------------------
&& 和|| 运算符的区别(开关)：
&&操作:返回最后一个为true的值,或者第一个为false的值.
||操作:返回第一个为true的值,或则最后一个为false的值.

console.debug(true && true)　//true

console.debug(1 && true)　//true

console.debug(1 && 2)　//

console.debug("A" && 2)　//

console.debug("" && 2)　//""

console.debug(null && "B")　//null

console.debug("A" && "B")　//"B"

console.debug(1 && 2 && 3)　//

console.debug(1 && null && 3)　//null

console.debug("" && null && 0)　//""

函数(function):

函数的作用
　　1):将脚本编写为函数，就可以避免页面载入时执行该脚本。
　　2):函数包含着一些代码，这些代码可以多次被调用。

函数的定义和调用:
　　定义函数分类:普通函数/匿名函数.
　　函数必须调用才会执行.

定义语法:
　　function 函数名(参数列表)
　　{
　　　　函数体
　　　　[return 值/变量]
　　}

函数的返回:
　　如果在函数中使用了return,那么函数的返回结果就是 return 后的值.
　　如果在函数中没有使用return,说明该函数没有结果,不用接受,若接受,结果为:undefined.

//js中定义函数的语法

/*

     function 函数名(参数列表)

     {

         函数体(函数代码)

         [return 值/变量]

     }

 */

//第一个:无参数、无返回的函数:打印华丽的分割线

function p(){

    console.debug("----------");

}

//调用函数

p();

//第二个:有参数、无返回的函数:打印传入的变量

function num(data){

    console.debug(data);

}

//调用函数

num(16);

//第三个:有参数、有返回的函数:求两个参数之和

function getNum(x, y){

    return x + y;

}

//调用函数

console.debug(getNum(4,5));

匿名函数(经常使用):
　　在定义函数的时候,没有定义函数名称.
　　此时,可以把函数当做是一个值/变量,可以赋给另一个变量.

//第四个:定义匿名函数:求两个参数之和(此种做法,常用)

var add = function(x, y){//给匿名函数起别名

    return x + y;

}

//使用匿名函数的别名来调用函数

console.debug(add(1, 2 ));

var n = add;//add后面不要加(),否则就是调用函数

console.debug(n(9, 7));

全局变量和局部变量:

变量根据在function的内外定义位置不同,分成:
全局变量:function外部定义的变量称为全局变量
局部变量:function内部定义的变量称为局部变量
访问变量原则：就近原则，谁离我最近我就使用谁。

<script language="javascript">

        var msg = "全局变量";

      function show()

       {

              msg = "局部变量";

        }

        show();

       alert(msg);//局部变量

</script>

-----------------------------------------------------

<script language="javascript">

        var msg = "全局变量";

        function show()

       {

             var msg;

               msg = "局部变量";

      }

        show();

        alert(msg);//全局变量

</script>

系统函数：

参见与:W3C javascript.chm ---> JavaScript 全局对象参考手册.
在JS中已经预先定义好的,可以直接拿来使用的函数.
-------------------------------------------------------------
encodeURI及encodeURIComponent方法。
　　返回对一个URI字符串编码后的结果。
decodeURI及decodeURIComponent()方法。
　　将一个已编码的URI字符串解码成最初始的字符串并返回。
parseInt方法
　　将一个字符串按指定的进制转换成一个整数，语法格式为：parseInt(numString, [radix])。如果没有指定第二个参数，则前缀为 ‘0x’ 的字符串被视为十六进制，前缀为 ‘0’ 的字符串被视为八进制，所有其他字符串都被视为是十进制。
parseFloat方法
　　将一个字符串转换成对应的小数。
isNaN方法
　　检查一个值是否为NaN。
escape方法(不推荐使用,改为encodeURIComponent)
　　返回对一个字符串进行编码后的结果字符串。所有空格、标点、重音符号以及任何其他非 ASCII 字符都用 %xx 编码替换，其中xx等于表示该字符的Unicode编码的十六进制数，字符值大于255的字符以%uxxxx格式存储。
unescape 方法(不推荐使用，改为decodeURIComponent)
　　将一个用escape方法编码的结果字符串解码成原始字符串并返回。
eval 方法 (常用)
　　将参数字符串作为一个JavaScript表达式执行。

//编码

var ret1 = encodeURI("https://bilibili.com?keyword=松鼠航");

var ret2 = encodeURIComponent("https://bilibili.com?keyword=松鼠航");

p(ret1);//https://bilibili.com?ketword=%E6%9D%BE%E9%BC%A0%E8%88%AA

p(ret2);//https%3A%2F%2Fbilibili.com%3Fketword%3D%E6%9D%BE%E9%BC%A0%E8%88%AA

//解码

var ret3 = decodeURI("https://bilibili.com?ketword=%E6%9D%BE%E9%BC%A0%E8%88%AA");

var ret4 = decodeURIComponent("https%3A%2F%2Fbilibili.com%3Fketword%3D%E6%9D%BE%E9%BC%A0%E8%88%AA");

p(ret3);//https://bilibili.com?keyword=松鼠航"

p(ret4);//https://bilibili.com?keyword=松鼠航"

console.debug("=======================================");

//isFinite(param):检查某个值是否为有穷大,若为无穷大则返回false

p(isFinite(1/0));//false

p(isFinite(-1/0));//false

p(isFinite(1/1));//true

console.debug("=======================================");

//isNaN(param):检查某个值是否不为数字,若不是返回true

p(isNaN(0.0/0.0));//true

p(isNaN(1/1))//false

console.debug("=======================================");

//parseInt(param):解析一个字符串并返回一个整数(常用)

//parseFloat(param):解析一个字符串并返回一个浮点数(常用)

p(parseInt("123"));//

p(parseInt("123.123"));//

p(parseInt("123s"));//

p(parseInt("1A2s3d"));//

p(parseFloat("123"));//

p(parseFloat("123.123"));//123.123

p(parseFloat("123s"));//

p(parseFloat("1s2d3f"));//

console.debug("=======================================");

//eval(String):可以把字符串类型的参数作为JavaScript代码执行(常用)

var str = "alert('圣光阿，那个邪恶看起来值得一战！');";

p(str);

eval(str);//把str所表示的字符串当做JavaScript代码执行了,弹窗

//==============

function p(data){

    console.debug(data);

}

面向对象：

对象中所包含的变量就是对象的属性，对象中所包含的对属性进行操作的函数就是对象的方法，对象的属性和方法都叫对象的成员。
类是对某一类事物的描述，是抽象上的概念；而对象实例是一类事物中的具体个例。
能够被用来创建对象实例的函数就叫对象的构造函数。使用new关键字和对象的构造函数就可以创建对象实例，
语法格式如下：var objInstance = new ObjName([传递给该对象的实际参数列表]);
----------------------------------------------
函数:面向过程的,可以独立存在和运行.
方法:面向对象的,函数在面向对象中的称谓,此时不能独立存在,因为要依附于对象,也使用对象来调用.
构造函数:专门用来构建对象的.
类:就是一个函数,是一个特殊的函数,构造函数.

js创建一个类,只需要定义类的构造函数(方法):

//定义一个函数,表示功能

function sayHello(){

    console.debug("hello world")

}

//定义一个类,表示一类事物,是对象的类型:人类

function User(){

}

//创建对象

var user = new User();

p(user);

//给user对象设置name属性为will,age属性为17

user.name = "will";

user.age = 17;

//给user对象设置一个功能(函数)

user.sayHi = function(){

    console.debug("hello");

    //alert("66");

}

p(user);

user.sayHi();

//==============

function p(data){

    console.debug(data);

}

在JS中this表示什么? this就表示当前对象
　　1):this在构造器(类)中,此时this就表示当前被创建的对象.
　　2):this在方法中,此时哪一个对象调用this所在的方法,this就是哪一个对象.

//在创建对象的时候就传递name和age

function Person(name, age){

    this.name = name;

    this.age = age;

    this.dowork = function(){

        console.debug(this.name,this.age);

    };

}

var person = new Person("will", 18);

p(person);

//使用person对象调用doWork方法

person.dowork();

//==============

function p(data){

    console.debug(data);

}

函数参数的值传递方式：
　　1）将基本类型的变量作为函数参数传递的情况:

//将基本类型的变量作为函数参数传递的情况:

//该情况的值传递是传递值的副本

function changeValue(x){

    x = 5;

}

var x = 3;

changeValue(x);

console.debug(x);//

　　2）将对象类型的变量作为函数参数传递的情况:

//将对象类型的变量作为函数参数传递的情况:

//该情况的值传递,是传递引用地址的副本,使用同一片堆空间

function Person(name, age){

    this.name = name;

    this.age = age;

    this.say = sayFunc;

}

function sayFunc(){

    console.debug(this.name,this.age);

}

function change(person){

    person.name = "松鼠";

}

var person = new Person("十六",18);

person.say();

change(person);

person.say();

内置对象：

for in循环好比是Java中的foreach循环:
for in循环作用:
　　1.遍历数组里所有的数组元素的索引.
　　2.遍历js对象的所有属性.

//使用for-in语法迭代出对象中的所有属性和属性值

//for(类型  变量名  in  集合/对象/数组){}

function Person(name,age){

    this.name = name;

    this.age = age;

}

var person = new Person("松鼠", 19);

for(var p in person){

    //打印属性和属性值,获取属性值:对象[变量]

    console.debug(p, person[p ]);

}

参见与:W3C javascript.chm ---> ECMAScript 引用类型.
Object:

//创建对象,并设置属性和方法

var obj = new Object();

obj.name = "will";

obj.age = 17;

obj.sayHello = function() {

};

// 对象的构造函数

alert(obj.constructor);

// 是否有指定的属性

debug(obj.hasOwnProperty("name1"));

// 迭代对象所有的属性+方法:for...in

for (attr in obj) {

alert(attr)//属性名

}

---------------------------------------------------------
Array(单独讲)
Boolean
----------------------------------------------------------
Date:

//打印当前系统时间:

var d = new Date();

var day = d.getDate();

day = day<10?"0"+day:day;

var time = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + day + " "

+ d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

----------------------------------------------------------
Math:
var num = Math.random();
----------------------------------------------------------
Number
----------------------------------------------------------
String:

// 随机生成A到Z之间的字母:65+26

// 随机生成0~25

var num = parseInt(Math.random() * 26);//

num = num + 65;

alert(String.fromCharCode(num));

//Object类:根类

var obj = new Object();

obj.name = "will";

obj.age = 15;

p(obj);

p(obj.constructor);//查看构造器

p(obj.hasOwnProperty("age"));//查看是否有age属性,true

console.debug("=================================");

//String类

var str1 = new String("will");

var str2 = new String("will");

p(str1 == str2);//false

p(str1.valueOf() == str2.valueOf());//true

p("will".length);//

p("will".charAt(0))//w

p("will".charCodeAt(0));//119:小写w的Unicode值

//fromCharCode:传入一个Unicode值,返回对应的字符

var ch = String.fromCharCode(65);

p(ch);//A

p("will".slice(0));//will,从哪里开始截取字符串

p("will".slice(0, 2));//wi,从哪里开始截取字符串(输入开始和结束索引)(前闭后开)

p("will".substring(0));//will,从哪里开始截取字符串

p("will".substring(0, 2));//wi,从哪里开始截取字符串(输入开始和结束索引)(前闭后开)

console.debug("=================================");

//math类

//random方法返回[0, 1)之间的随机数

p(Math.random());

//随机生成A~Z之间的字符

ch = String.fromCharCode(parseInt(Math.random() * 26) + 65);

p(ch);

console.debug("=================================");

//Date类

var d = new Date();

p(d);

var mon = d.getMonth() + 1 >= 10 ? d.getMonth() + 1 : "" + d.getMonth() + 1;

var time = d.getFullYear() + "-" + mon + "-" + d.getDate()

            + "  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

p(time);

//==============

function p(data){

    console.debug(data);

}

console.debug("------------");

//使用for-in语法迭代出对象中的所有属性和属性值

//for(类型  变量名  in  集合/对象/数组){}

function Person(name,age){

    this.name = name;

    this.age = age;

}

var person = new Person("松鼠", 19);

for(var p in person){

    //打印属性和属性值,获取属性值:对象[变量]

    console.debug(p, person[p ]);

数组：

为什么使用数组:存储多个数据.
js中的数组和Java中的ArrayList有异曲同工之妙,爽.
------------------------------------------------------
如何创建数组对象:

//创建数组,方式一,(最多使用):

var arr1 = new Array();

arr1[0] = "A";

arr1[1] = "B";

arr1[2] = "C";

p(arr1);

//创建数组,方式二,好比静态初始化:

var arr2 = new Array("A","B","C");

p(arr2);

//创建数组,方式三,好比动态初始化:

var arr3 = new Array(4);

p(arr3);

//创建数组,方式四,方式二的简单写法(最多使用):

var arr4 = ["A","B","C"];

p(arr4);

数组的方法和操作：

//数组的方法和操作

var arr = ["A","B","C"];

//for循环

for (var index = 0; index < arr.length; index++) {

    console.debug(arr[index]);

}

//for-in循环,迭代变量是索引,而不是元素

for(var index in arr){

    console.debug(arr[index]);

}

操作数组的属性和方法：

//length－获得数组的长度;

p(arr.length);//

//concat－连接数组;

var arr1 = arr.concat("D",1,2,3);

p(arr1);//["A", "B", "C", "D", 1, 2, 3]

//join－把数组转换成字符串;

var str = arr.join("-");

p(str);//A-B-C

//pop－删除并返回数组的最后一个元素;

arr1 = arr.pop();

p(arr);//["A", "B"]

p(arr1);//C

//push－放入一个元素;

arr.push("C");

p(arr);//["A", "B", "C"]

//reverse－颠倒数据中的元素顺序;

arr.reverse();

p(arr);//["C", "B", "A"]

arr.reverse();

//shift－移出第一个元素;

arr.shift();

p(arr);//["B", "C"]

//unshift－在前面追加元素;

arr.unshift("A");

p(arr);//["A", "B", "C"]

//splice(start, deletecount, items)－用于插入、删除或者替换数组;

//删除

arr.splice(1,1);//从索引1的位置开始,删除一个元素

p(arr);// ["A", "C"]

//插入

arr.splice(1, 0, "Z","X","Y");//在索引1的位置开始,插入Z、X、Y

p(arr);//["A", "Z", "X", "Y", "C"]

//替换

arr.splice(1,3,"B");//从索引1的位置开始,删除3个元素,并且再插入B(相当于替换)

p(arr);//["A", "B", "C"]

//sort－排序数组;

var arr1 = [1,5,4,3,2];

arr1.sort();

p(arr1);//[1, 2, 3, 4, 5]

//==============

function p(data){

    console.debug(data);

}

prototype:

需求:给数组提供一个修改指定索引位置元素的方法(set).

//使用prototype,可以理解为在类上添加静态方法

//需求:给数组提供一个修改指定索引位置元素的方法(set)

Array.prototype.set = function(index, newEl){

    this.splice(index, 1, newEl);

};

//需求:把B修改为2B

var arr1 = ["A","B","C","D"];

p(arr1);

arr1.set(1, "2B");

p(arr1);

//需求:把十六改为苏氏阿十六

var arr2 = ["松鼠","十六","豆豆","果果"];

p(arr2);

arr2.set(1,"苏氏阿十六");

p(arr2);

//==============

function p(data){

    console.debug(data);

}

使用prototype:

可以理解为在类上增加静态方法.

静态方法属于类,属于该类所有的对象,如此该方法就属于所有的对象.

今日小结：

码农公寓

相关文章