一、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. .NET在VS2008中生成DLL并调用

    1.生成DLL 打开VS2008 - >新建->项目->类库->ClassLibrary1,在ClassLibrary1中会自动创建一个Class1类 class1中加入代码如 ...

  2. Windows环境下多线程编程原理与应用读书笔记（8）————信号量及其应用

    <一>线程间同步原因 线程间竞争共享资源: 线程间为完成某个任务而协作: 通过互斥量可以实现线程间由于竞争所需要的同步,通过事件可以实现线程间由于协作所需要的同步. 信号量很好地将互斥量和 ...

  3. 磁盘管理之 raid 文件系统 分区

    第1章 RAID 磁盘阵列 1.1 使用raid的目的 1)获得更大的容量 2)让数据更安全 3)读写速度更快 1.2 raid0.raid1.raid5.raid10对比 磁头 0磁道 1扇区 前4 ...

  4. EasyUI实现购物车、菜单和窗口栏等最常用的用户界面功能

    一.EasyUI jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 e ...

  5. robotframework自动化：登陆操作

    robotframework自动化系统:登录 robotframework对于编程能力比较弱的测试人员而言,真的是雪中送炭!我们可以使用robotframework根据之前完成的测试用例,一步步完善自 ...

  6. Elasticsearch集群调优

    系统调优 禁用swap 使用swapoff命令可以暂时关闭swap.永久关闭需要编辑/etc/fstab,注释掉swap设备的挂载项. swapoff -a 如果完全关闭swap不可行,可以试着降低s ...

  7. ionic3 打包安卓平台环境搭建报错解决方案总结

    1.jvm虚拟机提供的运行空间小于项目所需的空间是报错.如图: 解决方法:在环境变量中配置jvm的运行内存大小,大于所需的内存即可. 其中:-Xmx512M可根据实际提示情况,进行更改,如1024M, ...

  8. JAVA提高十二：HashMap深入分析

    首先想说的是关于HashMap源码的分析园子里面应该有很多,并且都是分析得很不错的文章,但是我还是想写出自己的学习总结,以便加深自己的理解,因此就有了此文,另外因为小孩过来了,因此更新速度可能放缓了, ...

  9. mysql 读写分离

    常见的读写分离方案:1)Amoeba读写分离2)MySQL-Proxy读写分离3)基于程序读写分离(效率很高,实施难度大,开发改代码) 2)原理 web 访问数据库,通过proxy4040端口作为转发 ...

  10. app.config 配置多项 配置集合 自定义配置(3)

    再说说利用app.config配置多个自定义的方法.先看这个例子:美国家庭Simpson的家里有父亲母亲和三个儿女,而中国的老王只有独生子女.结构如下: <?xml version=" ...