Java Script

Java Script

最早就是为了进行表单的数据格式校验 
提高用户的上网体验
随着不断发展 
JS能做出很多绚丽的网页特性
Node.js 服务端 可以使用js来编写
JavaScript = ECMAScript规范 + js自己特有的东西(BOM/DOM)

ECMAScript 核心
DOM 文档对象模型
BOM 浏览器对象模型

JS和HTML结合的三种方式

1.内联方式 
	就是将JS代码写在HTML标签上
	onclick="alert('abc')"
2.内部方式
	在页面提供一个script标签然后再标签内部来编写js代码
	<script>标签定义的位置 会影响执行顺序
	<script>
		alert('abc ')
	</script>
3.外部方式
	将JS代码单独写在一个js文件中 页面来引用
	提高了js代码的复用性
	<script src="js/public.js"> </script>

原始数据类型

number 数字类型(小数 整数 NaN[not a number])
string 字符串类型(字符 字符串 ""或'')
boolean 布尔类型(true false)
undefined 未定义类型
null 空类型 对象占位符

有一个运算符typeof可以获取变量的原始数据类型
alert(typore num); 弹窗

定义变量

JS属于弱类型语言 定义变量时只有var 可以将它初始化为任意值
每行结尾的分号可有可无 建议有
var关键字如果不书写 该变量则为全局变量

var num = 100;
单双引号不区分
var name = "张三";
var username = 'jack';
var flag = false;
与Java不同 ECMAScript中的变量不一定要初始化
var a;

定义变量时还有一个关键字let ES6新增的

全局变量
定义在script标签里面的变量
或定义在.js文件中的变量
页面关闭后全局变量消失
    函数中
    function show(){
        var x = 10;
        //局部变量前面的var如果不写他就是全局变量
        y = 20;
    }
    show();
    alert(y);

局部变量
函数中的变量或者形参
函数调用完消失

语句

if while switch ...
与Java中的语法一致

关键字

let:
	为了解决块级作用域的变量问题,用来生命块级作用域中的变量
	for循环等
	for(let i = 0; i < 10; i++){}

const: 
    来定义常量 
    常量不能重新赋值
    const num = 100;

自动类型转换

JS数据类型的自动转换
当这个运算符想要的数据类型和他所期望的不一致 他就会尝试去转换

a.字符串转换数字
    1.字面上是个有效数字 那就转换成数字
        var num = +"10";
        var r = num + 20;
        document.write(r);//30

        var num = "10";
        var r = num - 20;
        document.write(r);//-10
        
    2.字面上不是个有效数字就转换成NaN 
        NaN参与数学运算结果也是NaN
        var num = "a10";
        var r = num * 20;
        document.write(r);//NaN
        
    3.空字符串转换成0
        var r = "" * 20;
        document.write(r);//NaN 
        
b.布尔类型转换数字
    true转换成1 false转换成0
    var flag = true;
    var r = flag * 2;
    document.write(r);//2

c.字符串转换布尔
    空串转换成false
    非空串转换成true	

d.数字类型转换布尔
    0转换成false
    非0转换成true	
    
e.NaN和undefined转换布尔
    undefined:没有赋值的变量
    都转换成false
    
f.对象转换布尔
    null转换成false
    非null转换成true

运算符

void运算符	
	a标签可以点击不跳页面 但可以调用函数
    function show(){
        alert("hello")
    }
    <a href="javascript:void(show())"></a>
        void: 拦截函数的返回值
            0 可以点击
            方法名 可以点击 调用函数  

JS一元运算符
	一元运算符 + - ++ --
	var num = +100;
	基本与Java运算符保持一致
		  
JS比较运算符
	字符串比较小大:
		如果长度一致按照字典顺序比较,长度不一致,那谁的长度长那就谁大
		
	NaN参与比较运算结果是false
	var n = NaN;
	alert(n > 1);//false
	alert(NaN = NaN);//false
	alert(NaN != NaN);//true
	你一定要判断它是NaN不 使用方法判断
	var f = isNaN(n);
	alert(f);//true
	
	==等于 ===全等于(先判断数据类型)
	var p = ("10" == 10);//true
	var p = ("10" === 10);//false
	
JS逻辑运算符
	!想要布尔类型
	字符串转换布尔--非空串转换成true 
	var falg = !"hello";//false

JS语法–浏览器

弹框    
	window.alert("abc"); 
输出语句
	document.write("HELLO");
    换行语句
    document.write("<br>");
输出到浏览器的控制台(按F12)
    console.log("hehe");
    var num = 100;
    console.log(num);
        拼串 两者意思一致
        console.log("num="+num);
        console.log("num=",num);

函数

函数类似于Java中的方法
封装一段功能逻辑 实现重复调用

方式一:
function show(){
	var a = 100;
	var b = 200;
	alert(a+b);
}
调用
show();

方式二:
var test = function(){
	var a = 100;
	var b = 200;
	alert(a+b);
}
调用
test();

方式三:
var fun = new Function("参数列表","方法体");
var fun = new Function("a,b","alert(a+b)");
fun(2,3);

匿名函数 作为参数传递
function(){
	var a = 100;
	var b = 200;
	alert(a+b);
}

自调用函数
( function() {} () );
( function(a,b){
	alert(a + b);
}(2,3) );

参数–返回值

参数传递
形参不需要写数据类型
function add(a,b){
	var sum = a + b;
	alert(sum);
}
JS调用函数时 这个实参 可以传 也可以不传
传多传少都可以
add(2,3);

返回值
如果要返回数据 直接return返回
function add(a,b){
	var sum = a + b;
	return sum;
}
var r = add(5,9);

函数有一个内置的属性
arguments是一个数组
会接收所有传过来的实参

内置对象

String对象
	var str = new String("abc");
	//object类型
	var s = String("hello");
	//String类型 原始数据类型
	
	str instanceof String;//true
	s instanceof String;//false
	
	var ss = "hi";//定义字符串
	
Number对象
	var num1 = new Number(100);
	//object
	var num2 = Number(1000);
	//Number 原始数据类型
	
	num1 instanceof Number;//true
	num2 instanceof Number;//false
	
	var num3 = 10;
	
	toFixed把数字转换成字符串 结果的小数点后有指定位数的数字
        var num = new Number(3.515513516);
        //保留小数点后三位 会四舍五入 返回的是字符串
        var strNum = num.toFixed(3);//3.516
        数字的字符串转换成数字
        var strNum = "100";
        var n1 = +"100";
        var n2 = strNum * 1;
        var n3 = strNum - 0;
        var n4 = Number(strNum);
        var n5 = parseInt(strNum);
        
		数字转换成数字字符串
		var n = 100;
		var str1 = 100 + "";
	
	toPrecision把数字格式化为指定的长度
		算整数部分在内保留三位数字
		var num = new Number(3.515513516);
		var vv = num.toPrecisoin(3);//3.52
	
Math对象
	直接使用Math调用方法 类似静态方法
	
	六位随机数字
	alert((Math.random() * 1000000 + 1).toPrecision(6));
	
Date对象
	var myDate = new Date();
	myDate.getfullYear();
	Month();
	getDate(); (获取日 1~31天)
	getDay(); (获取星期)
	getTime(); (返回1970-01-01 00:00:00到现在的毫秒值)

第三方日期工具类 moment.js

全局对象	
	window.isNaN(NaN); 判断是否为NaN
	this.parseInt("1000"); 字符串转换为整数
	parseFloat("3.851"); 字符串转换为浮点数
	
	浏览器对中文参数进行URI编码
	解码一个编码的URI组件
	decodeURIComponent();
    把字符串编码为URI组件
	encodeURIComponent();
	
	var userName = "张三";
	编码
	var en = encodeURIComponent(userName);
	解码
	var de = decodeURIComponent(en);
	
Array对象
	JS中的数组类似于Java中的ArrayList
	JS数组不存在角标越界异常
	JS数组可以存储各种类型的数据
	var arr = new Array();
	var arr = new Array(size);
	var arr = new Array( 元素1, 元素2, ...);
	var arr = [1, 2, 3, 4];
	
	arr.lenth;
	获取数组的长度
	arr.push(300);
	添加元素300到数组最后一个位置
	arr.unshift(200);
	添加元素200到数组第一个位置
	var endEle = arr.pop();
	删除数组最后一个元素 并返回
	var startEle = arr.shift();
	删除数组第一个元素 并返回
	arr.splice(index, num, replaceEle);
	从索引index开始删除元素 删除num个元素
	把这个元素替换成replaceEle
	var newArr = arr1.concat(arr2,arr3);
	把多个数组拼接成一个数组
	arr.join("-");
	把数组转换成字符串 通过-连接
	arr.reverse();
	反转数组元素
	var newArr = arr.slice(0,3);
	截取数组中下标0~3的元素(含头不含尾)
ES6中的数组对象新增方法
	arr.filter(function(ele){
		return ele>500;
	});
	过滤
	arr.forEach(function(ele,index){
	});
	遍历
	arr.findIndex(function(ele){
		return ele % 2 == 0;
	});
	返回符合条件元素的索引 只找第一次出现的
	arr.includes(ele);
	判断一个数组是否包含一个指定的值
	var newArr = arr.map(function(ele){
		return Math.pow(ele,2);
	});
	通过指定函数处理数组的每个元素 并返回处理后的数组
	arr.reduce(function(total,num){
		retur total + num;
	});
	将数组元素累加(从左向右)
	
二维数组
	var arr = [ [], [] ];

正则表达式对象
	var regp = new RegExp("[0-9A-Z]+","i");
    var regp = /[0-9A-Z]/i ;
    i不区分大小写
    g全文匹配
    ^[0-9A-Z]+$
    ^ $ 开头结尾(避免局部匹配问题)
    
    repg.test("abc123");
    判断是否符合正则 
    
    查找出三个字符组成的单词
    var str  ="da jia hao hao xue xi a";
	var reg = /\b[a-z]{3}\b/gi;
	var line ="";
	while((line = reg.exec(str))!=null){
		document.write(line+"<br/>")
	}

练习

九九乘法表

<script>
    for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= i; j++) {
            document.write(j + "*" + i + "=" + (i * j) + "&nbsp;&nbsp&nbsp;&nbsp");
        }
        document.write("<br>");
    }
</script>

随机六位验证码

<script>
	alert((Math.random() * 1000000 + 1).toPrecision(6));
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值