JavaScript
- HTML:搭建页面的结构的内容
- CSS用于美化页面
-
JavaScript给页面添加动态效果和内容的
-
历史:1995年由网景公司发布LiveScript同年更名为JavaScript,简称JS
JS的特点
- JS属于脚本语言,不需要编译,由浏览器解析执行
- JS可以嵌入到HTML代码中
- JS基于面向对象,属于弱类型语言
JS的优点
- 交互性:可以直接和用户进行交互
- 安全性:JS语言只能访问浏览器内部的数据不能访问浏览器之外的内容(电脑磁盘中的各种数据)
如何引入JS代码
-
在元素的事件中书写JS代码
<input type="button" value="点我吧!!!!" onclick="alert('try and try')"> -
通过script标签引入
<script type="text/javascript"> alert("第二种引入方式--通过script标签引入"); </script> -
把JS事件单独写在JS文件中,通过script标签中的src属性,引入JS文件
<script type="text/javascript" src="first.js"></script>
JS的数据类型
- 数值类型(number)
- 字符串类型(string)
- 布尔值类型(boolean)
- undefined(未定义类型)--只声明不赋值
- 对象类型(object)
变量的声明及赋值
-
由于JS语言属于弱类型语言,声明变量时不需要指定类型(在浏览器中进行测试)
var x = 18; var name="小明"; var isBoolean=true; x = "abc"; var m;(只声明不定义,,则该类型为undefined,值也为undefined)
数值类型
-
JS语言中底层都是浮点型,在使用过程中会自动转换整数或者小数
int x = 5 / 2 ; //x=2 (java) var x = 5 / 2 ;//x = 2.5(javascript) 4/2=2(自动转换为整数) 5.0/2=2.5 -
NaN:not a number用来判断某个变量是不是一个数,通过isNaN()函数进行判断
var age = 18; var name="xiaohu"; isNaN(age);//false isNaN(name);//true
字符串类型
-
通过单引号或者双引号修饰字符串
var s1 = "abd"; var s2 = 'absd';
布尔值类型
var b1 = true;
var b2 = false;
数据类型转换
var z = "abc" + 18;(18转换成字符串,隐式转换)//abc18
var z = "100" - 18;(字符串转数字)//82
-
- - * % :只有+会把数字转字符串
z = "abc" - 10;//NaN,"abc"转不了数字 任何数字和NaN进行运算,结果都是NaN
数值类型
- 转字符串:直接转:18->"18"
-
转布尔值:0和NaN转为false,其他为true
if(10){ alert("aa");//弹窗显示 } if(0){ alert("aa");//不显示 }
在if中,如果不是布尔类型,则会自动转化为布尔类型
字符串类型
1.转数值:能转直接转,不能转转换为NaN "100"->100 "ad"-->NaN 2.转布尔值:空字符("")串转成flase,其他转成true, ""->false "ads"->true
布尔值使用Number转换
1.转数值:true->1 false->0 20 + true -> 21 2.转字符串:true->"true" false->"false" "abc" + false -> "abcfalse"
undefined
- 转数值:undefined->NaN
- 转字符串:undefined -> "undefined"
- 转布尔值:undefined->false
null 是对象类型的值
- 转数值:null-> 0
- 转字符串:null->"null"
- 转布尔值:null->false
JS的运算符
-
和Java中的运算符基本相同
-
==和===:
==:先将等号两边的变量类型统一,统一完后再比较内容 "66" == 66 //true ===:会先比较类型是否相同,类型相同后再比较内容 "66" === 66 //false -
两数相除会自动转换小数和整数
5 / 2 = 2.5; 4 / 2 = 2; -
type of:
typeof 18;//"number" typeof "asdf";//"string" typeof "";//"string" typeof undefined;//"undefined" typeof null;//"object" typeof true;//"boolean" typeof 66 + 6;//"number6" typeof (66 + 6);//"number"
JS的语句
- 包括:if else ;while ; do while; for; switch casel;
- 需要布尔值的地方如果不是布尔值会自动转成布尔值;
- for循环中把只需要把java中的int i 改成 var i;不支持增强for循环(for each)
JS函数相关
-
第一种,相对于java而言没有返回值类型,如果需要返回值,直接return
function 函数名(参数列表){ return...; } //1.无参无返回 function fn1() { alert("我是无参无返回的函数") } fn1(); //2.无参有返回 function fn2() { return "abc"; } var s = fn2(); alert(s); //3.有参无返回 function fn3(name){ alert(name); } fn3("Mr.Zhou"); //4.有参有返回 function fn4(i,j) { return i + "*" + j + "=" + i * j; } var result = fn4(2,7); alert(result); -
第二种
var 函数名 = function(参数列表) { } var fn5 = function(){ alert("第二种函数声明的方式"); } fn5();
页面元素相关的函数
<body>
<input type="text" id="myinput">
<input type="button" value="Try!!!">
<div id="d1"></div>
</body>
-
获取页面中的元素对象
var input = document.getElementById("id"); -
给文本元素(文本框)赋值和取值的两种方式
intput.value="abc";//赋值 var s = input.value;//取值 -
给元素添加文本内容 =:直接替换 +=:追加 元素对象.innerText = "内容";
<h1>abc</h1> -
给元素添加html代码
元素对象.innerHTML = "HTML代码";
js中常用的API
string相关
1.创建string的两种方式
var s1 = "abc";
var s2 = new String("abc");
2.转大小写
"avC".toUpperCase();//"AVC"
"avC".toLowerCase();//"avc"
3.获取某个字符串在另外一个字符串中出现的位置
"java hellow".indexOf("a");//1 ;第一次出现的位置
"java hellow".lastIndexOf("a");//3;最后一次出现的位置
4.截取字符串
str.substring(start,[end]);//end可以省略,只写start截取到最后,写end,截取到end的位置,不包含end
"hello java".substring(0,3);//"hel"
"hello java".substring(3);//"lo java"
4.替换字符串-->并没有把源字符串替换掉,需要接收返回值
"java hello".replace("hello" , "hello world");//"java hello world"
5.拆分字符串
/*此时names就是数组*/
var names = "刘德华,张学友,若曦,赵四".split(",");//["刘德华", "张学友", "若曦", "赵四"]
0:"刘德华"
1:"张学友"
2:"若曦"
3:"赵四"
length:4
/*遍历*/
for(var i = 0 ; i < names.length ; i++){
var name = names[i];
alert(name);
}
number相关函数
-
四舍五入 toFixed(2);//保留两位小数
var x = 3.1415926; x.toFixed(3);
数组
-
创建数组的两种方式
- var arr1 = ["0","true","刘德华"];
- var arr2 = new Array("0","true","刘德华");
-
数组中添加数据
- arr2.push("周杰伦")//返回值为添加元素之后的数组长度
-
数组长度可变.arr2.length = 2,会删除后面的元素
-
数组中获取数据 [数组不会存在数组下标越界.如果没有就是undedined]
-
数组反转
var arr3 = [1,2,3]; arr3.reverse(); -
数组排序
/*默认排序规则,按照字符串的形式进行排序,通过Unicode编码,比较第一个字符比较完比较第二个依次类推*/ var arr4 = [4,6,2,6,4,3]; arr4.sort();//[2, 3, 4, 4, 6, 6] var arr5 = [23,15,2,100,30,8]; arr5.sort();//[100, 15, 2, 23, 30, 8] ================================================================= /*自定义排序规则*/===?为什么要这么设计:如果数组中保存的是对象,如Person对象,可以按照java中的comparator var arr = [ 23, 15, 2, 100, 30, 8 ]; //声明自定义排序函数 function mysort(a,b){ //升序 return a-b; //降序 //return b-a; } arr.sort(mysort);
日期相关(客户端时间,服务器时间===>服务器时间用的更多)
-
如何获得客户端时间
var d1 = new Date();
-
指定时间创建时间对象,通常时间来自服务器
var date = new Date("2018/08/04 18:36:02");
-
获取和设置时间戳(距离1970/1/1 8:00:00的毫秒数)
//获取 date.getTime();//1533378962000 //设置 date.setTime(1000);//Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)
-
从Date对象中单独获取年月日时分秒星期几
var date = new Date();//Fri Aug 31 2018 11:45:38 GMT+0800 (中国标准时间) date.getFullYear();//年;2018 date.getMonth()+1;//月;8 date.getDate();//日;31 date.getHours();//时 date.getMinutes();//分 date.getSeconds();//秒 date.getDay();//星期几 -
从Date中获取年月日 和 获取时分秒
date.toLocaleDateString();//"2018/8/31" date.toLocaleTimeString();//"上午11:49:54"
正则
-
创建正则的两种方式
- var reg = /规则/模式;
- var reg = new RegExp("规则","模式可省略");
-
正则相关的函数
- reg.exec(str);查找内容,如果模式为g,全局查找,执行依次查询一个,
- reg.test(str);校验文本
-
字符串相关的正则函数
- str.match(reg);查找,返回值为一个数组
- str.replace(reg,替换的内容);//查找并替换
创建元素对象
var h = document.createElement("h1");
document.body.appendChild(h);
js中的自定义对象
-
两种声明对象的方法
-
第一种方式
//1:有参 function Person(name , age){ this.name = name; this.age = age; this.run = function(){ alert("name:" + this.name + ",age:" + this.age); } } //创建对象 var p = new Person("黄志宏",23); //调用对象的方法 p.run(); //2.无参--创建一个空的Person function Person(){} //创建Person对象 var p = new Person(); //后续给对象添加属性和方法 p.name = "刘备"; p.age = 28; p.run = function(){ alert("name:" + this.name + ",age:" + this.age); } //调用方法 p.run(); -
第二种声明对象的方式
/*第二种方式*/ var student = { "name": "曹操", "age":23, "run":function(){ alert("name:" + this.name + ",age:" + this.age); } } //调用的方式 student.run();
2690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
