一、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. JS实现移动端购物车左滑删除功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  2. Spring框架学习之高级依赖关系配置（一）

    上篇文章我们对Spring做了初步的学习,了解了基本的依赖注入思想.学会简单的配置bean.能够使用Spring容器管理我们的bean实例等.但这还只是相对较浅显的内容,本篇将介绍bean的相关更高级 ...

  3. 剑指offer（一）

    面试题3:二维数组中查找 题目描述: 在一个二维数组中,每一行都按照从左往右递增地顺序排序,每一列都按照从上往下递增的顺序排序.请完成一个函数,输入这样的一个数组和一个整数,判断数组中是否存在该整数. ...

  4. 开发一个基于 Android系统车载智能APP

    很久之前就想做一个车载相关的app.需要实现如下功能: (1)每0.2秒更新一次当前车辆的最新速度值. (2)可控制性记录行驶里程. (3)不连接网络情况下获取当前车辆位置.如(北京市X区X路X号) ...

  5. jQuery选择器(属性过滤选择器)第六节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. 使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...

  7. Android AsyncTask内部线程池异步执行任务机制简要分析

    如下分析针对的API 25的AsyncTask的源码: 使用AsyncTask如果是调用execute方法则是同步执行任务,想要异步执行任务可以直接调用executeOnExecutor方法,多数情况 ...

  8. 机器学习数学|微积分梯度jensen不等式

    机器学习中的数学 觉得有用的话,欢迎一起讨论相互学习~Follow Me 原创文章,如需转载请保留出处 本博客为七月在线邹博老师机器学习数学课程学习笔记 索引 微积分,梯度和Jensen不等式 Tay ...

  9. Node学习笔记 http

    node url querystring 第二个参数指定分隔符 也可以指定三个参数,效果和两个参数类似 不同于querystring,下面是querystringfy的用法 queryescape与e ...

  10. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...