javascript详解1

时间 2019-11-10

标签 javascript 详解栏目 JavaScript 繁體版

原文原文链接

推荐学习连接：javascript

https://book.apeland.cn/details/356/css

http://es6.ruanyifeng.com/#READMEhtml

https://developer.mozilla.org/zh-CN/java

一、js引入方式

1.一、js写在行内，尽可能不要写在行内

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
   <p>小马过河</p>
</body>
</html>

需求是点一下小马过河就输出个内容es6

它的输出在console。浏览器做为js的解释器：数组

好比下面定义一个变量打印：浏览器

a就至关于console.log()，控制台输出日志，就是打印，分号作结束符函数

在行内要添加onclick事件的属性学习

 <p id="" onclick="console.log('魔降风云变');">小马过河</p>

点击一下‘小马过河’控制台就输出‘魔降风云变’。onclick引号中就是咱们的js代码测试

1.2内嵌方式

js通常像css同样很长，应该像css那样分开来就方便不少

script脚本很随意，写在哪里都行，

写在哪里都不报错的额，报错都是在控制台输出的。

通常咱们写在body的最下面位置。

标注是个js文件 //是单行注释 /**/是多行注释

<script type="text/javascript">

    //js代码

</script>

1.三、外接方式

建立js目录，建立文件，写入js代码

<script type="text/javascript" src="js/index.js"></script>

二、js经常使用的功能

2.1测试语句

示例html文件：

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
   <p id="" onclick="console.log('魔降风云变');">小马过河</p>
   <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

后面写js内容

若是少个引号，让控制台输出报错

console.log('我是小马过河)  ;

alert('我是小马过河')

prompt('请输入你的名字：')

你输入肯定就想把‘小马过河’拿到。这是一个js内置方法。它所作的事情都会被挂载到全局上，就是如今这个浏览器窗口（window）

至关于window.prompt('请输入你的名字：')

快捷键：打印window.log而后加tab键会自动变成console.log(window);的控制台输出语句

console.log(window);

打印出Window,window是js里的对象

window对象里有属性和方法，好比刚才用的那个：本来是对象.方法，这里使用window的方法能够省略window.

promtp内部有个返回值，用变量接收这个返回值。

变量.log加tab键快捷打印

var name=prompt('请输入姓名')
console.log(name);

没有打印出来，由于第一行没有分号结尾

var name=prompt('请输入姓名');
console.log(name);

加上分号仍是没有打印出来，由于这里有个过滤条件

去掉以后不用刷新页面就显示出来打印输入的了。这样就拿到用户在输入框中输入的值

2.二、变量

复杂数据类型会在堆中开辟空间。

基础数量类型引用数据类型

number string boolean undefined null

var a=2
var b='2'+'b'
var c='2'+a
console.log(b);
console.log(c);

字符串能够拼接，数字和字符串拼接数字会转为字符串，隐式转换，与Python不一样。

布尔值

var  b=true;
console.log(b);
console.log(typeof b)

js的变量也能够先声明后定义

var e
console.log(e);
console.log(typeof e)

值和类型都是undefined,值颜色浅一点，类型颜色深一点。而且上面有标记是哪一行执行的结果

var f=null;
console.log(f);
console.log(typeof f)

变量赋予一个空值，值为null，类型为对象，它是一个空对象。null是个空对象，跟空值不一样，空对象是这个对象里面没有赋值，空值至关于....晕了。。

ctrl+shift+/多行注释js

2.3引用数据类型

Array Object function

js数组像Python里的列表。数组元素的索引从0开始。length是数组的长度。proto下面有不少数组的方法。数组是复杂数据类型

var arr=['魔降风云变','小马过河']
console.log(arr);

对象数据类型。proto中是对象的方法

var obj={
    name:'mcw',
    age:18
}
console.log(obj);

对象像Python里的字典。key value键值对设置。键单引号双引号可省略，可是Python里的字典必须是字符串类型，须要加。
方法：定义在对象中的函数

js版本查看及修改

修改这里形参，后面的显示也跟着变

控制台输出函数返回值

function add(a,b) {
    return a+b
}
console.log(add(2, 4));

js 能够一个var定义多个变量，逗号隔开，分号结尾    var minIndex = 1,maxIndex = 4; currentIndex = minIndex;

js支持 ++ --操做  currentIndex++;

悬浮变手：css游标：指针 cursor: pointer;