JS基础(一)

樊小勇

于 2019-04-16 13:10:19 发布

阅读量147

点赞数

分类专栏：前端基础总结

本文链接：https://blog.csdn.net/weixin_42396884/article/details/89331336

版权

前端基础总结专栏收录该内容

36 篇文章 0 订阅

订阅专栏

javascript

一、前言

JS 是一个脚本语言
JS是web的编辑语言
经常理解为 html-结构、css-样式、js-行为
js可以写html、也可以写css、但是主要是用来渲染页面，负责页面和数据之间的传递和显示，以及编辑功能…

二、JS基础

1.使用

和css差不多，js有两种使用方式
1.内部js
在html的底部

<html>
<body><body/>
<script>js代码</script>
</html>

2.外部引入
<script src="demo.js"></script>

2.输出

1.弹框 alert
内部js
<script>
        //写js代码
        alert('js第一天');
    </script>
2.外部js里面直接写代码
alert('哈哈哈');

3.写到html上 document.write
<script>
         document.write('床前明月光');  
         document.write('<br>'); 
         document.write('疑是地上霜');   
</script>

4.innerHTML写到html内里面可以写html的标签，显示的时候显示的是标签内的东西。
innerText写到标签里面,如下所示会显示包含标签的一块
app我们称为节点,通过节点然后把内容写到该节点的地方
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
    </div>
    <p id="app2">
    </p>
    <script>
        // innerHTML
        app.innerHTML = '<span class="border: 1px solid">两行白鹭上青天</span>';
        // innerText
        app2.innerText = '<span class="border: 1px solid">两行白鹭上青天</span>';
    </script>
</body>
</html>

5.写到控制台 浏览器F12调出控制台console
console.log('今天天气很好');

变量

1.变量
变量一个可变的量，用来储存数据
声明一个变量用var
var 变量名;
var num; 这个时候num是个变量
变量赋值 = 赋值符号      num = 1;     这个时候num等于1
2.关键字
一些语言以及规定意义的词比如function
3.标识符
js严格区分大小写
命名规范: 
  字母 $ _ 开头
  第一个单词小写，后面的单词第一个字母必须大写

4.小总结

一、变量
	* 变量是什么，有什么用
	* 声明变量
	* 赋值
二、js一些语法和概念
	1. 区分大小写(html不区分大小写)
	2. 标识符(比如变量名称等)
		* 以字母、下划线、$开头
		* 其他字符可以是字母、下划线、$或数字
		* 驼峰式:小写字母开头,第二个打次首字母大写
	3. 注释
		* 单行注释
		* 多行注释
	4. 关键字和保留字
		* 关键字:系统在使用
		* 保留字:系统将来可能用到
		* 不能作为标识符来使用
		* 用来作标识符就会报错
三、变量有哪些类型
	1. 数字 Number类型
		* 整数
		* 小数
		* 最大值和最小值
		* NAN
	2. typeof 判断变量的类型
	3. String类型 字符串
	4. Boolean类型 true和false
	5. Undifined类型 undefined
		* 用来表示声明了变量但未初始化(赋值)
	6. Object类型
		* 普通对象（无序集合）
		* 数组（特殊对象）
	7. Null类型 null
		* 声明一个变量准备用来存储对象
四、变量的类型判断
	* 基本数据类型(简单数据类型) Undefined、Null、Boolean、Number和String
	* 引用数据类型(复杂数据类型) object,array他们的属性或者成员可以包含简单数据类型

5.数据类型

5个基本数据类型
1.数组类型 Number
  数字   NaN
2.字符串类型 String 
  ' ' 或 'saf'
3.布尔类型 Boolean
  true 或 false
4.undefinde 未定义
5.null 空

2个引用数据类型
1..数组类型Array
  var 数组名 = [ ]
  var 数组名 = [数组值]
  var 数组名 = [  {object}]
2..对象类型Object
  var 对象名 = { }
  var 对象名 = new object
  var 对象名 = {    属性(变量名)=值(各种类型) }
  NULL和Array的数据类型都是Object

6.运算符

和数学的运算符一致
加 +
减 -
乘 *
除 / 
取余 %

7.关系运算

1.if判断语句
  if(条件语句 (变量或运算)){执行代码}else{执行语句}
如果满足就干嘛，否者就干嘛
if(!null){return:"哈"}else{return:"切"}
如果不是空就返回 哈，否者返回 切

2.赋值运算符和逗号运算符
赋值运算符 =  用于给变量赋值
复合运算符:
  +=    a += 10;    =>   a=a+10
  -=    a -= 2 ;    =>   a=a-2
  *=    a *= 5;     =>   a=a*5
  /=    a /= 3      =>    a=a/3
逗号运算符 , 用于简洁声明变量
var a,b = 10 ;  声明a,b变量并赋值10

3.一元运算
自加运算符 ++
  ++i 先自加1再参与计算
   i++ 先参与计算再自加1
负号运算符 - 
  直接给变量取负值
自减运算符 --
  --i 先自减1再参与计算
  i-- 先参与计算再自减1

4.逻辑运算
逻辑非 ！
  取相反的值 先用布尔进行判断，会涉及类型转换，隐式和显式转换
逻辑与&&
  布尔类型情况下 只要有一个false就不会检查后面的，结果就是false
  非布尔情况下  判断第一个变量的值（先进行隐式布尔转换）若第一个为true取后面false的变量值，若第一个为false取第一个变量的值
  实际应用里的小技巧
  // 下面用这个特性来检测这个变量有没有值和属性
    var cat = false;
    console.log(cat && cat.name);
逻辑或 ||
  布尔情况下，条件里满足一个就为true，都不满足为false
  非布尔情况下，在条件里找true,值都取第一个为true的值，若没有true则取最后一个的值
  // 小技巧，用于不确定有没有给值，先设置一个默认值
    var date;
    var dater = date || '2019-2-15';
    console.log(dater);
扩展 多个运算在一起的情况下
  /**
        在下列的算式里，看似很复杂,实际上可以分成两大部分||左右进行判断，
        如果前者为false再算后面的，
        而后面的关系运算符==也可以分成左右两边进行计算
        得出结论，计算优先级之前得看清全盘，最后关键是赋值运算那
        */
        // 计算优先级：（）=> 自加减 => 算术运算 => 关系运算（比较运算）=> 逻辑运算=> 赋值运算;
        var sum = 20 + i++ + 'abc' || 123 - ++i + ++j + ++j + '123' == 123 * 2 / 4 ;

5.类型转换
隐式转换
  在条件语句为一个变量时出现
  先把变量转换为布尔类型，true执行else之前的，false执行else之后的
  空、0、undefinde、NaN，各类数据类型意义上为无的都为false，否者就为true
显式转换
  判断变量的类型		typeof 变量名
  Number(变量名);   除了数字和空以及布尔其他全为NaN
  Boolean(变量名);      !!Boolean(变量名) 空、0、undefinde、NaN，各类数据类型意义上为无的都为false，否者就为true
  String(变量名);   全部加上引号变成字符串然后（+）连接起来 
  Object(变量名)；基本不进行转换因为对象可以把所有类型都包含