JavaScript 和Python、C#、Java、Ruby一样，都是一门独立的编程语言。 
像python、C、Java等都需要解释器，学习它们的语法。而浏览器本身就是javascript的解释器。

1、javascipt代码存在形式

  • HTML中head标签内
<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*CSS代码*/

    </style>

    <script>

        //JavaScript代码

    </script>

</head>
  • 引入JavaScript文件
<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <link href="common.css" rel="stylesheet" />

</head>
<!--两种写法效果一样-->

    <script type="text/javascript"> </script>

    <script> </script>
  • body标签中

因为html也是从上到下执行的，而且从文件中引入js文件也可以引入其他网站js。如果其他网站js连不上，导致页面一直不加载。 
而js的作用就是让网页动起来，而网站有些情况下用不到JavaScript，并且为用户更友好的访问，用户一点就打开页面。直接先看的内容。 
js放在上面，先加载js就浪费时间了。

为了用户更加快捷的打开网页，增加友好度。 
把js放在body标签内的最下面

JavaScript注释

//      单行注释

/**/    多行注释

2、javascript数据类型

  • js定义变量
 name = 'fgf'        # 全局变量

 var name = 'fgf'    # 局部变量
  • 定义函数
 function func() {

        …… ;

    }

一、数字

在js里面，数字就包括了整型和浮点型。

age = 18;

n = "18";

i = parseInt(n);  // 字符串转为整型

i = parseFloat(n);// 转为浮点型

二、字符串

> a = 'fgf';

"fgf"

> a.charAt(1)

"g"

> a.charAt(2)

"f"

> a.substring(1,3)

"gf"
  • 定时器 setInterval
<script>

    // 创建一个定时器，每5秒来一个弹框

    setInterval("alert(123)", 5000)

</script>
  • console.log 浏览器Console 打印信息
<script>

    function f1() {

        console.log(1);

    }

    setInterval("f1();", 1000)

</script>
  • 跑马灯实例（滚动显示文字）
<body>

    <h1 id="i1" >你是活了一万多天？还是活了一天 却重复了一万多次？&nbsp;</h1>

    <script>

        function func(){

            // 根据ID获取指定标签的内容，定义局部变量接收

            var tag = document.getElementById('i1');

            // 获取标签内部的内容

            var content = tag.innerText;

            // 获取第一个字符

            var f = content.charAt(0);

            // 获取第二到最后的字符

            var l = content.substring(1,content.length);

            // 把第一个字符放到末尾。

            var new_content = l + f;

            // 替换原标签内内容

            tag.innerText = new_content;

        }

        // 每0.5秒执行一次。

        setInterval('func()', 500)

    </script>

</body>

常见功能：

obj.length                           长度

obj.trim()                           移除空白

obj.trimLeft()

obj.trimRight)

obj.charAt(n)                        返回字符串中的第n个字符

obj.concat(value, ...)               拼接

obj.indexOf(substring,start)         子序列位置

obj.lastIndexOf(substring,start)     子序列位置

obj.substring(from, to)              根据索引获取子序列

obj.slice(start, end)                切片

obj.toLowerCase()                    大写

obj.toUpperCase()                    小写

obj.split(delimiter, limit)          分割

obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)

obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。

obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，

                                     $数字：匹配的第n个组内容；

                                     $&：当前匹配的内容；

                                     $`：位于匹配子串左侧的文本；

                                     $'：位于匹配子串右侧的文本

                                     $$：直接量$符号

三、数组、字典

JavaScript中的数组类似于Python中的列表

  • 数组常见功能：
obj.length          数组的大小

obj.push(ele)       尾部追加元素

obj.pop()           尾部获取一个元素

obj.unshift(ele)    头部插入元素

obj.shift()         头部移除元素

obj.splice(起始位置, 删除个数, 值, ...)  插入、删除或替换数组的元素

                    obj.splice(n,0,val) 指定位置插入元素

                    obj.splice(n,1,val) 指定位置替换元素

                    obj.splice(n,1)     指定位置删除元素

obj.slice( )        切片

obj.reverse( )      反转

obj.join(sep)       将数组元素连接起来以构建一个字符串

obj.concat(val,..)  连接数组

obj.sort( )         对数组元素进行排序
"分隔符".join(['列','表'])  # python中

['列','表'].join('分隔符')  # JavaScript中
  • 字典

　　操作和python中一样，其实js里没有字典这个类型，只是对象。

a = {'k1':'v1', 'k2':'v2'}

a['k1']

3、javascript流程控制

一、布尔类型 条件语句

布尔类型： 
小写：true、false

==      比较值相等，不看类型

!=       不等于

===   比较值且类型相等

!===  不等于

||        或

&&      且

条件语句：

if(条件){

}

else if(条件){

}

else{

}

二、for循环

  • 第一种：循环时，循环的元素是索引
a = [11, 22, 33, 44]

for(var item in a) {

    console.log(item);  // 这里获取的是索引

    console.log(a[item]) // 这样才获取的值

}
  • 第二种
for(var i=0;i<;i++){

}

三、while循环

while(条件){

    }

四、if条件语句

if(){

}else if(){

}else{

}
==      : 值一样则相等

===     : 值和类型必须都相等

五、swich case条件语句

name='3';

switch(name){

    case '1':

        age = 123;

        break;

    case '2':

        age = 456;

        break;

    default :

        age = 777;

}

4、javascript必须加分号

js必须加上分号，不写也不出问题，但是线上应用时为了节省空间，js往往都是一行。加上分号，进行断句，必须要加。

												


											
前端逼死强迫症系列之javascript的更多相关文章
	

    
						
  1. 前端逼死强迫症系列之javascript续集
		
    一.javascript函数 1.普通函数 function func(){ } 2.匿名函数 setInterval(function(){ console.log(123); },5000) 3. ...
    
		
    2. 
								
  2. 前端逼死强迫症系列之Html
		
    概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...
    
		
    3. 
						
  3. 前端逼死强迫症系列之css
		
    一.编写css样式 1.ID选择器 由于ID唯一,所以也是写多遍. <head> <style> #i1{ background-color: #2459a2; height: ...
    
		
    4. 
						
  4. 前端逼死强迫症之DOM
		
    Dom:document.相当于把所有的html文件,转换成了文档对象. 之前说过:html-裸体的人:css-穿上衣服:js-让人动起来. 让人动起来,就得先找到他,再修改它内容或属性. 找到标签  ...
    
		
    5. 
						
  5. 前端逼死强迫症之css续集
		
    上节内容回顾 如果点击图片调转到连接,a标签下套img标签,在IE有的版本中,会有蓝色边框. 因为a标签默认字体颜色就是蓝色,img标签继承了父级标签,而IE浏览器默认给边框加了宽度.解决: < ...
    
		
    6. 
						
  6. 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践
		
    目   录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...
    
		
    7. 
						
  7. 前端回顾：2016年 JavaScript 之星
		
    JavasScript社区在创新的道路上开足了马力,曾经流行过的也许一个月之后就过时了.2016已经结束了.你可能会想你是否错过一些重要的东西?不用担心,让我们来回顾2016年前端有哪些主流.通过比较 ...
    
		
    8. 
						
  8. 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)
		
    15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...
    
		
    9. 
						
  9. 王下邀月熊_Chevalier的前端每周清单系列文章索引
		
    感谢 王下邀月熊_Chevalier 分享的前端每周清单,为方便大家阅读,特整理一份索引. 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列,并以年/月为单位进行分类,具 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. VMware Workstation虚拟机安装
			
    VMware Workstation虚拟机安装 我们缺乏资金, 所以吃土.我们想搭 hadoop 集群, redis 集群, k8s 集群, 怎么办? 用虚拟机!! 一. 安装普通版本(Worksta ...
    
			
    2. 
						
  2. 点标记(lambda表达式+linq查询标记符)与linq语句（查询表达式）
			
    什么是Linq表达式?什么是Lambda表达式? 参照:https://www.cnblogs.com/zhaopei/p/5746414.html
    
			
    3. 
						
  3. IDEA如何本机调试springboot应用打的jar包
			
    背景: 我用命名行 执行 java -jar  ***.jar发现 springboot启动时抛出错误,因此想debug进去看看究竟为什么出错. 1  在命令行执行 java -jar -Xdebug ...
    
			
    4. 
						
  4. Oracle复习
			
    这阵子忙着面试 ,之前搞项目一直用的 mysql ,然后面试的大公司!(呵呵)偏偏用的是 oracle 没办法恶补 前面学过的但是没怎么用的Oracle 基础知识,打算主要从下面几点入手. 环境搭建: ...
    
			
    5. 
						
  5. 括号配对检测 A
			
    括号配对检测 A ‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮ ...
    
			
    6. 
						
  6. springboot启动流程（八）ioc容器refresh过程（下篇）
			
    所有文章 https://www.cnblogs.com/lay2017/p/11478237.html 正文 上一篇文章,我们知道了解析过程将从解析main方法所在的主类开始.在文章的最后我们稍微看 ...
    
			
    7. 
						
  7. 把zTree前的展开收起图标改为三角形，且只有在点击三角形图标时才展开子节点解决方案
			
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...
    
			
    8. 
						
  8. 关于H5的一些相关基础知识
			
    HTML只是简写全写是(Hyper Text  Markup Language)表示的是:超文本标记语言; HTML5表示的是html的第5次重大修改的第5个版本,(而html5是W3C和WHATWG ...
    
			
    9. 
						
  9. element的Dialog组件踩坑
			
    在一个组件页面中需要有一个弹窗,为了代码简洁我把弹窗封装成一个组件方便重复调用 描述大致是一个父组件,里面有一个按钮还有一个子组件(弹窗),点击按钮让弹窗出来,弹窗自带的有关闭功能,点击关闭以后再点击 ...
    
			
    10. 
						
  10. 1.volatile关键字 内存可见性
			
    Java JUC 简介 在 Java 5.0 提供了 java.util.concurrent (简称JUC )包,在此包中增加了在并发编程中很常用的实用工具类,用于定义类似于线程的自定义子系统,包括 ...
    
			
    11.