首页 > 编程语言 >前端学习4 JavaScript

前端学习4 JavaScript

时间:2022-12-05 20:11:29浏览次数:38  
标签:函数 前端 JavaScript JS 学习 条件 var 代码 d1

JavaScript

一、JavaScript简介

1.JS简介
    JS全程JavaScript但是跟Java半毛钱关系都没有 之所以这么叫是为例蹭热度
    它是一门前端工程师的编程语言 但是它本身有很多逻辑错误(不是很严谨)

2.JS基础
    1.注释语法
    //单行注释
    /*多行注释*/

    2.引入JS的方式
    body内最底部通过script标签属性外部JS资源(最常用)

3.语言结束符号
分号(但是很多时候写不写不影响)

4.编写JS代码的方法
    1.在浏览器:适合编写比较简单的代码
    2.在pycharm:适合编写较为复杂的代码

二、变量与常量

js中变量需要关键字声明
var		var name = 123;
let		let name = 321;

js中常量需要用关键字声明
const pi=3.14;

console.log(变量名); // 相当于print(变量名)

三、基本数据类型

1.数值类型(Number)

查看数据类型的方法typeof

在js中整型与浮点型不分家 
NAN也属于数值类型 意思是:不是一个数字 Not A Number

image

2.字符类型

单引号 'almira'
双引号 "almira"
模板字符串 `almira` 用于格式化输出

字符串拼接推荐加号
'almira' + 'nuriman' = 'almiranuriman'

布尔类型 boolean
js中纯小写 而python中首字母大写

3.null与undifined

	null:表示值为空(曾经拥有过)
undefined:表示没有定义(从来没有过)

这个可以理解为null
image
这个可以理解为undefined
image

4.常见内置方法

JavaScript python 说明
.length .len() 返回长度
.trim() .strip() 移除空白
.trimLeft() .timRight() .lstrip() .rstrip() 移除左右空白
.charAt(n) print(str[n]) 返回第n个字符
.concat(value,...) .join() 拼接
.indexOf(substing,strat) 子序列位置
.slice(start,end) .split('|') 切片
.toLowerCase() .toUpCase() .uper() .lower() 大小写
.split(delimiter,limit) 分割

5.对象(object)

对象之数组(Array)>>>:类似于python中的列表
    let l1 = []
对象之自定义对象(Object)>>>:类似于python的字典
    let d1 = {'name':'almira'}
    let d2 new Object();

四、运算符

1.算数运算符
加减乘除 + - * /
++自增一 --自减一
var res1=x++ 加号在后面 先赋值后自增
var res2=++x 加号在前面 先自增后赋值

2.比较运算符
==(值相等 弱)  ===(值相等 强)
!=(值不相等 弱) ==!(值不相等 强)

3.逻辑运算符
&&(与)  ||(或)  !(非)

五、流程控制

1.单if分支
	if (条件){
        条件成立执行的代码
    }
2.if...else分支
	if(条件){
        条件成立执行的代码
    }else{
        条件不成立执行的代码
    }
3.if...else if...else分支
	if(条件1){
        条件1成立执行的代码
    }else if(条件2){
        条件1不成立条件2执行的代码
    }
    else{
        条件1和2都不成立执行的代码
    }
4.如果分支结构中else if很多还可以考虑使用switch语法
	switch(条件){
        case 条件1:
        	条件1成立执行的代码;
        	break;  如果没有break会基于某个case一直执行下去
        case 条件2:
        	条件2成立执行的代码;
        	break;
        case 条件3:
        	条件3成立执行的代码;
        	break;
       	case 条件4:
        	条件4成立执行的代码;
        	break;
        default:
  			 条件都不满足执行的代码
    }
 
for循环
	for(起始条件;循环条件;条件处理){
        循环体代码
    }
	for(let i=0;i<10;i++){
       	 console.log(i)
    }
 	let dd = {'name':'jason','age':18}
   for(let k in dd){
        console.log(k)
    }

while循环
	while(循环条件){
        循环体代码
    }

六、函数

/*
python 中的函数定义
def 函数名(形参):
	'''函数注释'''
	函数体代码
	return 返回值
*/


function 函数名(形参){
    // 函数注释
    函数体代码
    return返回值
}

// 1.匿名函数
var si = function(a,b){
    return a + b;
}

// 2.箭头函数
var f = v => v;
var f = function(v){
    return v;
}

var f = () => 5;
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
var sum = function(num1, num2){
  return num1 + num2;  
}

1.JS中函数的形参与实参个数可以不对应
	传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体

七、内置对象

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月(0-11)
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)


let dd = {name: 'jason', age: 18}
JSON.stringify(dd)	序列化
JSON.parse(ss)	   反序列化


定义正则两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
1.全局模式的规律
	lastIndex
2.test匹配数据不传默认传undefined

作业

1.编写代码,将当前日期按“2017-12-27 11:11 星期三”格式输出

const WEEKMAP = {
    0:"星期天",
    1:"星期一",
    2:"星期二",
    3:"星期三",
    4:"星期四",
    5:"星期五",
    6:"星期六"
}; // 定义一个数字与星期的对应关系对象



function showTimes () {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1; // 注意月份是0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() 
    var week = WEEKMAP[d1.getDay()]; // 星期是从0~6
    var strTime = `
        ${year}-${month}-${day} ${hour}:${minute}: ${week}
        `;
    console.log(strTime)
}
showTimes();

image

标签:函数,前端,JavaScript,JS,学习,条件,var,代码,d1
From: https://www.cnblogs.com/almira998/p/16953350.html

相关文章

  • 前端开发:4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循
    前端开发之JavaScript目录前端开发之JavaScript一、JavaScript简介二、JS基础三、变量与常量四、基本数据类型1、数值类型2、字符类型3、布尔类型五、特殊数据类型1、nu......
  • 前端之JavaScript
    前端之JavaScript基础1.注释语法//单行注释/*多行注释*/2.前端引入js的多种方式1.head内script标签内编写2.head内script标签src属性引入外......
  • JavaScript
    JavaScriptJavaScript是Web的编程语言。JavaScript是脚本语言JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入H......
  • 前端开发之js
    目录前端开发之js今日内容概要今日内容详细JS简介JS基础变量与常量基本数据类型运算符流程控制函数内置对象作业前端开发之js今日内容概要JS简介JS基础变量与常量基......
  • 前端 - JaveScrip
    今日内容JS简介全程JaveScript但是与Jave没有关系知识为了蹭Jave热度它是一门前端工程师的编程语言但是它本身有很多逻辑错误IT行业鄙视链:前端、运维、测试、产......
  • python之路42 JavaScript 基础语法
    JavaScript简介1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-26......
  • 前端之JavaScript
    目录JavaScript一.JavaScript简介1.ECMAScript和JavaScript的关系2.JavaScript语言3.HTML、CSS、JavaScript二.JavaScript基础之语言规范1.如何使用?2.注释语法3.结束符三.J......
  • 怎么判断一个缺陷是前端缺陷还是后端缺陷?
    怎么判断一个缺陷是前端缺陷还是后端缺陷?似乎这个问题看起来应该挺简单的,但是根据我所遇到的问题,有时候遇到的问题看起来是后端缺陷,但其实是前端缺陷。有时候遇到的问题,......
  • 前端第四课---JS简介及其相关语法
    上周内容回顾边框属性border-上下左右-颜色、宽度、样式border-上下左右borderborder-raduis:50%盒子模型margin-上下左右marginpadding-上下左右pad......
  • Java学习十二
    一.小结1.每个容器都有一个布局管理器,它按照所需的位置在容器中定位和放置组件。三个简单且常用的布局管理器是FlowLayout、GridLayout和BorderLayout。2.可以将JPane1作......