一、JavaScript介绍
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
二、JavaScript使用
1、JavaScript脚本定义
(1)head标签内定义

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript">

        alert("警告");

</script>

</head>

(2)head标签内引入

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js01.js">

    </script>

</head>

(3)body标签内部末尾

<body>

    xxx

    <script src="js01.js">

    </script>

</body>

2、JavaScript注释
(1)单行注释
    //
(2)多行注释
    /* xxx */
3、JavaScript常用数据类型
(1)变量声明
    全局变量定义：name='Tom'
    局部变量：      var name='Tom'
(2)数字类型
    a=18;
    age="18"
    parseInt(age);        ##转化为整数类型
    parseFloat(age);    ##转化为浮点数类型
(3)字符串类型
    name="Tom"
    a.charAt(1)            ##根据下标取字符串值,0表示第一个字符
    a.substring(1,3)    ##获取字符串,起始结束为止,0表示第一个字符，范围是[m,n)，即m=<name<n
    a.length            ##获取字符串长度
    a.trim()            ##移除空白
    a.trimleft()        ##移除左侧空白
    a.trimright()        ##移除右侧空白
    a.concat(value,...)    ##字符串拼接
    a.indexOf(sub,start)##子序列位置，正数
    a.lastIndexOf(sub,start)##子序列位置，倒数
    a.slice(start,end)    ##切片
    a.toLowerCase()        ##转换为大写
    a.toUpperCase()        ##转换为小写
    a.split(delimiter,limit)    ##分隔
    a.search(regexp)    ##从头开始匹配，返回匹配成功的第一个位置(g无效)
    a.match(regexp)        ##全局搜索,如果正则中有g表示找到全部，否则只知道第一个
    a.replace(regexp,replace)##替换，有g替换所有，否则只替换第一个，$数字：匹配的第n个组内容，$&当前匹配的内容,$`：位于匹配子串左侧的文本
(4)布尔类型
    true
    false
(5)数组
    a=[1,'a','','tom']
    a.length            ##数组长度
    a.splice(n,0,value)    ##从指定位置插入value
    a.splice(n,1,value)    ##从指定位置替换value
    a.splice(n,1)        ##从指定位置删除value
    a.slice(m,n)        ##从指定位置切片
    a.join(sep)            ##数组值按照指定分隔符拼接成字符串
    a.concat(val,...)    ##对数组元素进行排序
    a.sort()            ##对数据元素进行排序
    
(6)字典
    a={'k1':'v1','k2':'v2'}

4、常用语法
(1)函数定义语法
a.普通函数：

function fname(){
函数体
}
b.匿名函数
fsetInterval(function(){
console.log(123);
},5000)

c.自执行函数

(2)if语法
    if(条件){
    
    }else if(条件){
    
    }else if(条件){
    
    }else{
    
    }
    
    ==：非严格意义等号，1=="1"为true
    ===:严格意义等号，1==="1"为false
    !=:不等号
    &&:逻辑与
    ||:逻辑或

name='1' ;
switch(name){
case '1':
console.log(123);
case '2':
console.log(456);
default:
console.log(789);

}

<script>

var name='1';

switch (name){

case '1':

age=123;

console.log(age)

case '2':

age=456;

console.log(age)

default:

age=999;

console.log(age)

}

</script>

(3)for循环

1)语法
    a=[1,'a','','tom']
    for(var item in a){
        console.log(a[item]);
    }
    2)语法
    a=[1,'a','','tom']
    for(var i=0;i<a.length;i++){
        console.log(a[i]);
    }
  
5.其他常用函数
(1)计时器

<body>

    <script >

        setInterval("alert('警告')",5000)

    </script>

</body>

(2)console日志记录

<body>

    <script >

        function  f01() {

            console.log(123)

        }

        setInterval("f01()",5000)

    </script>

</body>

(3)json和字符串转换

JSON.stringify(li) ##将数组转化为字符串
JSON.parse(li) ##将字符串转化为数组
(4)转义

encodeURL() ##URL中转义的字符
decodeURL() ##URL中未转义的字符
encodeURLComponent() ##URL中组件未转义的字符
decodeURLComponent() ##URL中组件转义的字符
escape() ##对字符串转义
unescape() ##给转义字符串解码
URLError() ##给URL编码和解码方法抛出
(5)eval
javascript中eval是可以编译代码，也可以获取返回值
(6)时间
var dt=new Date()
dt.getxxx ##获取时间
dt.setxxx ##设置时间
(7)确认框
confirm('输入信息内容')

(8)重定向
location.href='url' ##重定向
location.reload() ##重新加载
location.href ##获取URL
(9)事件
事件调用有两种方式：
a.一种是通过直接标签绑定
onclick='xx()'
b.先获取Dom对象，然后进行绑定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus

onclick
onblur
onfocus

6、Dom间接选择器
(1)找到标签
a.直接查找
获取单个元素：document.getElementById('i1')
获取多个元素：document.getElementsByTagName('div')
document.getElementsByClassName('c1')
document.getElementsByName('name')
b.间接查找
tag=document.getElementById('i1')

parentElement ##父标签元素
children ##子标签元素
firstElementChild ##第一个子标签元素
lastElementChild ##最后一个子标签元素
nextElementSlibling ##下一个兄弟标签元素
previousElementSlibling ##上一个兄弟标签元素

(2)操作标签
a.innerText
获取标签中的文本内容：标签.innerText
标签内容重新赋值：标签.innerText=''
b.className
tag.className ##直接整体操作
tab.className.add('样式名') ##添加指定样式
tab.className.remove('样式名') ##删除指定样式

7、作用域
(1)作用域范围
a.其他语言：以代码块作为作用域
public void Func(){
if(1==1){
string name='Java';
}
console.writeline(name);
}
Func(); ##此时执行报错，因为name是局部变量，其作用域为{}内
b.python:
def func():
if 1==1:
name='tom'
print(name)

func() ##此时执行成功，因为Python作用域是函数本身
c.javascript
def func(){
if (1==1){
name='tom';
}
console.log(123);
}

func() ##此时执行成功，因为javascript作用域是函数本身
##函数作用域存在作用域链中，并且也是在创建之前被声明
##函数局部变量提前声明
8、JavaScript面向对象
function fo(n){
this.name=n;
}
var obj=new fo('Tom');

a.this 代指对象(python self)
b.创建对象时,new 函数名，表示类实例化
9、JS正则匹配
/../ 用于正则匹配
/../g 全局匹配
/../i 忽略大小写匹配
/../m 多行匹配
(1)test
判断字符串是否符合规定的正则，只要含有匹配内容就返回true
req=/^d+$/
req=/\bJava\b/g
(2)exec
获取匹配数据

Web前端学习——JavaScript的更多相关文章

  1. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  2. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  3. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  4. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  5. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  6. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  7. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. web前端学习就这9个阶段，你属于哪个阶段？

    第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  9. （纯干货）最新WEB前端学习路线汇总初学者必看

    Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...

随机推荐

  1. Jquery datatable中文排序问题

    先扩展datatable的的排序功能,添加一个自定义排序函数 //为jq datatable 自定义中文排序 jQuery.fn.dataTableExt.oSort['chinese-sort-as ...

  2. dp百题大过关(第一场)

    好吧,这名字真是让我想起了某段被某教科书支配的历史.....各种DP题层出不穷,不过终于做完了orz 虽然各种手糊加乱搞,但还是要总结一下. T1 Monkey Banana Problem    这 ...

  3. window10下的eclipse用java连接hadoop执行mapreduce任务

    一.准备工作 1.eclipse连接hadoop的插件,需要版本匹配,这有几个常用的 2 版本的插件 hadoop2x-eclipse-plugin-master 密码:feg1 2.hadoop-c ...

  4. 新增加的HTTP状态码 -- 103

    IETF公布了新的HTTP状态码-103, 总结一下就是提前预加载(css.js)文档,提升用户的访问速度. Summary: a new status code that lets the serv ...

  5. IT屌丝如何获取改变自己的真正内心动力

    要想从现在的低薪(年薪10万以下)快读变成未来的高新(年薪30万以上)我们要做的就只有从自身改变开始! 人改变自己的勇气,朱啊哟取决于我们自己当前的痛苦程度!直到某一天真的回避不了了,才会被动的改变, ...

  6. linux 更新源miss问题

    1.之前新装的linuxMint 执行 apt-get install vim 安装失败 发现原因是源更新失败导致,后来执行apt-get update 发现老是获取失败,查了google总结出以下解 ...

  7. java 分页导出百万级数据到excel

    最近修改了一个导出员工培训课程的历史记录(一年数据),导出功能本来就有的,不过前台做了时间限制(只能选择一个月时间内的),还有一些必选条件, 导出的数据非常有局限性.心想:为什么要做出这么多条件限制呢 ...

  8. mysql存储过程--学习

    -- 存储过程示例一   inDROP DATABASE IF EXISTS tdemo;CREATE DATABASE tdemo CHARACTER SET=utf8; USE tdemo;CRE ...

  9. 从java1到java9每个版本都有什么新特性？

    每次出新版本,大家大概都会这么问,"Java X会有什么特性呢?" .在下面的内容里,我总结了至今为止的Java主要发行版中各自引入的新特性,这样做的目的是为了突出各个新特性是在哪 ...

  10. org.xml.sax.SAXParseException; lineNumber: 2; columnNumber: 6; 不允许有匹配 "[xX][mM][lL]" 的处理指令目标。

      Exception in thread "main" org.apache.ibatis.exceptions.PersistenceException: ### Error ...