巨蟒python全栈开发数据库前端5:JavaScript1

时间 2019-11-29

标签巨蟒 python 开发数据库前端 javascript1 javascript 栏目 Python 繁體版

原文原文链接

1.js介绍&变量&基础数据类型css

2.类型查询&运算符&if判断&for循环html

3.while循环&三元运算符前端

4.函数java

5.今日总结node

1.js介绍&变量&基础数据类型python

js介绍es6

(1)什么是JavaScript&一些历史&ECMASCRIPT和JavaScript的关系?数据库

JavaScript是一门编程语言,既能够写前端,又能够写后端.可是JavaScript有不少槽点,所以咱们如今更适合作前端的开发.(以如今的认知水平)编程

(2)后端

JavaScript是网景公司(Netscape公司)开发的,可是如今倒闭了,被美国一家公司收购.

当年静态网页已经远远知足不了人们对网页的需求,由此,js应运而生,知足了人们对动态网页的追求.

js起名字也是蹭了当年java的热度,二者没有太大的联系

(3)

网景公司最后决定将JavaScript提交给国际标准化组织ECMA，但愿这门语言可以成为国际标准。

次年，ECMA发布262号标准文件（ECMA-262）的初版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的，可是没有称其为JavaScript，有两个方面的缘由。一是商标，JavaScript自己已被Netscape注册为商标。二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

所以,ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

(4)

网景公司的大神10天写出来的语言,龟叔圣诞节写了一门python.

JavaScript能够写前端/后端,能够链接数据库

可是JavaScript槽点太多,而且不报错,因此很难写

JavaScript辅助咱们写项目

(5)

尽管 ECMAScript 是一个重要的标准，但它并非 JavaScript 惟一的部分，固然，也不是惟一被标准化的部分。实际上，一个完整的 JavaScript 实现是由如下 3 个不一样部分组成的：

核心（ECMAScript）
文档对象模型（DOM） Document object model (整合js，css，html)
浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

(6)

简单地说，ECMAScript 描述了JavaScript语言自己的相关内容。

　　JavaScript 是脚本语言
　　JavaScript 是一种轻量级的编程语言。后来出现了node.js，能够做为后端语言来开发项目，js是一个既能作前端又能作后端的语言，可是js这个做者用了10天就开发了这么个语言，因此写的不是很完善，这个语言有不少的槽点，后面学习起来你们就知道啦。

　　JavaScript 是可插入 HTML 页面的编程代码。

　　JavaScript 插入 HTML 页面后，可由全部的现代浏览器执行。

　　JavaScript 很容易学习。

JavaScript引入方式

　　　　方式一:Script标签内写代码

在head标签里面能够写，在body标签里面也能够写，放到head标签里面和放到body标签里面到底有什么区别，咱们后续在讲~
<script>
  // 在这里写你的JS代码
　//console.log('你好,我是JavaScript!！')     #f12建打开浏览器的调试窗口，而后在console这个调试台就能看到这个内容了
  alert('你好,我是JavaScript！')   #这个是浏览器窗口一打开我们这个文件，就弹出一个窗口
</script>

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
  // 在这里写你的JS代码
　//console.log('你好,我是JavaScript！') #f12键打开浏览器的调试窗口，而后在console这个调试台就能看到这个内容了
   alert('你好,我是JavaScript！')
  // #这个是浏览器窗口一打开我们这个文件，就弹出一个窗口
    </script>
</head>
<body>

</body>
</html>

代码以下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
  // 在这里写你的JS代码
　   console.log('你好,我是JavaScript！')
  // #f12键打开浏览器的调试窗口，而后在console这个调试台就能看到这个内容了
   // alert('你好,我是JavaScript！')
  // #这个是浏览器窗口一打开我们这个文件，就弹出一个窗口
    </script>
</head>
<body>

</body>
</html>

在开始调试的浏览器上,按F12=>console,能够看见了

方式二:引入额外的JS文件(注意这个通常是在同一级目录下)

html中的完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="07js初识.js">

    </script>
</head>
<body>

</body>
</html>

html

js完整代码:

alert('你好啊!');

JavaScript

核心部分

<script src="myscript.js"></script>

myscript.js文件

alert('你好啊!');  #注意单词的写法,以及须要加上;

结果显示:

注意:弹窗的alert()在console不显示,而 console.log()在console显示

代码也能够直接在console写,课上代码通常在浏览器上写就好了,浏览器内置的js解释器

JavaScript语言规范

注释:

// 这是单行注释

/*
这是
多行注释
*/

结束符:

　　　　JavaScript中的语句要以分号（;）为结束符。也就是说和缩进不要紧了

　　　　注意区分:python不是以分号结尾的

JavaScript语言基础

　　　　变量声明（咱们就经过浏览器自带的那个调试台来写吧~~）

　　　　1.JavaScript的变量名可使用_，数字，字母，$组成，不能以数字开头。

　　　　2.声明变量使用 var 变量名; 的格式来进行声明

var name = "Alex";
也能够分两步，声明变量var name;而后name='Alex'，可是一般咱们都是一步写完
var age = 18;

　　　　注意：

　　　　　　变量名是区分大小写的。

　　　　　　推荐使用驼峰式命名规则。首字母大写

　　　　　　保留字不能用作变量名。

ES6新增const用来声明常量。一旦声明，其值就不能改变。这个东西就是为了定义一个固定的常量，供你们使用，这个常量不会改变

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

常量测试:

再次补充：保留字列表，不用硬记，写多了天然就知道了

测试1:

测试2:(es6新特性,如今浏览器也嵌套了)let也是不可修改的

JavaScript数据类型

　　JavaScript拥有动态类型（python也是动态的）

var x;  // 此时x是undefined  静态语言好比c：建立变量的时候，要指定变量的类型，python3.6也出现了类型注解的新特性def func(x:int,y:int) --> int: return x + y，意思是参数是int类型，返回值也是int类型的，就是个注释的做用
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

数值(Number)

　　　　　　JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

　　　　　　还有一种NaN，表示不是一个数字（Not a Number），也就是说是一个值，但不是数字。

　　　　　　经常使用方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是表明非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

parse:

字符串(String)

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 获得Helloworld

slice和substring的区别：

string.slice(start, stop)和string.substring(start, stop)：

二者的相同点：
若是start等于end，返回空字符串
若是stop参数省略，则取到字符串末
若是某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特色：
若是 start > stop ，start和stop将被交换
若是参数是负数或者不是数字，将会被0替换

silce()的特色：
若是 start > stop 不会交换二者
若是start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
若是stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

查看数据类型:

测试1:

字符串操做测试:

注意:(1)反引号键是1左边的那个键.

　　 (2)在console换行是:shift+enter

注意下面反引号的区别:重点!!!!!!!!!

　布尔值(Boolean)

　　　　区别于Python，true和false都是小写。

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

null表示值是空，通常在须要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

　　　　null表示变量的值是空，undefined则表示只声明了变量，但尚未赋值。

对象(Object)

　　　　JavaScript 中的全部事物都是对象：字符串、数值、数组、函数...此外，JavaScript 容许自定义对象。

　　　　JavaScript 提供多个内建对象，好比 String、Date、Array 等等。

　　　　对象只是带有属性和方法的特殊数据类型。

　　　　自定义对象能够认为是咱们python中的列表.

数组:

　　　　数组对象的做用是：使用单独的变量名来存储一系列的值。相似于Python中的列表。

var a = [123, "ABC"]; 
console.log(a[1]);  // 输出"ABC"

数组的经常使用方法

test1:

var c=new string("aaa");#对象类型的字符串

注意:数组也叫array

sort有坑

splice() #删除并添加新的元素

sort() #将数字转成字符串,在按照ascii码的排序,进行排序

2.类型查询&运算符&if判断&for循环

自定义对象

注意上边的区别

类型查询

运算符:

流程控制

　　if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

例子:

　　if-else if-else #多条件

复制代码
var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch 切换

var day = new Date().getDay(); //示例化一个今天的日期对象，getDay()是获取天数的编号，0表示星期日
switch (day) {  //这里day这个参数必须是一个值或者是一个可以获得一个值的算式才行，这个值和后面写的case后面的值逐个比较，知足其中一个就执行case对应的下面的语句，而后break，若是没有加break，还会继续往下判断
  case 0: //若是day是0
  console.log("Sunday"); //执行它
  break; //而后break跳出
  case 1:
  console.log("Monday");
  break;
default:  //若是没有任何知足条件的，就执行它
  console.log("...")
}

switch中的case子句一般都会加break语句，不然程序会继续执行后续case中的语句。

注意写法

例子:

for

for (var i=0;i<10;i++) {  //就这么个写法，声明一个变量，变量小于10，变量每次循环自增1，for(;;){console.log(i)}；这种写法就是个死循环，会一直循环，直到你的浏览器崩了，就不工做了，回头能够拿别人的电脑试试~~
  console.log(i);
}

3.while循环&三元运算符

while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

test:

三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b 
//若是a>b这个条件成立，就把冒号前面的值给c，不然把冒号后面的值给c   
//python中的：a = x if x>y else y

4.函数

函数定义

　　　　JavaScript中的函数和Python中的很是相似，只是定义方式有点区别。

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;  //在js中，若是你想返回多个值是不行的，好比return a ，b；只能给你返回最后一个值，若是就想返回多个值，你能够用数组包裹起来 return [a,b]；
}
sum(1, 2);  // 调用函数  sum(1,2,3,4,5)参数给多了，也不会报错，仍是执行前两个参数的和，sum(1)，少参数或者没参数也不报错，不过返回值就会是NAN

// 匿名函数方式，多和其余函数配合使用，后面咱们就会用到了
var sum = function(a, b){  //在es6中，使用var，可能会飘黄，是由于在es6中，建议你使用let来定义变量，不过不影响你使用
  return a + b;  
}
sum(1, 2);

// 当即执行函数，页面加载到这里，这个函数就直接执行了，不须要被调用执行
(function(a, b){
  return a + b;
})(1, 2);  //python中写能够这么写：ret=(lambda x,y:x+y)(10,20) 而后print(ret)

补充：

　　　　ES6中容许使用“箭头”（=>）定义函数，能够理解为匿名函数，用的很少。

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;
}

test:

运行html后,在console输入,f1();才会调用,(这种方式是调用才会执行)

上边这个是自执行函数,加载就会执行.(上边这个是非传参的自执行函数)

(传参的自执行函数)

函数中的arguments参数（看一下就好了）

function add(a,b){
  console.log(a+b);
  console.log(arguments.length) //获取传入的参数的个数，arguments就是指的你传入的全部的实参，放在一个数组里面，这个arguments.length是统计这个数组的元素的个数。
}

add(1,2)

输出:

3
2

注意：

　　函数只能返回一个值，若是要返回多个值，只能将其放在数组或对象中返回。

今日总结