javaScirpt_01(基础入门)
1.js的历史(网景通信公司)
布兰登10天时间开发liveScirpt 后面与Sun合作---javascript
2.同时期微软和 Nombas公司开发的jscript|scriptEase语言
3.欧洲计算机协会上三者制定了一套标准ECMAScript核心语法
4.js的组成
ECMAScript--核心语法(变量,选择结构,循环结构,数组等等操作) DOM:文档对象模型---通过DOM可以获取HTML文件中的任意标签,实现增删改查 BOM:浏览器对象模型,通过BOM可以对“数据的结果”进行输入输出以及获取浏览器上 的地址并且可以设置,历史记录,屏幕的宽度和高度以及浏览器的版本和引擎
5.js如何引入html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
/*js的嵌入式*/
<script type="text/javascript ">
alert("好好学习,天天向上");
</scripy>
</head>
<body>
/*行内式js编写*/
<button onclick="alert(123)" onmouseover="this.style.backgroundColor='rad'"> 按钮</button>
/*嵌入式 借助script标签 */
alert();
</body>
</html>
6.js中的输出语句:
alert(); 普通弹窗
confirm(); 确认弹窗,返回值是boolean类型
prompt(); 弹窗输入语句,类似Scanner
document.write("内容"); 向页面输出内容
终极输出
console.log(); 日志信息输出
console.info(); 普通信息输出
var f=confirm("你确定要和我分手吗?");
var name=prompt("请输入你的名字",”张三“);默认张三
alert(name);
document.write("我爱学习");
console.log("好好学习");
console.info("天天摸鱼");
7.js中的运算符:
算数运算符:+ - * / % ++ --
赋值运算符 += = -= *= /= %=
关系运算符 > < >= <= != == ===
逻辑运算符 && || !
三元运算符 表达式? 结果1:结果2
"===" 判断内容以及判断内容的类型
var a = 1;
var b = "1";
console.log(a==b);//true
console.log(a===b);//false
8.js的循环结构:
while循环
/*计算1到100的和*/
var num=1;
var sum=1;
while(num<=100){
document.write(num+"<br/>");
num++;
}
/*数组的基本使用*/
var names = ["张三","里斯","wangwu"];
for(var 1=0;i<names.length;i++){
document.write(names[i]+"<br>");
}
js函数入门:
函数:就是方法,封装代码,方便调用
语法:
function 函数名称(){
结果集;
}
注意:需要手动调用,否则无效
function add(){
var a=1;
var b=1;
alert(a+b);
}
/*直接调用*/
add();
/*间接调用*/
<button onclick="add();">按钮<button>
函数的调用有以下方式:
直接调用:
直接借助标签自带的事件属性
间接借助标签自带的事件属性
间接调用:
script标签中首先得到标签对象,然后在调用属性。
js组成:ECMAScript,BOM,DOM
DOM:文档对象模型,通过DOM编程可以实现动态获取html文件的任意标签进行CURD(增删查改)
根据标签的id属性可以得到标签本身。
/*根据标签的id属性可以得到标签本身。*/
document.getElementById(id);
/*输入项中的内容最终会保存在input中的value属性*/
<input id="ywg" type="text" value="杨文广">
<button onclick = "sb();">点击获取输入项中的内容</button>
<script type="text/javascript">
function sb(){
// 根据标签的id属性获取标签
var bb = document.getElementById("ywg");
alert(bb.value);
}
</script>
/*实现9*9乘法表:*/
<script type="text/javascript">
document.write("<table border = '0' width = '100%'>");
for(var i = 1;i<=9;i++){
document.write("<tr>");
for(var j = 1;j<=i;j++){
document.write("<td>");
document.write(j + " * " + i + " = " + ( i * j ));
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>