JavaScript基础
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言。
-
JavaScript特点
- 向HTML页面中添加交互行为。
- 脚本语言，语法和Java类似。
- 解释性语言，边执行边解释
-
JavaSCript组成
- ECMAScript
- DOM
- BOM
-
JavaScript的基本结构
<script type="text/javascript"> <!— JavaScript 语句; —> </script >
- JavaScript的应用
……
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("初学JavaScript");
document.write("<h1>Hello，JavaScript</h1>"); </script>
</body>
</html>
// <script>…</script>可以包含在文档中的任何地方，只要保证 这些代码在被使用前已读取并加载到内存即可
- JavaScript的执行原理
[图片上传失败...(image-41770a-1573610521125)]
-
网页中引用JavaScript的方式
使用<script>标签
-
外部JS文件
<script src="export.js" type="text/javascript"></script>
-
直接在HTML标签中
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
- JavaScript核心语法
[图片上传失败...(image-ce8593-1573610521125)]
-
核心语法——数据类型
- undefined
- var width; 变量width没有初始值，将被赋予值 undefined
- null
- 表示一个空值，与undefined值相等
- number
- var iNum=23; //整数 var iNum=23.0; //浮点数
- boolean
- true和false
- string
- 一组被引号（单引号或双引号）括起来的文本 var string1="This is a string";
- undefined
-
核心语法——typeof运算符
- typeof检测变量的返回值
- typeof运算符返回值如下
- undefined：变量被声明后，但未被赋值
- string：用单引号或双引号来声明的字符串
- boolean：true或false
- number：整数或浮点数
- object：javascript中的对象、数组和null
-
核心语法——String对象
-
属性
字符串对象.length
方法
字符串对象.方法名();
方法名称 说明 charAt(index) 返回在指定位置的字符 indexOf(str，index) 查找某个指定的字符串在字符串中首次出现的位置 substring(index1，index2) 返回位于指定索引index1和index2之间的字符串，并且包括索 引index1对应的字符，不包括索引index2对应的字符 split(str) 将字符串分割为字符串数组 var str="this is JavaScript"; var strLength=str.length; //长度是18
-
-
核心语法——数组2-1
-
创建数组
var 数组名称 = new Array(size); // new 表示数组 的 关键字 //(size)表示数组中可存 放 的元素总数为数组元素赋值
访问数组
var fruit= new Array("apple", "orange", " peach","banana"); //数组名[下标] //var fruit = new Array(4); //fruit [0] = " apple "; //fruit [1] = " orange "; //fruit [2] = " peach "; //fruit [3] = " banana ";
-
-
核心语法——数组2-2
数组的常用属性和方法
-
类别 名称 描述 属性 length 设置或返回数组中元素的数目 方法 join( ) 把数组的所有元素放入一个字符串，通过一个的分隔符进
行分隔方法 sort() 对数组排序 方法 push() 向数组末尾添加一个或更多 元素，并返回新的长度
-
核心语法——运算符号
-
类型 运算符 算术运算符 + - * / % ++ — 赋值运算符 = += -= 比较运算符 > < >= <= == != === !== 逻辑运算符 &&、||、！
-
-
核心语法——逻辑控制语句
if条件语句
switch多分支语句
for、while循环语句
for-in
var fruit=[ "apple", "orange", "peach","banana"]; for(var i in fruit){ document.write(fruit[i]+"<br/>"); }
核心语法——循环中断
break
continue
<script type="text/javascript"> var i=0; for(i=0;i<=5;i++){ if(i==3){ continue; } document.write("这个数字是："+i+"<br/>"); } </script>核心语法——注释
-
当行注释以//开始，以行末结束
- alert("恭喜你！注册会员成功"); //在页同上弹出注册会员成功的提示框
-
多行注释以 /* 开始，以 / 结束，符号 /…… */ 指 示中间的语句是该程序中的注释
- /* 使用for循环运行“document.write("<h3>Hello World</h3>");”5次 使用document.write在页面上输出“Hello World” */
-
核心语法——常用的输入与输出
-
alert
alert("提示信息");
-
prompt
prompt("提示信息", "输入框的默认信息"); prompt("请输入你喜欢的颜色","红色"); prompt("请输入你喜欢的颜色","");
-
-
核心语法——语法约定
- 代码区分大小写
- 变量、对象和函数的名称
- 分号
-
程序调试
- Chrome开发人员工具
- 停止断点调试
- 单步调试，不进入函数体内部
- 单步调试，进入函数体内部
- 跳出当前函数
- 禁用所有断点，不做任何调试
- alert（）方法
