一、JavaScript简介:

  概念:JavaScript是一种解释性的、跨平台的、基于对象的脚本语言,一般用于客户端来给HTML页面增加动态的功能。
  组成
    1.ECMAScript,描述了该语言的语法和基本对象
    2.DOM 文档对象模型,描述处理网页内容的方法和接口
    3.BOM 浏览器对象模型,描述与浏览器进行交互的方法和接口。

二、JavaScript

  1.js的引入方式

    1.1 放在HTML的<head>部分
    1.2 放在HTML的<body>部分
    1.3 从外部文件引入:
      <script src="myScript.js"></script>

  2.变量

    2.1变量的声明:
      使用“var”关键字来声明变量
      声明时赋值var x=1
      或先声明后赋值:var x; x=1
      对于没有赋值的变量,其值为:undefined
    2.2变量的命名规则:
      英文字母、数字、下划线
    2.3变量名格式:
      匈牙利命名法:变量名=类型+对象描述 例:var sname="hello"; var nage=18
      驼峰命名法:
        全部小写,单词用下划线分割
        每个单词首字母大写
        首字母小写,其他单词首字母大写
    2.4作用域:
      局部作用域:函数内部定义
      全局作用域: 函数外定义
      优先级:局部变量>全局变量

  3.运算符     

      3.1算数运算符 + - * 、 % ++ --

                        /*
var a=1
b = a++ //先赋值后加减
alert(b) //b=1
alert(a) //a=2
*/
/*
var a=1
b=++a //先加减后赋值
alert(b) //b=2
alert(a) //a=2
*/
/*
var x=1
alert(x++) x=x+1 先赋值,x=1 alert结果为1 ,执行完成后x=2
alert(++x) 此时x=2,先加减后赋值,alert结果为3 x=3
alert(--x) 先加减,后赋值,此时alert结果为2
alert(x--)
*/

        3.2赋值运算符 += -= *= /= %=

        3.3关系运算符 == != ===

              alert(2=="2")  --> true
  alert(2==="2") -->flase
   ===不进行数据转换,直接进行比较

   

                var s="hello"
   alert(typeof(s))
  // typeof:只能判断基础数据类型,对于对象无法准确判断具体是什么对象
   var s2=new String("hello")
   alert(typeof(s2))
   alert(s2 instanceof String);

         3.4逻辑运算符 ! && ||

        3.5位运算符 ~ & | ^ << >>

        3.5一元加减法:

            <!--一元加减法-->
var a=3
b=+a
alert(b)
alert(typeof(b))
<!--可以对数据类型进行转换-->
var a="3"
b=+a
alert(b)
alert(typeof(b))
<!--有非数字类型,转换失败-->
var a="3a"
b=+a
alert(b)
alert(typeof(b))

 4.基本数据类型

      number
      string
      Boolean
      null
      undefined

  5.流程语句

    5.1 while

            <script type="text/javascript">
i=0
while (i<5) {
// statement
console.log(i)
i++
}
</script>

    5.2 do while

            <script type="text/javascript">
i=0
do{ //至少执行一次循环
console.log(i)
i++
} while (i<5);
</script>

    5.3 for

            <script type="text/javascript">
for (var i=0; i<5; i++) {
console.log(i)
}
</script>

    5.4 for in

            <script type="text/javascript">
for (i in [1,2,3,4]) {
console.log(i)
}
</script>

    5.5 if else

 1 <head>
2 <meta charset="utf-8">
3 <title>JavaScript</title>
4 </head>
5 <body>
6
7 <script type="text/javascript">
8 var d = new Date();
9 var time = d.getHours();
10 if (time<10)
11 {
12 document.write("<b>早上好</b>");
13 }
14 else if (time>=10 && time<14)
15 {
16 document.write("<b>中午好</b>");
17 }
18 else
19 {
20 document.write("<b>下午好!</b>");
21 }
22 </script>
23 </body>
24 </html>

    5.6 switch

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body> <button onclick="myFunction()">今天是周几?</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var d=new Date().getDay();
switch (d){
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
document.getElementById("demo").innerHTML=x;
}
</script> </body>
</html>

    5.7 异常处理

            function func (argument) {
try {
console.log('hello')
if(true){
throw "主动抛出错误"
}
} catch(e) {
alert(e);
} finally {
console.log("执行完毕")
}
}
func()

    5.8 continue break default

  6.对象

    6.1 Number

            var num=new Number(15)
console.log(num)
console.log(num.toString()) //数字转字符串
console.log(num.toString(2)) //数字转2进制
console.log(num.toString(8)) //数字转8进制
console.log(num.toString(16)) //数字转16进制

    6.2 String

            var str1=new String("hello");
var str2=" world"; //属性
console.log(str1.length); //字符串的长度
// 方法
//获取指定字符串
console.log(str1.charAt('1')); //返回在指定位置的字符。
//查找
console.log(str1.indexOf('l')); //返回某个指定的字符串值在字符串中首次出现的位置。
console.log(str1.lastIndexOf('l')); //从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。
console.log(str1.replace('e','a')); //替换
console.log(str1.slice(1,3)); //切片[start,end)
console.log(str1.substring(1,3)) //和slice相同
console.log(str.split(" ")); //把字符串分割为字符串数组。
console.log(str1.substr(1,3)) //从起始索引号提取字符串中指定数目的字符 (index,num)
//大小写转换
console.log("HELLO".toLowerCase(str1)) //转小写
console.log("hello".toUpperCase(str1)) //转大写
//编排方法
document.write(s.italics());
document.write(s.bold());
document.write(s.anchor());
console.log(" hello ".trim()) //去除字符串两边的空白
var str=str1.concat(str2);//字符串拼接
console.log(str);

    6.3 Array

            //声明
var cars = ["Volvo","Saab","BMW"]; //方法一
var arr1=[1,2,3,4]; //方法二
var arr3=new Array(); //方法三
var arr4=new Array(3,); //初始化一个长度为3的数组,该数组可变长
//属性
console.log(cars.length)
//方法:
//插入和删除
console.log([1,2,3].concat([4,5,6])) //数字合并
console.log(cars.join("#"))
console.log(cars.pop()) //删除最后一个元素
console.log(cars.push('jeep')) //数组的末尾添加一个或更多元素,并返回新的长度
console.log(cars.shift()) //删除并返回数组的第一个元素
console.log(cars.unshift('abc')) //向数组的开头添加一个或更多元素,并返回新的长度。
console.log(cars)
//排序
console.log(cars.reverse()) //反转数组顺序
console.log(cars.sort()) //数组排序
console.log(cars.toString()) //数组转字符串

    6.4 Boolean

            //方法
var bool = new Boolean(1);
console.log(bool.toString())
console.log(bool.valueOf())

    6.5 Date

            //时间创建
var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0) console.log(today)
console.log(d1)
console.log(d2)
console.log(d3)
//方法
y=today.getFullYear()
m=today.getMonth()
d=today.getDate()
H=today.getHours()
M=today.getMinutes()
S=today.getSeconds() console.log(y+'年'+m+'月' +d+'日'+" "+H+":"+M+":"+S)
console.log(today.getTime())

    6.6 Mtch

            console.log(Math.abs(-2))
console.log(Math.max(1,3,5))
console.log(Math.min(1,3,5))
console.log(Math.random()) //[0.0,1.0)随机数
console.log(Math.round(2.5)); //四舍五入

    6.7 RedExp

            //语法
// var patt=new RegExp(pattern,modifiers);
// 或者更简单的方式:
// var patt=/pattern/modifiers;
/*
修饰符
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。
*/
var str="hello world"
console.log(str.search("o")) //返回第一个匹配的索引值
console.log(str.search("a")) //没找到返回-1
console.log(str.match(/o/g));
console.log(/hello/g.test(str))

 7.函数

    7.1函数创建的三种方法

            // 方法一
function func (argument) {
return "hello"
}
console.log(func())
// 方法二:构造函数 var func = new Function("参数1", "参数2", "函数体")
var func = new Function("a","b","return a+b")
console.log(func(1,2))
// 方法三 匿名函数(函数表达式)
console.log(function(x,y){return x+y}(3,5))

    7.2函数调用

            this 关键字:一般而言,在Javascript中,this指向函数执行时的当前对象。
void()
// void的作用:阻拦方法的返回值
function f() {
return 8
}
alert(void(f()))

    7.3参数

            arguments对象
//遍历传入的参数
function func() {
for (var i = 0; i<arguments.length; i++) {
console.log(arguments[i])
} }
func(1,2,3,4,5)

三、DOM

  1.介绍  

     DOM (Document Object Model,文档对象模型):W3C定义的访问HTML和XML文档的标准
       DOM组成:
      核心DOM :针对任何结构化文档的标准模型
      XML DOM :针对 XML 文档的标准模型
      HTML DOM :针对 HTML 文档的标准模型

  2.节点

    文档节点
    元素节点
    文本节点
    属性节点
    注释节点

  3.属性

    3.1自身属性

      nodeName
      nodeValue
      nodeType

            <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="h">
<p>hello</p>
<p>world</p>
</div>
<script type="text/javascript">
console.log(document.getElementById("h").nodeName)
console.log(document.getElementById("h").nodeValue)
console.log(document.getElementById("h").nodeType)
console.log(document.getElementById("h").innerHTML)
</script>
</body>
</html>

    3.2导航属性

    第一类:不建议使用,如果两个元素之间有文本(空格或换行)会把文本作为下一个元素
      parentNode ☆
      firstChild
      lastChild
      nextSibling
      previousSibling   
    第二类:建议使用
      getElementById("div1")
      firstElementChild
      lastElementChild;
      nextElementSibling;

  4.全局查找与局部查找

        <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<div id="div1">
<div class="div2">hello</div>
<div class="div3" name="name">world
<p>你好 世界!</p>
<p class="ppp">hello html</p>
</div> <p>hello world</p>
</div>
<script> //全局查找
//通过id查找
var e=document.getElementById("div1")
//通过class查找
var ele=document.getElementsByClassName("div2")[0] //结果是一个数组
var ele2=ele.nextElementSibling;
alert(ele2.innerHTML)
//通过标签查找
var ele3=document.getElementsByTagName("p");
alert(ele3[0].innerHTML)
//通过name查找
ele4=document.getElementsByName("name")
console.log(ele4[0].innerHTML) //局部查找
//通过tag
var ele5=document.getElementsByClassName("div3");
var ele6=ele5[0].getElementsByTagName("p")
console.log(ele6[0].innerHTML)
//通过class
var ele7=ele5[0].getElementsByClassName("ppp")
console.log(ele7[0].innerHTML) //不可以通过id和name进行局部查找
</script> </body>
</html

  5. DOM 修改、添加、删除

    5.1创建HTML内容并改变样式

            <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
document.getElementById("p1").innerHTML="hello world" //创建内容
document.getElementById("p1").style.color = 'blue'; //更改样式
</script>
</body>
</html>

    5.2添加新的元素:appendChild()

           <script>
  //创建 <p> 元素:
  var para = document.createElement("p");
   // <p> 元素添加文本节点
   var node = document.createTextNode("这是一个新的段落。");
   //将文本节点添加到 <p> 元素中:
   para.appendChild(node);
   //查找已存在的元素
  var element = document.getElementById("div1");
   //添加到已存在的元素中:
  element.appendChild(para);
</script>

    5.3 插入到已有元素之前:insertBefore()

    5.4 移除元素:removeChild()

    5.5 替换元素:replaceChild()

  6.事件

    6.1鼠标事件

                <p onclick="alert('单击')">单击鼠标</p>
<p ondblclick="alert('双击')">双击鼠标</p>
<p onmousedown="alert('鼠标按下')">鼠标按下</p>
<p onmouseup="alert('鼠标松开')">鼠标松开</p>
<p onmouseover="alert('放上鼠标')">鼠标移到元素之上。</p>
<p onmouseout="alert('移开鼠标')">鼠标移开</p>

    6.2框架/对象事件

            <!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload=function () {
//把js代码写在头部,等页面加载完之后执行
}
</script>
</head>
<body>
</body>
</html>

    6.3表单事件

        <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<input class="keyword" type="text" value="请输入查找内容" onfocus="func1()" blur="func2()">
<script>
//事件
// onfocus 获取焦点时触发
// onblur 失去焦点时触发
function func1 () {
// body...
var ky=document.getElementsByClassName("keyword")[0];
ky.value="";
}
function func2 () {
var ky=document.getElementsByClassName("keyword")[0];
if (ky.value.trim().length==0){
ky.value="请输入查找内容";
}
}
</script>
</body>
</html>

例1:onfocus与onblur

        <!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"> </head>
<body>
<!-- //方法一 -->
<form id="form" onsubmit="return check()">
<!-- 方法二 -->
<!-- <form id="form"> -->
<input type="text" name="username">
<input type="submit" value="提交">
</form>
<script>
//阻止事件方法一
function check() {
/* body... */
alert("验证失败");
return false
} //阻止事件方法二
// var f=document.getElementById("form")
// f.onsubmit=function () {
// /* body... */
// alert(123);
// return false
// } </script>
</body>
</html>

例2:onsubmit

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<select id="province" onchange="func(this)"></select>
<select id="city"></select>
<script>
data={"北京市":["海淀区","朝阳区"],"河北省":["石家庄","廊坊"]} var pro=document.getElementById("province");
var city=document.getElementById("city"); for (var i in data){
var option_pro=document.createElement("option");
option_pro.innerHTML=i;
pro.appendChild(option_pro)
}
function func (self) {
// body...
var choice=self.options[self.selectedIndex].innerHTML; //添加之前删除元素
// city.options.length=0; options=city.children
for (var k=0; k<options.length; k++){
city.removeChild(options[k--]);
} for (var i in data[choice]){
var option_city=document.createElement("option");
option_city.innerHTML=data[choice][i];
city.appendChild(option_city)
}
}
</script>
</body>
</html>

例3 onchange实例:二级联动菜单

四、BOM(Browser Object Model,浏览器对象模型)

  1.Window对象

    表示浏览器窗口

        属性:
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>
方法:
window.alert("sometext");
   window.confirm("sometext");
     例:r=window.confirm("是否取消?")

    计时事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<button onclick="start()">开始</button>
<button onclick="stop()">停止</button>
<p>页面上显示时钟:</p>
<p id="demo"></p>
<hr>
<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。(你必须在3秒之前点击它)。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button>
<script> function start () {
myVar=setInterval(function(){myTimer()},1000);
} function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function stop(){
clearInterval(myVar);
} var myVar;
function myFunction(){
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
clearTimeout(myVar);
} </script> </body>
</html>

setInterval clearInterval setTimeout clearTimeout

  2.Screen对象

        <script>
document.write("总宽度/高度: ");
document.write(screen.width + "*" + screen.height);
document.write("<br>");
document.write("可用宽度/高度: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("<br>");
document.write("色彩深度: ");
document.write(screen.colorDepth);
document.write("<br>");
document.write("色彩分辨率: ");
document.write(screen.pixelDepth);
</script>

  3.Location对象

      location.hostname 返回 web 主机的域名
  location.pathname 返回当前页面的路径和文件名
  location.port 返回 web 主机的端口 (80 或 443)
  location.protocol 返回所使用的 web 协议(http:// 或 https://)
  location.href 属性返回当前页面的 URL。
  location.pathname 属性返回 URL 的路径名。
  location.assign() 方法加载新的文档。
  location.reload() 刷新

  4.History对象

        history.length    返回历史列表中的网址数
history.back() 加载 history 列表中的前一个 URL
history.forward() 加载 history 列表中的下一个 URL
history.go(Number|URL) 加载 history 列表中的某个具体页面

JavaScript学习笔记(基础部分)的更多相关文章

  1. JavaScript学习笔记-基础语法、类型、变量

    基础语法.类型.变量   非数字值的判断方法:(因为Infinity和NaN他们不等于任何值,包括自身) 1.用x != x ,当x为NaN时才返回true; 2.用isNaN(x) ,当x为NaN或 ...

  2. JavaScript 学习笔记(基础学习)

    一:来自W3School工具的学习 1:document.getElementById(id) : 访问某个标签的元素,然后对它进行操作 .innerHTML 对其内容进行修改 2:document. ...

  3. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  4. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  6. Java程序猿的JavaScript学习笔记(3——this/call/apply)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. Java程序猿JavaScript学习笔记(4——关闭/getter/setter)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  8. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  9. Java程序猿的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  10. Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. maven私服nexus3.9安装配置

    maven私服nexus3.9安装配置 私服介绍 私服是指私有服务器,是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构建.有了私服之后,当 Maven 需要下载构件时,直接请求私服 ...

  2. resolver - 解析器(resolver) 配置文件

    总览 (SYNOPSIS) /etc/resolv.conf 描述 (DESCRIPTION) 解析器(resolver) 是 C 函数库 中 的 一组 例程, 用于 访问 Internet 域名系统 ...

  3. go语言从例子开始之Example32.打点器

    定时器 是当你想要在未来某一刻执行一次时使用的 - 打点器 则是当你想要在固定的时间间隔重复执行准备的.这里是一个打点器的例子,它将定时的执行,直到我们将它停止. Example: package m ...

  4. java使用对象类型作为方法的参数

  5. LINUX Mysql5.6.19 安装

    1.需要扩展安装 yum -y install make bison gcc-c++ cmake ncurses ncurses-devel 2.下载Mysql5.6.19 wget ftp://mi ...

  6. notepad++ 安装 hex_editor 十六进制查看插件

    1.到 https://github.com/chcg/NPP_HexEdit/releases 去下载相应的文件,注意32位和64位的区别 2.点击notepad++的设置--->导入--&g ...

  7. XSS漏洞基础

    什么是XSS? XSS全程Cross-site scripting,跨站脚本攻击.恶意攻击者往Web页面里插入html代码,当用户浏览该页之时,嵌入其中Web里面的html代码会被执行,从而达到恶意用 ...

  8. 自定义combiner实现文件倒排索引

    package com.zuoyan.hadoop; import java.io.IOException; import org.apache.hadoop.conf.Configuration; ...

  9. shell(计算机壳层)(二)

    shell 命令常用命令cat 文件名 输出文件内容到基本输出(屏幕 or 加>fileName 到另一个文件)cb 格式化源代码chmod //change mode,改变文件的权限cp co ...

  10. [CSP-S模拟测试]:长寿花(DP+组合数)

    题目描述 庭院里有一棵古树.圣诞节到了,我想给古树做点装饰,给他一个惊喜.他会不会喜欢呢?这棵树可以分为$n$层,第$i$层有$a_i$个防治装饰品的位置,有$m$种颜色的装饰品可供选择.为了能让他喜 ...