js基础

2019-08-14 10:35:09来源：博客园阅读 ()

一、JS三种引入方式

　　1.1行内引入：↓

<a href="javascript:alert('hello world!!!')">点击</a>
<p onclick="javascript:alert('hello world!!!')">点击</p>

　　　1.2内部引入：↓

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
      <!--1.写在head里-->
      <script>
         alert('hello world!!!');
     </script>  
</head>
<body>
     <!--2.写在body里-->
      <script>
         alert('hello world!!!');
     </script>
</body>
</html>

1.3外部引入：↓

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
      <!--1.写在head里-->
　　　 <script src="js/js.js" type="text/javascript"></script>
</head>
<body>
      <!--2.写在body里-->
    <script src="js/js.js"></script>
</body>
</html>

注意！！！：javascript可以写在HTML任何地方。推荐使用外部引入并且放在距离</body>最近的地方，避免页面渲染不全而导致逻辑出错。

　　　<noscript>您的浏览器不支持javascript!!!</noscript>//对于一些浏览器不支持javascript;

二、JS三种弹框方式

　　警告框：alert('警告'); 确认框：confirm('确认'); 提示框：prompt('提示语句'，'input框')；

三、输出方式

　　3.1使用window.alert() 弹出警告框
　　3.2使用document.write()方法将内容写到html文档中
　　3.3使用document.getElementById("").innerHtml="需要写入的值"; 写入到HTML元素
　　3.4使用console.log()写入到浏览器的控制台

四、null、NaN、" "、undefined比较

　　1、undefined：没有对变量进行初始化的类型：

　　　　 var test;

　　　　　alert(test); //undefined;　　

　　2、null:

　　　　　alert(typeof null);//object

　　3、NaN:数据类型是number,但不是一个数，NaN与任何值都不相等，包括其本身，isNaN() 检测是否为NaN值。　　　

console.log(0/0);//NaN
console.log(0/0);//NaN
console.log(1/0);//Infinity  正无穷大
console.log(NaN==NaN);//false;

　　4、　0==" "; //true

　　　　 0==false; //true　

　　　　 null==undefined; //true

　　　　 0==undefined； //false

　　　　 undefined==false; //false

　　　　 " "==undefined； //false

　　　　 0==null； //false

　　　　 null==false; //false

　　　　 " "==null； //false

五、运算符

　　1、算数运算符：+、-、*、/、%、++、--（加、减、乘、除、模、自增、自减）

　　　　　　模：取余数→ alert(3%5);//3

　　　　　　a++:先执行后自增； ++a:先自增后执行 //自增1；

　　　　　　a - -:先执行后自减； - - a:先自减后执行 //自减1；

　　 2、赋值运算符：=、+=、－=、*=、/=、%=（赋值、先加后等、先减后等、........）

　　　　　　例如：var a=1; a+=2;//可看成a=a+2;//3

　　 3、比较运算符：>、<、>=、<=、==、!=、===、!==

　　　　　　==表示值得判断；===表示值和数据类型的判断；

　　 4、逻辑运算符：&&、||、！（与、或、非）

　　　　　　逻辑与：条件都为真时为真；

　　　　　　逻辑或：至少有一个为真时为真；

　　　　　　逻辑非：alert(!true);//false

　　　　　注意：第一个条件可以确定时，第二个条件容易短路；↓　　

var a= 1;
var b= 1;
var c= 3;
if(++a>b || c>--a ){
    console.log('a的值：'+a) //a的值：2
                              } ;

if(++a<b || c>--a ){
    console.log('a的值：'+a) //a的值：1
                              } ;

　　 5、三目运算符：(a>b ? 'true' : 'false') ↓

var a=3>1?'3':'1';
console.log(a);//3

　　　6、字符串运算符：+（连接字符串和变量或数字） ↓

var a='3yi'；
console.log('yi'+a);//yi3yi
console.log('2'+a);//23yi
console.log( 2+'3yi');//23yi
console.log( 2+2+'3yi');//43yi 数字在前先加减
console.log('3yi'+2+2);//3yi22 数字在后表连接

　　　7 、逗号运算符： ↓

var a,b,c;
var n=1,m=2;
var z=(x=3,y=4);
console.log(z);//4
console.log(x);//3

　　8、void运算符

<script type="text/javascript">
    //void运算符
    z=void(n=1,m=2,p=3);
    alert(z);
            //z输出为3
        var x;
    x=123;
    x='king';
    x=true;
    x=null;
    x=undefined;
    x=[1,2,3];
    alert(typeof x);
        //x输出为undefined    
</script>

原文链接:https://www.cnblogs.com/gust-lq/p/11340184.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有