建筑工程公司需要哪些资质证书,seo推广的全称是,网站数据库查询怎么做,西宁做网站1. 介绍
JavaScript 是 前端开发人员必须学习的 3 门语言中的一门#xff1a;
HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为
接下来开始详解JavaScript。
2.引入方法
js有两种导入方式#xff0c;一种是内部脚本#xff1a;直接在html页面中…1. 介绍
JavaScript 是 前端开发人员必须学习的 3 门语言中的一门
HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 控制了网页的行为
接下来开始详解JavaScript。
2.引入方法
js有两种导入方式一种是内部脚本直接在html页面中的scriptxxx/script标签中写入Javascript代码另一种是外部脚本创建 .js 文件然后使用script src xxx.js/script引入这个文件
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/title/headscriptdocument.writeln(hello world );/scriptscript srctest.js/scriptbody/body
/html
3. JavaScript基础语法
3.1 书写语法 区分大小写与 Java 一样变量名、函数名以及其他一切东西都是区分大小写的 每行结尾的分号可有可无 如果一行上写多个语句时必须加分号用来区分多个语句。 注释 单行注释// 注释内容 多行注释/* 注释内容 */ 注意JavaScript 没有文档注释 大括号表示代码块 下面语句大家肯定能看懂和 java 一样 大括号表示代码块。 if (count 3) { alert(count);
}
3.2 输出语句
js 可以通过以下方式进行内容的输出只不过不同的语句输出到的位置不同 使用 window.alert() 写入警告框 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyscriptwindow.alert(Hello Javascript ! ! !);//写入警告框
/script
/body
/html 上面代码通过浏览器打开我们可以看到如下图弹框效果 使用 document.write() 写入 HTML 输出 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyscriptdocument.write(hello js 2~);//写入html页面
/script
/body
/html 上面代码通过浏览器打开我们可以在页面上看到 document.write(内容) 输出的内容 使用 console.log() 写入浏览器控制台 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
scriptconsole.log(hello js 3);//写入浏览器的控制台
/script
/body
/html 上面代码通过浏览器打开我们可以在不能页面上看到 console.log(内容) 输出的内容它是输出在控制台了而怎么在控制台查看输出的内容呢在浏览器界面按 F12 就可以看到下图的控制台 3.3 变量
JavaScript 中用 var 关键字variable 的缩写来声明变量。格式 var 变量名 数据值;。而在JavaScript 是一门弱类型语言变量可以存放不同类型的值如下在定义变量时赋值为数字数据还可以将变量的值改为字符串类型的数
var test 20;
test 张三;
js 中的变量名命名也有如下规则和java语言基本都相同 组成字符可以是任何字母、数字、下划线_或美元符号$ 数字不能开头 建议使用驼峰命名
JavaScript 中 var 关键字有点特殊有以下地方和其他语言不一样 作用域全局变量 {var age 20;
}
alert(age); // 在代码块中定义的age 变量在代码块外边还可以使用 变量可以重复定义 {var age 20;var age 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30
针对如上的问题ECMAScript 6 新增了 let关键字来定义变量。它的用法类似于 var但是所声明的变量只在 let 关键字所在的代码块内有效且不允许重复声明。
例如
{let age 20;
}
alert(age);
运行上面代码浏览器并没有弹框输出结果说明这段代码是有问题的。通过 F12 打开开发者模式可以看到如下错误信息: 而如果在代码块中定义两个同名的变量IDEA 开发工具就直接报错了 ECMAScript 6 新增了 const关键字用来声明一个只读的常量。一旦声明常量的值就不能改变。通过下面的代码看一下常用的特点就可以了 如图常量重新赋值就会报错。
3.4 数据类型
JavaScript 中提供了两类数据类型原始类型 和 引用类型。 使用 typeof 运算符可以获取数据类型 alert(typeof age); 以弹框的形式将 age 变量的数据类型输出 原始数据类型 number数字整数、小数、NaN(Not a Number) var age 20;
var price 99.8;
alert(typeof age); // 结果是 number
alert(typeof price);// 结果是 number 注意 NaN是一个特殊的number类型的值后面用到再说 string字符、字符串单双引皆可 var ch a;
var name 张三;
var addr 北京;
alert(typeof ch); //结果是 string
alert(typeof name); //结果是 string
alert(typeof addr); //结果是 string 注意在 js 中 双引号和单引号都表示字符串类型的数据 boolean布尔。truefalse var flag true;
var flag2 false;
alert(typeof flag); //结果是 boolean
alert(typeof flag2); //结果是 boolean null对象为空 var obj null;
alert(typeof obj);//结果是 object 为什么打印上面的 obj 变量的数据类型结果是object这个官方给出了解释下面是从官方文档截的图: undefined当声明的变量未初始化时该变量的默认值是 undefined var a ;
alert(typeof a); //结果是 undefined
3.5 运算符
JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的不同的是 JS 关系运算符中的 和 一会我们只演示这两个的区别其他运算符将不做演示 一元运算符-- 算术运算符-*/% 赋值运算符-… 关系运算符!\… 逻辑运算符||! 三元运算符条件表达式 ? true_value : false_value
3.5.1 和 的区别
概述: 判断类型是否一样如果不一样则进行类型转换 再去比较其值 js 中的全等于 判断类型是否一样如果不一样直接返回false 再去比较其值
代码
let age1 20;
let age2 20;
alert(age1 age2);// true
alert(age1 age2);// false
3.5.2 类型转换
上述讲解 运算符时发现会进行类型转换所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。 其他类型转为number string 转换为 number 类型按照字符串的字面值转为数字。如果字面值不是数字则转为NaN 将 string 转换为 number 有两种方式 使用 正号运算符 let str 20;
alert(str 1) //21 使用 parseInt() 函数(方法) let str 20;
alert(parseInt(str) 1); 建议使用 parseInt() 函数进行转换。 boolean 转换为 number 类型true 转为 1false转为 0 let flag false;
alert(flag); // 0 其他类型转为boolean number 类型转换为 boolean 类型0和NaN转为false其他的数字转为true string 类型转换为 boolean 类型空字符串转为false其他的字符串转为true null类型转换为 boolean 类型是 false undefined 转换为 boolean 类型是 false 代码如下 // let flag 3;
// let flag ;
let flag undefined;
if(flag){alert(转为true);
}else {alert(转为false);
}
使用场景
在 Java 中使用字符串前一般都会先判断字符串不是null并且不是空字符才会做其他的一些操作JavaScript也有类型的操作代码如下
let str abc;
//健壮性判断
if (str ! null str.length 0) {alert(转为true);
} else {alert(转为false);
}
但是由于 JavaScript 会自动进行类型转换所以上述的判断可以进行简化代码如下
let str abc;
//健壮性判断
if(str){alert(转为true);
}else {alert(转为false);
}
3.6 流程控制语句
JavaScript 中提供了和 Java 一样的流程控制语句如下 if switch for while dowhile
3.6.1 if 语句
let count 3;
if (count 3) {alert(count);
}
3.6.2 switch 语句
let num 3;
switch (num) {case 1:alert(星期一);break;case 2:alert(星期二);break;case 3:alert(星期三);break;case 4:alert(星期四);break;case 5:alert(星期五);break;case 6:alert(星期六);break;case 7:alert(星期日);break;default:alert(输入的星期有误);break;
}
3.6.3 for 循环语句
let sum 0;
for (let i 1; i 100; i) { //建议for循环小括号中定义的变量使用letsum i;
}
alert(sum);
3.6.4 while 循环语句
let sum 0;
let i 1;
while (i 100) {sum i;i;
}
alert(sum);
3.6.5 dowhile 循环语句
let sum 0;
let i 1;
do {sum i;i;
}
while (i 100);
alert(sum);
3.7 函数
函数就是Java中的方法是l被设计为执行特定任务的代码块JavaScript 函数通过 function 关键词进行定义。
3.7.1 定义格式
函数定义格式有两种 方式1 function 函数名(参数1,参数2..){要执行的代码
} 方式2 let 函数名 function (参数列表){要执行的代码
} 注意 形式参数不需要类型。因为JavaScript是弱类型语言 function add(a, b){return a b;
} 上述函数的参数 a 和 b 不需要定义数据类型因为在每个参数前加上 var 也没有任何意义。 返回值也不需要定义类型可以在函数内部直接使用return返回即可 3.7.2 函数调用
函数调用函数
函数名称(实际参数列表);
eglet result add(10,20); 注意 JS中函数调用可以传递任意个数参数 例如 let result add(1,2,3); 它是将数据 1 传递给了变量a将数据 2 传递给了变量 b而数据 3 没有变量接收。 4. JavaScript常用对象
JavaScript 提供了很多对象供使用者来使用。这些对象总共分类三类
基本对象BOM对象DOM对象ArrayWindowDocumentBooleanNavigatorAnchorDateScreenAreaMathHistoryNumberLocationStringRegExpGlobal
4.1 Array对象
JavaScript中Array对象用于定义数组
4.1.1 定义格式
数组的定义格式有两种 方式1 let 变量名 new Array(元素列表); 例如 let arr new Array(1,2,3); //1,2,3 是存储在数组中的数据元素 方式2 let 变量名 [元素列表]; 例如 let arr [1,2,3]; //1,2,3 是存储在数组中的数据元素 注意Java中的数组静态初始化使用的是{}定义而 JavaScript 中使用的是 [] 定义
4.1.2 元素访问
访问数组中的元素和 Java 语言的一样格式如下
arr[索引] 值;
代码演示 let arr new Array(1,2,3);console.log(arr)console.log(typeof arr[1]);
4.1.3 特点
JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的而 JavaScript 是弱类型所以可以存储任意的类型的数据。
例如如下代码
// 变长
let arr3 [1,2,3];
arr3[10] 10;
alert(arr3[10]); // 10
alert(arr3[9]); //undefined
上面代码在定义数组中给了三个元素又给索引是 10 的位置添加了数据 10那么 索引3 到 索引9 位置的元素是什么呢我们之前就介绍了在 JavaScript 中没有赋值的话默认就是 undefined。
如果给 arr3 数组添加字符串的数据也是可以添加成功的
arr3[5] hello;
alert(arr3[5]); // hello
4.1.4 属性
