javascript

西红柿味儿柿子
136 阅读5分钟

一、javascript简介

javascript是一种脚本语言，代码不进行预编译，由浏览器执行，用来向页面添加交互行为，主要由ECMAScript(核心)、BOM（浏览器对象模型）、DOM（文档对象模型）组成

二、写法

写法和css的三种样式类似

1、行内js

使用几率很少，只针对某些标签的特殊操作

//语法：
<a href="javascript:alert('行内js,伪协议')">滴滴</a>

上述代码中执行的不是跳转地址，而是其中的js代码

javascript：这是伪协议的意思，伪协议是为了告诉浏览器接下来的代码是JS代码

alert（）：它可以弹出一个提示消息和确认按钮的框，在点击确认之前是不会执行后面代码的

2、内部js

页面内的代码写在一组<script>标签内，这组标签可以卸载页面的任何位置，就算里面没有写东西，也不要使用单标签

<script>
    alert("内部js")
</script>

3、外部js

先单独定义一个JS文件

image.png

然后将这个JS文件与要使用的网页关联起来

<!--    外部js-->
<script src="js/test.js"></script>

三、语法

对象类型全是var 但有数据类型

1、函数

正常函数写法

//语法
function 函数名(参数列表){
   JS代码
   [return 返回值;]
   }

匿名函数写法：匿名函数不需要方法名，但需要变量接收，使变量代表这个函数，调用也是使用变量名

var action = function(){
	console.debug(“前方高能，请非战斗人员迅速撤离”);
}
action();

如果匿名函数既有函数名，又有变量接收，需要使用变量名调用函数，函数名不可调用（等于没写）

var b= function test() {
    console.log('匿名函数b');
}
b()
test()//无效

2、变量

var 变量名 = 变量值

2.1、全局变量和局部变量

和java里一样使用

2.2、隐式全局变量（不推荐用）

//写在函数里
变量名 = 变量值

function test01() {
    c = "隐式全局变量"
}
test01()
console.log(c);//显示隐式全局变量

3、对象

之前写法

var emp = {
    '属性名':属性，
    'id': 1,
    'name':'zs'
}

3.1、自定义对象

和定义函数相似，为了区分，函数名是使用小驼峰命名，对象名是使用大驼峰

function 对象名() {
}

给类中添加属性用this

function User01(name,age) {
    this.name = name
    this.age = age
}
var user01 = new User01('ls',20);
 console.log(user01);

在类里面定义方法

//在类里面定义方法不能直接调用，需要把方法当做属性用this接一下
function Emp() {
   this.s = function hello() {
    }
}
//调用类里的方法
var emp = new Emp();
emp.s()

3.2、内部对象

3.2.1、本地对象

本地对象需要new来创建所需的实例

包括：Object({})、Boolean、Number、Date、String、Array（[]）等，重点掌握Date和String，其它的到API里去找即可,如下是日期对象

image.png

//1.创建一个对象
var date = new Date();
// 2.给这个对象添加方法
date.dateFormat = function() {
    var d = new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1; //返回的月份是从0开始11结束
    var day2 = d.getDate(); //月中的天数是从1到31
    var hour = d.getHours(); //取值范围0到23
    var minute = d.getMinutes(); //取值范围是0到59
    var second = d.getSeconds(); //取值范围是0到59
    //yyyy/MM/mm HH:mm:ss
    console.log(year + '/' + month + '/' + day2);
}
date.dateFormat()

// charCodeAt(index)
// 返回指定位置的unicode码
var s = "abcd";
console.log(s.charCodeAt(1));
// fromCharCode() -- 相当于静态方法，用法：String.fromCharCode(65);
// 可接受一个指定的 Unicode 值，然后返回一个字符
console.log(String.fromCharCode(65));

3.2.2、内置对象

内置对象不需要new来创建实例，包含GLobal、Math

GLobal的api

函数描述
encodeURI()针对中文的uri进行编码
decodeURI()解码某个编码的uri
encodeURIComponent()处理数字和字母都进行编码
decodeURIComponent()解码
eval()计算javascript字符串，并把它当做JS代码来执行
var encode02 = encodeURIComponent(url);//除了字母和数字都进行编码
var decode02 = decodeURIComponent(encode02);
console.log(decode02);


var a = "console.log(decode02)";
console.log(a);
 //会先识别是否可执行，如果可以执行，就不会直接输出字符串而是执行逻辑
eval(a)

3.3、BOM（浏览器对象模型）

BOM是Browsr Object Model的缩写 所有BOM和DOM的对象都称为宿主对象，BOM有以下内容

image.png (1) 打开一个窗口就是一个window对象；

(2) 窗口里面使用location表示地址栏；

(3) 窗口里面的内容使用document来表示；

Window对象

Window对象是BOM中的顶级对象，默认可以不写，可以获取其他BOM对象

方法描述
alert()显示带有一段消息和一个确认按钮的警告框
setInterval()定时任务，按设定时间反复执行
setTimeout（）延时执按照设定时间延时执行
location对象
document对象

四、数据类型

1、原始数据类型

数制表示：可以用十/八/十六进制进行计算

var a=412;//412

布尔值

var b=true;//true

字符串：单、双引号都代表字符串

var c='李斯';//李斯

非数（NAN）：不是数字，用NAN表示，在JS中采用了isNAN（）函数来判断当前字符是否是数字

var d=1/'a'；//NAN

无穷数（Infinity）：在JS中的计算会取极限值，不会取固定值，如0会取无限趋近于0，而不是直接取0计算

var e=1/0;//Infinity

NULL ：表示一个不存在的对象，只有一个值null

var f=null;//null

undefined：表示未定义或未初始化

var g;//undefined

2、流程控制

JS中同Java一样存在流程控制语句，用法一样：if和Switch...

在JS中，所有的变量都可以判断true和false，如下：

if (1){
    console.log("1是true");
}else {
    console.log("1是false");
}
if (0){
    console.log("0是true");
}else {
    console.log("0是false");
}
if (null){
    console.log("null是true");
}else {
    console.log("null是false");
}
if (NaN){
    console.log("NAN是true");
}else {
    console.log("NAN是false");
}
if (undefined){
    console.log("undefined是true");
}else {
    console.log("undefined是false");
}

其中只有数字1是true，其余全为0

五、运算符

基础的赋值、算数、逻辑运算符就不介绍了，和java一样，这里主要讲比较运算符

比较运算符：==（只比较值，不比较数据类型） 、 != 、===（既比较值，也比较数据类型） 、 !==

console.log(2 / '2');//1 字符串如果是数字，就可以直接进行数字运算
console.log(2 + '2');//22  拼接

//==    ！=    ===    ！==

var a = 2
var b = '2'

console.log(a == b);//true   在java里因为字符类型不同会返回false，在js里只比较值,不会比较类型 返回true
console.log(a === b)//false  既比较值也比较数字类型
console.log(a != b)//false
console.log(a !== b)//true

总结：多一个等号就会比较类型，不然就只比较值

avatar
文章
阅读
粉丝